Step-by-Step Guide to Using i18next for Next.js

[read] i18next is an internationalization-framework written in and for JavaScript. But it's much more than that i18next goes beyond just providing the standard i18n features such as (plurals, context, interpolation, format). It provides you with a complete solution to localize your product from web to mobile and desktop.

Setting Up the Project

1. Start by creating a new Next.js project if you don't have one already.

   shell
   npx create-next-app nexti18n-app
   cd nexti18n-app

2. Install i18next react-i18next and next-i18next for Next.js integration.

   shell
   npm install i18next react-i18next next-i18next

Project Structure

Your project structure should look something like this:

plaintext
my-next-i18n-app/
├── pages/
│   ├── index.js
│   └── _app.js
├── public/
│   └── locales/
│       ├── en/
│       │   └── common.json
│       └── km/
│           └── common.json
├── next.config.js
└── next-i18next.config.js

Configuring next-i18next

1. Create the next-i18next.config.js File in root directory:

   javascript
   module.exports = {
     i18n: {
       defaultLocale: 'en',
       locales: ['en', 'km'],
     },
   };

2. Update next.config.js:

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

Setting Up Translations

Create translation files for each language in public/locales/en and public/locales/km:

json
// public/locales/en/common.json
{
  "welcome": "Welcome to our website",
  "description": "This is an example of i18next with Next.js."
}

json
// public/locales/km/common.json
{
  "welcome": "សូមស្វាគមន៍មកកាន់គេហទំព័ររបស់យើង",
  "description": "នេះគឺជាឧទាហរណ៍នៃ i18next និង Next.js"
}

Using i18next in Your Next.js App

1. Modify _app.js to Initialize i18next:

   javascript
   // pages/_app.js
   import '../styles/globals.css';
   import { appWithTranslation } from 'next-i18next';
   function MyApp({ Component, pageProps }) {
     return <Component {...pageProps} />;
   }
   export default appWithTranslation(MyApp);

2. Translate Content in index.js:

   javascript
   // pages/index.js
   import { useTranslation } from 'next-i18next';
   import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
   export default function Home() {
     const { t } = useTranslation('common');
     return (
       <div>
         <h1>{t('welcome')}</h1>
         <p>{t('description')}</p>
       </div>
     );
   }
   export async function getStaticProps({ locale }) {
     return {
       props: {
         ...(await serverSideTranslations(locale, ['common'])),
       },
     };
   }

Switching Language Dynamically

To allow users to change the language dynamically, follow these steps:

1. Create a Language Switcher Component:

   javascript
   import { useRouter } from 'next/router';
   export default function LanguageSwitcher() {
     const router = useRouter();
     const { locale } = router;
     const changeLanguage = (newLocale) => {
       router.push(router.pathname, router.asPath, { locale: newLocale });
     };
     return (
       <div>
         <button onClick={() => changeLanguage('en')}>English</button>
         <button onClick={() => changeLanguage('km')}>Khmer</button>
       </div>
     );
   }

2. Use the Language Switcher in Your Page:

   javascript
   // pages/index.js
   import { useTranslation } from 'next-i18next';
   import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
   import LanguageSwitcher from '../components/LanguageSwitcher';
   export default function Home() {
     const { t } = useTranslation('common');
     return (
       <div>
         <LanguageSwitcher />
         <h1>{t('welcome')}</h1>
         <p>{t('description')}</p>
       </div>
     );
   }
   export async function getStaticProps({ locale }) {
     return {
       props: {
         ...(await serverSideTranslations(locale, ['common'])),
       },
     };
   }

Running the Project

Start your development server to see your multilingual site in action:

shell
npm run dev