Nextjs+next-intl flerspråkiga internationalisering bästa praxis (APP-router)

Nextjs har två routrar: APP-router och Page-router.

För en tid sedan, under Page-routern, internationaliserades nextjs och sammanfattades:

Men Page-routern kommer att vara routern som gradvis fasas ut av Nextjs. Därför har Nextjs nyligen internationaliserats baserat på APP-router.

1. Val av Nextjs internationaliseringslösning

1. i18next + react-i18next + i18next-resources-to-backend + next-i18n-router

Det verkar som att de flesta använder detta. Jag provade det och det var ganska komplicerat. Jag lyckades inte ännu, så jag gav upp.

2. nästa-i18n-router react-intl

Det såg ganska komplicerat ut, men på grund av skuggan av 1 gav jag upp.

3. nästa-intl

next-intl är en komplett internationaliseringslösning för nextjs och kräver inga andra programvarupaket. Och konfigurationen är relativt enkel. Ännu viktigare, jag konfigurerade det framgångsrikt och stötte på inga oförklarliga problem.

Så det här är det.

2. Katalogstruktur

.

3. Internationell routing

1. navigation.js

Detta är en konfigurationsfil, och objekten som konfigurerats i den här filen kommer att anropas i vissa andra filer.

; , , , ,,,]; = ;  , : , : , : , : , : , : , : , :  }, ] 

2. [locale] katalog

Alla sidfiler i appkatalogen placeras i [locale]-katalogen.

3. Middleware: middleware.js

illustrera:

Implementera följande URL-stil

Webbadress för standardspråk:

Hemsidan är: www.xxx.com

Den inre sidan är: www.xxx.com/about

Webbadresser på andra språk: (ta spanska som exempel)

Hemsidan är: www.xxx.com/es

Den inre sidan är: www.xxx.com/es/about

Dessutom, om standardspråket anges i URL:en, till exempel, standardspråket är engelska, anger användaren URL:en: www.xxx.com/en

Sedan går den automatiskt till www.xxx.com

Koda:

   , })

4. Ladda översättningsfiler

1. Översätt filer

illustrera

Mina översättningsfiler placeras i den "offentliga" katalogen, men i själva verket kan översättningsfilerna också placeras i andra kataloger, så länge som motsvarande sökväg är konfigurerad i filen i18n.js.

Översättningsfilen är en json-fil, och json-filen kan vara i ett kapslat format eller inte. De två kommer i slutändan att refereras något annorlunda.

Kod (ej kapslad)

{ : , }

Kod (kapslad)

{ :{ :, } }

2. i18n.js-fil

illustrera:

Den här filen används för att importera översättningsfiler. Nyckeln är att konfigurera sökvägen till översättningsfilen, som måste överensstämma med sökvägen där din översättningsfil finns.

${locale} i sökvägen indikerar språket.

koda

; //${

3. Konfiguration av next.config.js

/**  ()(

5. Implementera översättning

Kod i layout.js:

&#039;&#039;&#039;&#039;&#039;&#039;&#039;< =>
      < = =>
      <>< />< /></>
      </>
    </>
  );
}

Kod i page.js:

Parametern locale representerar det aktuella språket.

Om översättningsfilen inte är kapslad, då const t = useTranslations();

Om översättningsfilen är kapslad, använd något som: const t = useTranslations("bbb" baserat på filstrukturen och faktiska behov.

&#039;&#039;&#039;&#039;<>   
< =<>)}</></>
</>)

6. Språkväxlare

1. Effekt

Dra ned för att välja ett språk och den aktuella sidan växlar till sidan på det valda språket.

2. Kod

;
 ;
 ;
   () {
  ();
  ();
  ();
  .  = (. });
  };
 
   (
    <>
      <
      =
        =
        =
      >
        < = ></>< = =></>)
        })}
      </>
    </>
  );
}
  () {
  ( => {
      .

7. SEO och sökmotorvänlig

1. Metadata

Nextjs APP-router genererar sidans titel och metadata. Jag försökte tre metoder:

Det första sättet: använd det direkt i layout.js: expert const metadata={}

Det andra sättet: använd dynamiskt genererad metadata i page.js

Som referens:Optimera: Metadata |. Next.js (nextjs.org)

På dessa två sätt misslyckades jag med flerspråkig titel och metadata. Slutligen användes den tredje metoden, som också är den enklaste och mest raka metoden.

Det tredje sättet: skriv titeltaggen och metataggen direkt i page.js.

Därför ändrades koden för page.js till detta:

&#039;&#039;&#039;&#039;<>  
          <>)}</>
        < = =</>
        < = =></>
        < = =></>
        < = =></>
        < = =></>
        < = =></>
        < = =></>
        < = =></>
        < = =></>
        < = =></>
 
< =<>)}</></>
</>)

2. Flerspråkig navigering: Gör det lättare för sökmotorer att upptäcka flerspråkiga webbadresser

illustrera

Språkväxlaren är frontend-renderad, så jag lade till back-end-renderad flerspråkig navigering längst ner på sidan, som är komponenten Footer.js. Om du klickar på motsvarande språk kommer du till hemsidans hemsida på detta språk.

Footer.js-koden är följande:

   
 ;


   (){


   (<>
    < =></>
    < =>
      < =>< = =  =></>< = = =></>)
        })} 
  </> 
      < =>
        <></>
      </>
     
    </>
  </>
    
  )
}

8. Sammanfattning

Internationell routing, struktur och introduktion av översättningsfiler och implementering av översättning. Oavsett vilken typ av internationaliseringsplan kommer dessa tre aspekter att vara inblandade. Även om det inte är besvärligt, är next-intl i allmänhet relativt enkelt.

9. Referens

En djupdykning i Next.js App Router Localization med next-intl

En komplett guide för att ställa in next-intl med App Router

关注我的微信公众号