Next.js-integrationen

Next.js är den andra plattformen du kan installera i dag. Paketet är en nedladdning, kopplingen är en wrapper i next.config, och en fråga 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.

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://seo.dynamicseo.com
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.

Gör en ny deploy när du har ändrat en variabel, den gäller först när sajten byggs om. Vercel sparar variabler för produktion som känsliga, så de ser tomma ut om du läser tillbaka dem. Om nyckeln stämmer ser du i stället i appens verifieringssteg, som visar början på nyckeln som skickas bredvid sajtens egen.

3. Välj väg

Utan Cache Components (de flesta sajter, även next-intl och statiska eller ISR-sajter): omslut next.config. Det är hela kopplingen: ingen proxy, ingen ändring i layouten, inget mer att installera.

// next.config.ts
import { withDynamicSEO } from '@dynamic-seo/middleware/nextjs/config'

const nextConfig = { /* din konfiguration */ }

export default withDynamicSEO({
  apiUrlEnv: 'DYNAMIC_SEO_WORKER_URL',
  domainEnv: 'DYNAMIC_SEO_DOMAIN',
  siteKeyEnv: 'DYNAMIC_SEO_SITE_KEY',
})(nextConfig)

Omsluter du redan next.config med next-intl eller MDX: lägg den här ytterst, withDynamicSEO({...})(withNextIntl(nextConfig)).

Har sajten inloggade sidor under app/, till exempel en dashboard, avgränsa wrappern med include så att bara de publika sidorna omsluts. För en route group som heter (marketing): include: [/\(marketing\)[\\/]/].

Vid bygget omsluter wrappern varje sidas generateMetadata, i vilken form sidan än exporterar den, och lägger det du publicerar över din egen metadata. Det du inte har publicerat behåller ditt värde. Sidans sökväg är dess egen canonical på din domän, så ett standardspråk utan prefix och översatta sökvägar matchar båda den publika adress crawlern har sparat. Layouter lämnas orörda. Sidorna förblir statiska och byggs om var femte minut, så en publicering syns inom ungefär fem minuter. Svarar inte kanten under ett bygge visas din egen metadata, och sidan försöker igen vid nästa ombyggnad.

Samma sak gäller strukturerad data. Wrappern hittar din JSON-LD-komponent, det vill säga en fil som renderar <script type="application/ld+json"> och exporterar en komponent vars namn slutar på JsonLd. Den lägger det du publicerar över dina entiteter, typ för typ. Ett @graph förblir en sammanhängande graf med dina egna @id, och typer du inte har läggs till i den.

Med Cache Components (cacheComponents: true i next.config): wrappern lämnar din konfiguration orörd och säger det i bygg-loggen, eftersom en ocachad hämtning i generateMetadata fäller ett sådant bygge. Lägg i stället den publicerade SEO:n över varje sidas egen metadata. 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.

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. Publicerades det för mindre än fem minuter sedan? Då har sidan inte byggts om än. Ä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.