javascript - Hvordan implementere standard språk uten URL-prefiks i Next.js 14 for statisk eksport?

Jeg jobber for øyeblikket med et nettsted ved hjelp av Next.js 14, med mål om å eksportere det som et statisk nettsted for distribusjon via en CDN (Cloudflare Pages). Nettstedet mitt krever støtte for internasjonalisering (i18n) for flere språk. Jeg har satt opp en mappestruktur for språkstøtte, som ser slik ut:

- [language]
  -- layout.tsx  // generateStaticParams with possible languages
  -- page.tsx
  -- ...

Denne oppsettet lar meg få tilgang til sider med språkprefikser i URL-en, som /en/example og /de/example.

Jeg ønsker imidlertid å implementere et standardspråk (f.eks. engelsk) som er tilgjengelig på rotstien uten språkprefiks (/example). Det er viktig at jeg ikke ønsker å omdirigere brukere til en URL med språkprefiks av SEO-grunner. Jeg kan heller ikke bruke omskrivingsfunksjonen fordi jeg bruker statisk eksport.

Her er mine spesifikke krav:

  1. Få tilgang til standardspråksidene direkte via rotstien (f.eks. /example for engelsk).
  2. Unngå videresendinger til språkprefikserte URL-er (f.eks. ikke videresende /example til /en/example).
  3. Oppretthold muligheten til å få tilgang til andre språk med deres respektive prefikser (f.eks. /de/example for tysk).

Jeg ser etter veiledning om:

Hvordan realisere dette med Next.js 14 for å servere sider på standardspråket på rotstien uten en språkprefiks. Sørge for at denne oppsettet er kompatibelt med statisk eksport-funksjonen i Next.js.

Alle innsikter, kodeeksempler eller henvisninger til relevant dokumentasjon vil bli svært verdsatt.

Svar #1

Hvis jeg forstår spørsmålet ditt, er Nextjs et filruteringssystem der hver page.js/ts eller route.js/ts-fil representerer en side i nettappen. Så hvis du går med strukturen du ga i spørsmålet ditt, må du strukturere mappene og filene dine på denne måten og unngå duplikater i koden din.

components
  - HomePage.ts // Shared component for languages
  - AboutPage.ts
App
 - layout.tsx
 - page.ts // for default language pages
 - about
   -- page.ts
 - contactus
   -- page.ts
 - [language]
   -- layout.tsx
   -- page.ts  // for other languages pages
   -- about
      --- page.ts
   -- contactus
      --- page.ts

Den andre tilnærmingen du kan følge er å håndtere språket gjennom tilstandsadministrasjon som Redux eller Zustand og oversette/hente dataene til gjeldende språk i tilstanden, på denne måten trenger du ikke å lage about-sidene som filer.

- layout.tsx
  - page.ts // for all language pages
- about
  -- page.ts
- contactus
  -- page.ts

i tillegg kan du konfigurere din next.config.js på denne måten:

module.exports = {
  i18n: {
    locales: ['en', 'de'], // Add your default language and other languages
    defaultLocale: 'en', // Set the default language
  },
};

Svar #2

Du kan åpenbart ikke bruke mellomvare (fordi det er et statisk nettsted og du trenger output: "export"), så du må eksperimentere med Next.js-ruteren og dens mappestruktur. Dette betyr:

  • /app/[locale]/example/page.tsx for /de/example
  • /app/example/page.tsx for /example

I /app/[locale]/example/page.tsx legger du siden din som vanlig:

export default function Page({ params: { locale } }) {
  const t = getTranslations(locale || "en");
  return (
    <div>
      {t.content}
    </div>
  );
}

…og i /app/example/page.tsx importerer du bare siden fra den andre filen:

export { default as default } from "../[locale]/example/page";

Jeg har laget et innlegg som forklarer dette og flere problemer knyttet til statiske Next.js-nettsteder med output: "export". Jeg har også laget et repository hvor du kan sjekke en fungerende oppsett av dette.

Relaterte artikler