ดาวน์โหลด next i18next - ดาวน์โหลดซอร์สโค้ด next i18next

next i18next

ซอร์สโค้ดอื่น ๆ

v15.3.1

ดาวน์โหลด

ถัดไป-i18ถัดไป

วิธีที่ง่ายที่สุดในการแปลแอป Next.js ของคุณ (พร้อมการตั้งค่าหน้า)

หากคุณกำลังใช้ next-i18next (ไดเร็กทอรีเพจ) ในการผลิตและต้องการปลดปล่อยพลังพิเศษบางอย่าง คุณสามารถดูโพสต์บนบล็อกนี้ได้

หากคุณใช้ Next.js 13/14 กับไดเรกทอรีของแอป ไม่จำเป็นต้องมี next-i18next คุณสามารถใช้ i18next และ react-i18next ได้โดยตรง ตามที่อธิบายไว้ในโพสต์บล็อกนี้

นี่คืออะไร?

แม้ว่า Next.js จะมีการกำหนดเส้นทางที่เป็นสากลโดยตรง แต่ก็ไม่ได้จัดการการจัดการเนื้อหาการแปลหรือฟังก์ชันการแปลจริงแต่อย่างใด สิ่งที่ Next.js ทำคือรักษาสถานที่และ URL ของคุณให้ตรงกัน

เพื่อเติมเต็มสิ่งนี้ next-i18next มอบฟังก์ชันการทำงานที่เหลือ – การจัดการเนื้อหาการแปล และส่วนประกอบ/hooks เพื่อแปลส่วนประกอบ React ของคุณ – ในขณะที่รองรับ SSG/SSR, เนมสเปซหลายรายการ, การแยกโค้ด ฯลฯ อย่างสมบูรณ์

แม้ว่า next-i18next จะใช้ i18next และ react-i18next ภายใต้ประทุน ผู้ใช้ next-i18next จำเป็นต้องรวมเนื้อหาการแปลของตนเป็นไฟล์ JSON และไม่ต้องกังวลเรื่องอื่นอีก

มีการสาธิตสดที่นี่ แอปสาธิตนี้เป็นตัวอย่างง่ายๆ ไม่มีอะไรมากหรือน้อยไปกว่านั้น

ทำไมต้อง next-i18next?

ติดตั้งง่าย ใช้งานง่าย: การตั้งค่าใช้เวลาเพียงไม่กี่ขั้นตอน และการกำหนดค่าก็ง่ายดาย

ไม่มีข้อกำหนดอื่นๆ: next-i18next ลดความซับซ้อนของการทำให้เป็นสากลสำหรับแอป Next.js ของคุณโดยไม่ต้องพึ่งพาเพิ่มเติม

พร้อมการผลิต: next-i18next รองรับการส่งผ่านตัวเลือกการแปลและการกำหนดค่าไปยังเพจต่างๆ ในรูปแบบอุปกรณ์ประกอบฉากที่รองรับ SSG/SSR

มันทำงานอย่างไร?

ไฟล์ next-i18next.config.js ของคุณจะมีการกำหนดค่าสำหรับ next-i18next หลังจากการกำหนดค่า appWithTranslation ช่วยให้เราใช้ฟังก์ชัน t (แปล) ในส่วนประกอบของเราผ่านทาง hooks

จากนั้นเราจะเพิ่ม serverSideTranslation ให้กับ getStaticProps หรือ getServerSideProps (ขึ้นอยู่กับกรณีของคุณ) ในส่วนประกอบระดับเพจของเรา

ตอนนี้แอป Next.js ของเราสามารถแปลได้อย่างสมบูรณ์แล้ว!

ตั้งค่า

1. การติดตั้ง

yarn add next-i18next react-i18next i18next

คุณต้องมี react และติดตั้ง next ด้วย

2. เนื้อหาการแปล

ตามค่าเริ่มต้น next-i18next คาดว่าการแปลของคุณจะถูกจัดระเบียบดังนี้:

 .
└── public
    └── locales
        ├── en
        |   └── common.json
        └── de
            └── common.json

โครงสร้างนี้สามารถเห็นได้ในตัวอย่างง่ายๆ

หากคุณต้องการจัดโครงสร้างการแปล/เนมสเปซด้วยวิธีที่กำหนดเอง คุณจะต้องส่งค่า localePath และ localeStructure ที่แก้ไขแล้วไปยังการกำหนดค่าการเริ่มต้น

3. การตั้งค่าโครงการ

ขั้นแรก สร้างไฟล์ next-i18next.config.js ในรูทของโปรเจ็กต์ของคุณ ไวยากรณ์สำหรับวัตถุ i18n ที่ซ้อนกันมาจาก Next.js โดยตรง

สิ่งนี้จะบอก next-i18next ว่า defaultLocale ของคุณและสถานที่อื่นๆ คืออะไร เพื่อให้สามารถโหลดการแปลล่วงหน้าบนเซิร์ฟเวอร์ได้:

`next-i18next.config.js`

 /** @type {import('next-i18next').UserConfig} */
module . exports = {
  i18n : {
    defaultLocale : 'en' ,
    locales : [ 'en' , 'de' ] ,
  } ,
}

ตอนนี้ ให้สร้างหรือแก้ไขไฟล์ next.config.js ของคุณโดยส่งอ็อบเจ็กต์ i18n ไปยังไฟล์ next.config.js ของคุณ เพื่อเปิดใช้งานการกำหนดเส้นทาง URL ที่แปลเป็นภาษาท้องถิ่น:

`next.config.js`

 const { i18n } = require ( './next-i18next.config' )

module . exports = {
  i18n ,
}

มีฟังก์ชันสามรายการที่ next-i18next ส่งออก ซึ่งคุณจะต้องใช้เพื่อแปลโปรเจ็กต์ของคุณ:

แอพพร้อมการแปล

นี่คือ HOC ที่ล้อม _app ของคุณ :

 import { appWithTranslation } from 'next-i18next'

const MyApp = ( { Component , pageProps } ) => (
  < Component { ... pageProps } / >
)

export default appWithTranslation ( MyApp )

appWithTranslation HOC มีหน้าที่หลักในการเพิ่ม I18nextProvider

การแปลเซิร์ฟเวอร์ไซด์

นี่คือฟังก์ชันอะซิงก์ที่คุณต้องรวมไว้ในคอมโพเนนต์ระดับเพจของคุณผ่าน getStaticProps หรือ getServerSideProps (ขึ้นอยู่กับกรณีการใช้งานของคุณ):

 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'

export async function getStaticProps ( { locale } ) {
  return {
    props : {
      ... ( await serverSideTranslations ( locale , [
        'common' ,
        'footer' ,
      ] ) ) ,
      // Will be passed to the page component as props
    } ,
  }
}

โปรดทราบว่าจะต้องนำเข้า serverSideTranslations จาก next-i18next/serverSideTranslations ซึ่งเป็นโมดูลแยกต่างหากที่มีโค้ดเฉพาะของ NodeJs

นอกจากนี้ โปรดทราบว่า serverSideTranslations เข้ากันไม่ได้กับ getInitialProps เนื่องจากสามารถดำเนินการในสภาพแวดล้อมเซิร์ฟเวอร์ เท่านั้น ในขณะที่ getInitialProps จะถูกเรียกบนฝั่งไคลเอ็นต์เมื่อนำทางระหว่างเพจต่างๆ

serverSideTranslations HOC มีหน้าที่หลักในการส่งตัวเลือกการแปลและการกำหนดค่าไปยังเพจต่างๆ ในฐานะอุปกรณ์ประกอบฉาก คุณต้องเพิ่มตัวเลือกดังกล่าวลงในเพจใดๆ ที่มีการแปล

ใช้การแปล

นี่คือเบ็ดที่คุณใช้ในการแปลจริงๆ useTranslation hook มาจาก react-i18next แต่จำเป็นต้องนำเข้าจาก next-i18next โดยตรง
อย่าใช้การ useTranslation ส่งออกของ react-i18next แต่ใช้เฉพาะอันจาก next-i18next เท่านั้น!

 import { useTranslation } from 'next-i18next'

export const Footer = ( ) => {
  const { t } = useTranslation ( 'footer' )

  return (
    < footer >
      < p > { t ( 'description' ) } < / p >
    < / footer >
  )
}

4. ประกาศการพึ่งพาเนมสเปซ

ตามค่าเริ่มต้น next-i18next จะส่ง เนมสเปซทั้งหมดของคุณ ไปยังไคลเอนต์ในแต่ละคำขอเริ่มต้น นี่อาจเป็นแนวทางที่เหมาะสมสำหรับแอปขนาดเล็กที่มีเนื้อหาน้อย แต่แอปจำนวนมากจะได้รับประโยชน์จากการแบ่งเนมสเปซตามเส้นทาง

ในการทำเช่นนั้น คุณสามารถส่งอาร์เรย์ของเนมสเปซที่จำเป็นสำหรับแต่ละหน้าไปยัง serverSideTranslations คุณสามารถดูแนวทางนี้ได้ใน example/simple/pages/index.tsx การส่งผ่านเนมสเปซที่จำเป็นในอาร์เรย์ว่างจะไม่ส่งเนมสเปซใดๆ

หมายเหตุ: useTranslation จัดเตรียมเนมสเปซให้กับส่วนประกอบที่คุณใช้ อย่างไรก็ตาม serverSideTranslations จัดเตรียมเนมสเปซที่มีอยู่ทั้งหมดให้กับแผนผัง React ทั้งหมดและอยู่ในระดับเพจ จำเป็นต้องมีทั้งสองอย่าง

5. การประกาศการพึ่งพาสถานที่

ตามค่าเริ่มต้น next-i18next จะส่ง เฉพาะโลแคลที่ใช้งาน อยู่ไปยังไคลเอนต์ในแต่ละคำขอ ซึ่งจะช่วยลดขนาดของเพย์โหลดเริ่มต้นที่ส่งไปยังไคลเอนต์ อย่างไรก็ตาม ในบางกรณีอาจต้องมีการแปลสำหรับภาษาอื่นในขณะรันไทม์ด้วย ตัวอย่างเช่นเมื่อใช้ getFixedT ของ useTranslation hook

หากต้องการเปลี่ยนพฤติกรรมและโหลดสถานที่พิเศษ เพียงแค่ส่งอาร์เรย์ของสถานที่เป็นอาร์กิวเมนต์สุดท้ายไปยัง serverSideTranslations

  import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

  export async function getStaticProps({ locale }) {
    return {
      props: {
-       ...(await serverSideTranslations(locale, ['common', 'footer'])),
+       ...(await serverSideTranslations(locale, ['common', 'footer'], null, ['en', 'no'])),
      },
    };
  }

ด้วยเหตุนี้ คำแปลสำหรับทั้ง no และ en locales จะถูกโหลดเสมอโดยไม่คำนึงถึงภาษาปัจจุบัน

หมายเหตุ: ควรเพิ่มอาร์กิวเมนต์เพิ่มเติมในทุกหน้าที่ใช้ฟังก์ชัน getFixedT

สถานที่สำรอง

ตามค่าเริ่มต้น next-i18next จะเพิ่ม defaultLocale เป็นทางเลือก หากต้องการเปลี่ยนแปลง คุณสามารถตั้ง fallbackLng ได้ ค่าทั้งหมดที่รองรับโดย i18next ( string , array , object และ function ) ก็รองรับโดย next-i18next ด้วยเช่นกัน

นอกจากนี้ ยังสามารถตั้งค่า nonExplicitSupportedLngs เป็น true เพื่อรองรับภาษาทุกรูปแบบ โดยไม่จำเป็นต้องจัดเตรียมไฟล์ JSON สำหรับแต่ละภาษา โปรดสังเกตว่าตัวแปรทั้งหมดยังคงต้องรวมอยู่ใน locales เพื่อเปิดใช้งานการกำหนดเส้นทางภายใน next.js

หมายเหตุ: สามารถใช้ fallbackLng และ nonExplicitSupportedLngs ได้ในคราวเดียว มีข้อยกเว้นเพียงข้อเดียว: คุณไม่สามารถใช้ฟังก์ชันสำหรับ fallbackLng เมื่อ nonExplicitSupportedLngs เป็น true

 module . exports = {
  i18n : {
    defaultLocale : 'en' ,
    locales : [ 'en' , 'fr' , 'de-AT' , 'de-DE' , 'de-CH' ] ,
  } ,
  fallbackLng : {
    default : [ 'en' ] ,
    'de-CH' : [ 'fr' ] ,
  } ,
  nonExplicitSupportedLngs : true ,
  // de, fr and en will be loaded as fallback languages for de-CH
}

โปรดทราบว่าการใช้ fallbackLng และ nonExplicitSupportedLngs จะช่วยเพิ่มขนาดเริ่มต้นของเพจได้อย่างง่ายดาย

fyi: การตั้งค่า fallbackLng เป็น false จะไม่ทำให้ภาษาทางเลือกของคุณเป็นอนุกรม (โดยปกติจะ defaultLocale ) วิธีนี้จะลดขนาดของการโหลดหน้าแรกของคุณ

6. การกำหนดค่าขั้นสูง

ผ่านตัวเลือกการกำหนดค่าอื่นๆ

หากคุณต้องการแก้ไขตัวเลือกการกำหนดค่าขั้นสูงเพิ่มเติม คุณสามารถส่งต่อผ่าน next-i18next.config.js ได้ ตัวอย่างเช่น:

 module . exports = {
  i18n : {
    defaultLocale : 'en' ,
    locales : [ 'en' , 'de' ] ,
  } ,
  localePath :
    typeof window === 'undefined'
      ? require ( 'path' ) . resolve ( './my-custom/path' )
      : '/public/my-custom/path' ,
  ns : [ 'common' ] ,
}

การกำหนดค่าที่ไม่ต่อเนื่อง

ปลั๊กอิน i18next บางตัว (ซึ่งคุณสามารถส่งผ่านไปยัง config.use ) ไม่สามารถทำให้เป็นอนุกรมได้ เนื่องจากมีฟังก์ชันและ JavaScript พื้นฐานอื่น ๆ

คุณอาจประสบปัญหานี้หากกรณีการใช้งานของคุณมีความก้าวหน้ากว่านี้ คุณจะเห็น Next.js เกิดข้อผิดพลาดดังนี้:

 Error: Error serializing `._nextI18Next.userConfig.use[0].process` returned from `getStaticProps` in "/my-page".
Reason: `function` cannot be serialized as JSON. Please only return JSON serializable data types.

เพื่อแก้ไขปัญหานี้ คุณจะต้องตั้งค่า config.serializeConfig เป็น false และส่งการกำหนดค่าของคุณไปยัง appWithTranslation ด้วยตนเอง :

 import { appWithTranslation } from 'next-i18next'
import nextI18NextConfig from '../next-i18next.config.js'

const MyApp = ( { Component , pageProps } ) => (
  < Component { ... pageProps } / >
)

export default appWithTranslation ( MyApp , nextI18NextConfig )

 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'

import nextI18NextConfig from '../next-i18next.config.js'

export const getStaticProps = async ( { locale } ) => ( {
  props : {
    ... ( await serverSideTranslations (
      locale ,
      [ 'common' , 'footer' ] ,
      nextI18NextConfig
    ) ) ,
  } ,
} )

การใช้งานกับหน้า SSG ทางเลือก

เมื่อใช้บนเพจที่สร้างฝั่งเซิร์ฟเวอร์ด้วย getStaticPaths และ fallback: true หรือ fallback: 'blocking' การตั้งค่าเริ่มต้นที่ระบุไว้ข้างต้นจะทำให้แอปถูกยกเลิกการติดตั้งและต่อเชื่อมใหม่ในทุกการโหลด ทำให้เกิดผลเสียหลายประการ เช่น การเรียกใช้ทุก useEffect(() => {...}, []) ขอสองครั้งและลดประสิทธิภาพลงเล็กน้อย

นี่เป็นเพราะความจริงที่ว่า สำหรับเพจเหล่านั้น Next.js ทำการเรนเดอร์ครั้งแรกด้วย serverSideProps ที่ว่างเปล่า จากนั้นจึงเรนเดอร์ครั้งที่สองด้วย serverSideProps ที่มีการแปล next-i18next ด้วยการตั้งค่าเริ่มต้น อินสแตนซ์ i18n จะ undefined ในตอนแรกเมื่อ serverSideProps empty ทำให้เกิดการยกเลิกการต่อเชื่อมใหม่

เมื่อต้องการบรรเทาปัญหานี้ คุณสามารถทำสิ่งต่อไปนี้:

 import { UserConfig } from 'next-i18next' ;
import nextI18NextConfig from '../next-i18next.config.js'

const emptyInitialI18NextConfig : UserConfig = {
  i18n : {
    defaultLocale : nextI18NextConfig . i18n . defaultLocale ,
    locales : nextI18NextConfig . i18n . locales ,
  } ,
} ;

const MyApp = ( { Component , pageProps } ) => (
  < Component { ... pageProps } / >
)

export default appWithTranslation ( MyApp , emptyInitialI18NextConfig ) // Makes sure the initial i18n instance is not undefined

วิธีนี้จะได้ผลตราบใดที่คุณแน่ใจว่าในสถานะเพจสำรอง โค้ดฝั่งไคลเอ็นต์ของคุณไม่ได้พยายามแสดงการแปลใดๆ เนื่องจากไม่เช่นนั้น คุณจะได้รับข้อผิดพลาด "เซิร์ฟเวอร์-ไคลเอ็นต์ไม่ตรงกัน" จาก Next.js (เนื่องจาก ความจริงที่ว่าเซิร์ฟเวอร์มีการแปลจริงใน html ในขณะที่ html ไคลเอนต์มีคีย์การแปลอยู่ที่เดียวกัน)
นี่เป็นเรื่องปกติและเป็นเรื่องปกติ: คุณไม่ควรแสดงคีย์การแปลให้ผู้ใช้ของคุณดู!

การโหลดคำแปลฝั่งไคลเอ็นต์ผ่าน HTTP

ตั้งแต่ v11.0.0 next-i18next ยังให้การสนับสนุนการโหลดการแปลฝั่งไคลเอ็นต์อีกด้วย

ในบางกรณี คุณอาจต้องการโหลดไฟล์การแปลแบบไดนามิกโดยไม่ต้องใช้ serverSideTranslations สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับส่วนประกอบที่โหลดแบบ Lazy Load ที่คุณไม่ต้องการทำให้เพจช้าลง

ข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้สามารถพบได้ที่นี่

กำลังโหลดทรัพยากรในการพัฒนา

เนื่องจากมีการโหลดทรัพยากรหนึ่งครั้งเมื่อเซิร์ฟเวอร์เริ่มทำงาน การเปลี่ยนแปลงใดๆ ที่ทำกับไฟล์ JSON การแปลของคุณที่กำลังพัฒนาจะไม่ถูกโหลดจนกว่าเซิร์ฟเวอร์จะรีสตาร์ท

ในการใช้งานจริงสิ่งนี้ไม่มีแนวโน้มที่จะเป็นปัญหา แต่ในการพัฒนาคุณอาจต้องการดูการอัปเดตของไฟล์ JSON การแปลของคุณโดยไม่ต้องรีสตาร์ทเซิร์ฟเวอร์การพัฒนาในแต่ละครั้ง ในการดำเนินการนี้ ให้ตั้งค่าตัวเลือกการกำหนดค่า reloadOnPrerender เป็น true

ตัวเลือกนี้จะโหลดการแปลของคุณซ้ำทุกครั้งที่มีการเรียก serverSideTranslations (ใน getStaticProps หรือ getServerSideProps ) หากคุณใช้ serverSideTranslations ใน getServerSideProps ขอแนะนำให้ปิดใช้งาน reloadOnPrerender ในสภาพแวดล้อมการใช้งานจริงเพื่อหลีกเลี่ยงการโหลดทรัพยากรซ้ำในการเรียกเซิร์ฟเวอร์แต่ละครั้ง

ตัวเลือก

สำคัญ	ค่าเริ่มต้น	บันทึก
`defaultNS`	`'common'`
`localePath`	`'./public/locales'`	สามารถเป็นฟังก์ชันได้ ดูหมายเหตุด้านล่าง (อาจเป็นค่าว่างก็ได้ หากส่งตัวเลือกทรัพยากรโดยตรงผ่านการกำหนดค่า ดังตัวอย่างที่นี่)
`localeExtension`	`'json'`	ละเว้นถ้า `localePath` เป็นฟังก์ชัน
`localeStructure`	`'{{lng}}/{{ns}}'`	ละเว้นถ้า `localePath` เป็นฟังก์ชัน
`reloadOnPrerender`	`false`
`serializeConfig`	`true`
`use` (สำหรับปลั๊กอิน)	`[]`
`onPreInitI18next`	`undefined`	เช่น `(i18n) => i18n.on('failedLoading', handleFailedLoading)`

localePath เป็นฟังก์ชันที่อยู่ในรูปแบบ (locale: string, namespace: string, missing: boolean) => string ส่งคืนพาธทั้งหมดรวมทั้งชื่อไฟล์และนามสกุล เมื่อ missing เป็น true ให้ส่งคืนพาธสำหรับตัวเลือก addPath ของ i18next-fs-backend เมื่อเป็น false ให้ส่งคืนพาธสำหรับตัวเลือก loadPath ข้อมูลเพิ่มเติมที่ repo i18next-fs-backend
หาก localePath เป็นฟังก์ชัน ตรวจสอบให้แน่ใจว่าคุณกำหนดตัวเลือก ns ด้วย เนื่องจากเราไม่สามารถโหลดเนมสเปซล่วงหน้าในฝั่งเซิร์ฟเวอร์ได้

ตัวเลือก i18next อื่นๆ และตัวเลือก react-i18next อื่นๆ ทั้งหมดสามารถส่งผ่านเข้ามาได้เช่นกัน
คุณยังสามารถส่งผ่าน resources ได้โดยตรงร่วมกับการตั้งค่า localePath เป็น null

คำนำหน้า/คำต่อท้ายการแก้ไขแบบกำหนดเอง

ตามค่าเริ่มต้น i18next จะใช้ {{ เป็นคำนำหน้าและ }} เป็นส่วนต่อท้ายสำหรับการประมาณค่า หากคุณต้องการ/จำเป็นต้องแทนที่การตั้งค่าการแก้ไขเหล่านี้ คุณ ต้อง ระบุการตั้งค่า localeStructure อื่นที่ตรงกับคำนำหน้าและส่วนต่อท้ายที่คุณกำหนดเองด้วย

ตัวอย่างเช่น หากคุณต้องการใช้ { และ } การกำหนดค่าจะมีลักษณะดังนี้:

 {
  i18n : {
    defaultLocale : 'en' ,
    locales : [ 'en' , 'nl' ] ,
  } ,
  interpolation : {
    prefix : '{' ,
    suffix : '}' ,
  } ,
  localeStructure : '{lng}/{ns}' ,
}

เส้นทาง `next-i18next.config.js` แบบกำหนดเอง

หากคุณต้องการเปลี่ยนเส้นทางการกำหนดค่าเริ่มต้น คุณสามารถตั้งค่าตัวแปรสภาพแวดล้อม I18NEXT_DEFAULT_CONFIG_PATH ได้

ตัวอย่างเช่น ภายในไฟล์ .env คุณสามารถตั้งค่าเส้นทางแบบคงที่ได้:

 I18NEXT_DEFAULT_CONFIG_PATH=/path/to/project/apps/my-app/next-i18next.config.js

หรือคุณสามารถใช้เคล็ดลับสำหรับเส้นทางไดนามิกและตั้งค่าต่อไปนี้ภายใน next.config.js :

 process . env . I18NEXT_DEFAULT_CONFIG_PATH = ` ${ __dirname } /next-i18next.config.js` ;

// ... Some other imports

const { i18n } = require ( './next-i18next.config' ) ;

// ... Some other code

module . exports = {
  i18n ,
  ...
} ;

ซึ่งหมายความว่าไฟล์การกำหนดค่า i18n จะอยู่ในไดเร็กทอรีเดียวกันกับ next.config.js และไม่สำคัญว่าไดเร็กทอรีการทำงานปัจจุบันของคุณจะอยู่ที่ใด สิ่งนี้ช่วยได้เช่นสำหรับ nx เมื่อคุณมี monorepo และเริ่มต้นแอปพลิเคชันของคุณจากรูทโปรเจ็กต์ แต่แอปพลิเคชันอยู่ใน apps/{appName}

หมายเหตุ หากการกำหนดค่าของคุณ next-i18next.config.js ไม่ได้อยู่ในไดเร็กทอรีเดียวกันกับ next.config.js คุณต้องคัดลอกด้วยตนเอง (หรือด้วยสคริปต์ที่กำหนดเอง)

การเพิ่ม next-i18next ทีละน้อย

หากคุณกำลังวางแผนที่จะเพิ่ม next-i18next ให้กับโปรเจ็กต์ของคุณทีละน้อย เราขอแนะนำให้คุณส่ง next-i18next.config ไปยัง appWithTranslation เพื่อหลีกเลี่ยงปัญหาใดๆ

เช่น

 import nextI18nextConfig from '../../next-i18next.config' ;
//...
export default appWithTranslation ( MyApp , nextI18nextConfig ) ;

ดูปัญหา #2259 สำหรับข้อมูลเพิ่มเติม

หมายเหตุ

เวอร์เซล และ เน็ตลิฟาย

PaaS แบบไร้เซิร์ฟเวอร์บางตัวอาจไม่สามารถค้นหาเส้นทางการแปลของคุณได้ และจำเป็นต้องมีการกำหนดค่าเพิ่มเติม หากคุณมีปัญหาเกี่ยวกับระบบไฟล์โดยใช้ serverSideTranslations ให้ตั้งค่า config.localePath เพื่อใช้ path.resolve ตัวอย่างสามารถพบได้ที่นี่

นักเทียบท่า

สำหรับการปรับใช้ Docker โปรดทราบว่าหากคุณใช้ Dockerfile จากเอกสาร Next.js อย่าลืมคัดลอก next.config.js และ next-i18next.config.js ลงในอิมเมจ Docker

 COPY --from=builder /app/next.config.js ./next.config.js
COPY --from=builder /app/next-i18next.config.js ./next-i18next.config.js

แบ็กเอนด์ i18next แบบอะซิงโครนัส

หากคุณเลือกที่จะใช้แบ็กเอนด์ i18next ที่แตกต่างจากแบ็กเอนด์ i18next-fs-backend ในตัว คุณจะต้องแน่ใจว่าทรัพยากรการแปลถูกโหลดก่อนที่คุณจะเรียกใช้ฟังก์ชัน t เนื่องจาก React suspense ยังไม่รองรับ SSR จึงสามารถแก้ไขได้ 2 วิธี:

1) โหลดเนมสเปซล่วงหน้า:

ตั้งค่าตัวเลือก ns ดังตัวอย่างนี้ การทำเช่นนี้จะช่วยให้มั่นใจได้ว่าทรัพยากรการแปลทั้งหมดจะถูกโหลดเมื่อเริ่มต้น

2) ตรวจสอบธงพร้อม:

หากคุณไม่สามารถหรือไม่ต้องการระบุอาร์เรย์ ns การเรียกใช้ฟังก์ชัน t จะทำให้เนมสเปซโหลดได้ทันที ซึ่งหมายความว่าคุณจะต้องจัดการกับสถานะ "ไม่พร้อม" โดยทำเครื่องหมาย ready === true หรือ props.tReady === true การไม่ทำเช่นนั้นจะส่งผลให้การแปลของคุณก่อนที่จะโหลด ซึ่งจะทำให้การเรียก "บันทึกหายไป" แม้ว่าการแปลจะมีอยู่จริง (แต่ยังไม่ได้โหลด) ซึ่งสามารถทำได้โดยใช้ตะขอ useTranslation หรือ withTranslation HOC

SSG ส่งออก HTML แบบคงที่

คุณกำลังพยายามสร้างการส่งออก HTML แบบคงที่โดยดำเนินการ next export และได้รับข้อผิดพลาดนี้หรือไม่

ข้อผิดพลาด: การสนับสนุน i18n เข้ากันไม่ได้กับการส่งออกครั้งถัดไป ดูข้อมูลเพิ่มเติมเกี่ยวกับการปรับใช้ได้ที่นี่: https://nextjs.org/docs/deployment

แต่มีวิธีแก้ไขด้วยความช่วยเหลือของเครื่องตรวจจับภาษาถัดไป ลองอ่านโพสต์บนบล็อกนี้และโครงการตัวอย่างนี้

แปลในคอมโพเนนต์ย่อย

คุณมีหลายวิธีในการใช้ฟังก์ชัน t ในองค์ประกอบลูกของคุณ:

ส่งต่อฟังก์ชัน t ผ่านอุปกรณ์ประกอบฉากไปให้เด็กๆ
ส่งข้อความที่แปลผ่านอุปกรณ์ประกอบฉากไปยังเด็กๆ ดังในตัวอย่างนี้: https://github.com/i18next/next-i18next/blob/master/examples/simple/components/Header.tsx#L12
ใช้ฟังก์ชัน useTranslation ดังในตัวอย่างนี้:
next-i18next/examples/simple/components/Footer.tsx
บรรทัดที่ 6 ใน e6b5085
const { t } = useTranslation ( 'ส่วนท้าย' )
ใช้ฟังก์ชัน withTranslation

และโดยทั่วไป คุณต้องแน่ใจเสมอว่า serverSideTranslations มีเนมสเปซทั้งหมดที่คุณต้องการในแผนผัง

ผู้ร่วมให้ข้อมูล

ขอขอบคุณผู้คนที่แสนวิเศษเหล่านี้ (คีย์อีโมจิ):

_{ร็อบ คาเปลลินี}	_{อเล็กซานเดอร์ คาชเคฟ} - -	_{มาเธียส วอบเบ้} -	_{ลูคัส เฟลิเซียโน่} - -	_{ไรอัน เหลียง}	_{นาธาน ฟรีเมล} -	_{ไอแซค ฮินแมน} ? - - - - - - - - - - ?? - - - - - ? ? - - ? -
_{อาเดรียโน ไรอาโน} ? - - - - - - - - - - ?? - - - - - ? ? - - ? -	_{เฟลิกซ์ โมชีฟ} -	_{เซบาสเตียน วานเวลเทม} - -