Installera Next.js-integrationen: nedladdning, nyckel, layout eller metadata, verifiera

Next.js är den andra plattformen du kan installera i dag. Paketet är en nedladdning, kopplingen är några rader, och ett beslut spelar roll: om sajten kör Cache Components. Det avgör vilken av två vägar du tar.

Innan du börjar

Paketet finns inte på npm. Next.js-guiden på Integrera-sidan har nedladdningen, och dess steg är utskrivna med din egen domän och början av din site key. Allt här är samma guide, med resonemanget bifogat.

Paketet levereras som TypeScript-källa. Next måste be om att kompilera det, och det är den enda rad varje sajt behöver i next.config:

const nextConfig = { transpilePackages: ['@dynamic-seo/middleware'] }

1. Ladda ner och installera

Lägg tarballen i ditt repo, till exempel under vendor/, och installera från den sökvägen. En incheckad fil är det som överlever ett rent bygge hos din värd; en länk till en fil som byts ut gör det inte.

npm install ./vendor/dynamic-seo-nextjs.tgz

2. Site key och de tre variablerna

Kopiera nyckeln från steg 2 i guiden. Den ska in i .env lokalt och i värdens miljövariabler för produktion, tillsammans med edge-workerns adress och din domän som den är registrerad i Dynamic SEO:

DYNAMIC_SEO_WORKER_URL=https://dynamic-seo-edge.dynamicseo.workers.dev
DYNAMIC_SEO_DOMAIN=example.com
DYNAMIC_SEO_SITE_KEY=sk_...

Workern är samma kant som WordPress-pluginet pratar med. En Next.js-sajt dyker därför upp i Leverans-kortet på samma sätt.

3. Välj väg

Utan Cache Components: head-komponenten. Skapa proxy.ts (i Next 15 och tidigare middleware.ts, exporterad as middleware) så att komponenten vet aktuell sökväg, och rendera komponenten en gång inne i body i den rotlayout som omsluter dina publika sidor:

// proxy.ts
export { dynamicSEOMiddleware as proxy } from '@dynamic-seo/middleware/nextjs'
export const config = { matcher: ['/((?!_next/static|_next/image|favicon.ico|api/).*)'] }

// app/layout.tsx
import { DynamicSEOHead } from '@dynamic-seo/middleware/nextjs'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}
        <DynamicSEOHead
          apiUrl={process.env.DYNAMIC_SEO_WORKER_URL!}
          domain={process.env.DYNAMIC_SEO_DOMAIN!}
          siteKey={process.env.DYNAMIC_SEO_SITE_KEY}
          skipPaths={['/admin', '/api']}
        />
      </body>
    </html>
  )
}

Den renderar title, description, canonical, Open Graph, Twitter och JSON-LD för aktuell sökväg, och ingenting alls när inget är publicerat för den. Har du redan en proxy: omslut den med withDynamicSEO i stället för att exportera vår.

Med Cache Components (cacheComponents: true i next.config): head- komponenten fäller bygget. Den läser request-huvuden, och det tillåter Cache Components inte utanför en Suspense-gräns. Hoppa över proxyn och layouten, och lägg den publicerade SEO:n över varje sidas egen metadata i stället. Sökvägen kommer ur sidans params, hämtningen ligger bakom use cache, och det statiska skelettet förrenderas med taggarna i:

// lib/dynamicseo.ts
import type { Metadata } from 'next'
import { cacheLife } from 'next/cache'
import { createDynamicSEO } from '@dynamic-seo/middleware/nextjs'

const dseo = createDynamicSEO({
  apiUrl: process.env.DYNAMIC_SEO_WORKER_URL!,
  domain: process.env.DYNAMIC_SEO_DOMAIN!,
  siteKey: process.env.DYNAMIC_SEO_SITE_KEY,
})

export async function withDynamicSeo(path: string, fallback: Metadata): Promise<Metadata> {
  'use cache'
  cacheLife('minutes')
  return dseo.metadata(path, fallback)
}

// app/[slug]/page.tsx, och samma sak i varje sida som har metadata
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  return withDynamicSeo(`/${slug}`, { title: 'Din egen titel' })
}

När inget är publicerat för en sökväg är det reserven som renderas. Den här vägen är verifierad med ett riktigt bygge på en Next 16-sajt med Payload och Cache Components på.

4. Verifiera, och vad svaret betyder

Verifieringssteget frågar kanten efter din startsida med din site key, från vår sida. Tre svar är möjliga:

Verifierad: kanten levererade publicerat innehåll för startsidan. Kedjan är igång.
Nyckeln fungerar, inget publicerat än: kanten svarade, men inget är publicerat för startsidan. Det är det normala läget direkt efter installationen. Publicera en sida och kör provet igen.
Nyckeln avvisad: nyckeln din installation skickar är inte sajtens aktuella. Kopiera den aktuella från guiden, eller regenerera och uppdatera varje installation.

Ovanför knappen säger steget också vad din egen sajt har gjort: om den har anropat kanten, hur många anrop det senaste dygnet som fick innehåll, och när den senast sågs. Det är serve-loggen, samma siffror som Leverans-kortet på dashboarden, så en fungerande installation läses som fungerande innan något är publicerat.

Var du letar när en sida inte ändras

Gå baklänges. Är något publicerat för den sökvägen? Fick din deploy med sig miljövariablerna? Innehåller sidans head <meta name="dynamic-seo" content="active">? Den taggen skrivs på varje levererat svar, så saknas den fick anropet aldrig innehåll, och Leverans-kortet säger varför.