Kimkorng

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

03 JUN, 2024

[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 icon
    javascript
    module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'km'],
  },
};

  2. Update next.config.js:

    JavaScript icon
    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 icon
    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 icon
    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 icon
    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 icon
    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
SHARE