next_i18next.md

next-i18next

Setup

• files changed

• install package

  yarn add next-i18next
  

• setup next-i18next.config.js

  module.exports = {
      i18n: {
          defaultLocale: 'en',
          locales: ['en', 'zh', 'zh-tw'], // folders in ./public/locales
      },
      interpolation: {
          escapeValue: false,
      },
      lowerCaseLng: true, //support zh-tw
  };

• setup next.config.js

  const { i18n } = require('./next-i18next.config');
  
  const nextConfig = {
          i18n,
          reactStrictMode: true,
      }
  
  module.exports = nextConfig;

• add language files

  .
  └── public
      └── locales
          ├── en
          |   └── common.json
          └── zh
          |   └── common.json
          └── zh-tw
              └── common.json
  

  common.json

  {
      "title":"i18n 中文(zh-tw)"
  }

• load languages from server side on your page

  import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
  
  export async function getStaticProps({ locale }) {
      return {
          props: {
          ...(await serverSideTranslations(locale, ['common'])),  
          // namespace "common" from common.json in ./public/locales/{language}/{namespace}.json format
          // Will be passed to the page component as props
          },
      };
  }

• apply translation to pages/_app.js

  import { appWithTranslation } from 'next-i18next';
  
  function MyApp({ Component, pageProps }) {
      return <Component {...pageProps} />;
  }
  
  export default appWithTranslation(MyApp);

Testing

• add page demo-next-i18next.js and visit http://localhost:3000/demo-next-i18next

  import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
  
  import { useRef, useEffect, useState } from 'react'
  import { useTranslation } from 'next-i18next'
  import { useRouter } from 'next/router';
  
  export default function LanguageSwitch() {
      const select = useRef(null);
      const router = useRouter();
      const { t } = useTranslation('common');
  
      useEffect(() => {
          const activeLanguage = router?.locales?.find((el) => el === router.locale);
          select.current.value = activeLanguage;
      }, []);
  
      const handleChange = () => {
          // window.location.href = `/${select.current.value}${router.asPath}`;
          const tag = select.current.value;
          const { asPath } = router;
          router.push(asPath, asPath, { locale: tag });
      };
  
      return (
          <>
              <p>{t('title')}</p>
  
              <select onChange={handleChange} ref={select}>
                  {router?.locales?.map((language, index) => (
                      <option key={index} value={language}>
                          {language}
                      </option>
                  ))}
              </select>
          </>
      );
  };
  
  export async function getStaticProps({ locale }) {
      return {
          props: {
              ...(await serverSideTranslations(locale, ['common'])),
              // namespace "common" from common.json in ./public/locales/{language}/{namespace}.json format
              // Will be passed to the page component as props
          },
      };
  }