ReactJS

How to Implement SSR & CSR in Next.js for Multilingual Websites

Introduction

Next.js allows us to quickly support multi language with simple configurations and code. In this blog, we'll walk you through the process of creating a multilingual website using Next.js, covering setup, routing, translations and best practices.

Why Choose Next.js for Multilingual Websites?

Next.js provides a number of features that make it the perfect choice for multilingual website development:

Internationalized Routing: Native support for localized routing.
Static Site Generation (SSG): Pre rendered pages for improved performance and SEO.
Dynamic Import: Load only the required translations for a specific locale efficiently.
Rich Ecosystem: Easy implementation with popular libraries such as i18next and next-i18next.
Flexibility: Provide (SSR,CSR) options for dynamic content

Setting Up a Multilingual Next.js Project

Step 1: Initialize the Project

npx create-next-app multilingual-sitecd multilingual-site

Step 2: Configure Internationalized Routing

Next.js simplifies multilingual routing with its i18n configuration. Open the next.config.js file and add the following:

module.exports = { i18n: { locales: ['en', 'fr', 'es'], // Supported languages defaultLocale: 'en', // Default language },};

This configuration enables localized routes such as /fr and /es for French and Spanish, respectively.

Step 3: Install Translation Libraries

npm install next-i18next react-i18next i18next

Step 4: Set Up the Translation Files

Create a public/locales directory and add subfolders for each language. Inside each folder, create a common.json file for shared translations. For example:

Structure:

public/ locales/ en/ common.json fr/ common.json es/ common.json

Example common.json (English):

{ "welcome": "Welcome to our website!", "description": "This is a multilingual site."}

Step 5: Initialize next-i18next

Create a file named i18n.js in the root of your project:

import i18n from 'i18next';import { initReactI18next } from 'react-i18next';import Backend from 'i18next-http-backend';import LanguageDetector from 'i18next-browser-languagedetector';i18n .use(Backend) .use(LanguageDetector) .use(initReactI18next) .init({ fallbackLng: 'en', lng: 'en', interpolation: { escapeValue: false, // React already escapes by default }, backend: { loadPath: '/locales/{{lng}}/{{ns}}.json', }, });export default i18n;

Step 6: Wrap Your App with the Translation Provider

Modify the pages/_app.js file to include the translation provider:

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

Step 7: Use Translations in Components

To use translations in your components, import the useTranslation hook:

import { useTranslation } from 'react-i18next';export default function Home() { const { t } = useTranslation('common'); return ( <div> <h1>{t('welcome')}</h1> <p>{t('description')}</p> </div> );}

Step 8: Add a Language Switcher

Create a simple language switcher component to allow users to change languages:

import { useRouter } from 'next/router';export default function LanguageSwitcher() { const router = useRouter(); const { locales, locale, pathname } = router; const switchLanguage = (lang) => { router.push(pathname, pathname, { locale: lang }); }; return ( <div> {locales.map((lang) => ( <button key={lang} onClick={() => switchLanguage(lang)} style={{ fontWeight: lang === locale ? 'bold' : 'normal' }} > {lang} </button> ))} </div> );}

Step 5: Initialize next-i18next

It is easy and effective to build a multilingual website with Next.js due to its internationalization capabilities built in and direct integration with translation libraries. If you follow the above steps and use best practices, you can build a friendly, accessible to the world website that serves international audiences.

Ready to transform your business with our technology solutions? Contact Us today to Leverage Our ReactJS Expertise.