Next.js Multilingual SSR: Localization Guide

Building a multilingual website with Next.js and server-side rendering (SSR) allows you to deliver localized content to a global audience. Here's how to get started:

Key Steps

1. Configure Locales

   • Add the i18n object with supported locales to next.config.js
   • Set the defaultLocale

2. Create Translation Files

   • Store translations in JSON files (e.g., en.json, fr.json)

3. Fetch Translations

   • Use getServerSideProps to fetch translations based on locale
   • Pass translations as props to your components

4. Implement Client-Side Language Switching

   • Use the useTranslation hook from next-i18next
   • Create a LanguageSwitcher component

5. Advanced Techniques

   • Use ICU Message Format for formatting
   • Support right-to-left (RTL) languages
   • Leverage localization tools and workflows

Best Practices

By following these steps and best practices, you can build a high-quality, localized Next.js app that delivers a seamless multilingual experience to your global users.

Related video from YouTube

Requirements for Next.js Localization

To set up a multilingual Next.js website using server-side rendering (SSR), you need to meet certain requirements. Ensure you have a good understanding of the following concepts and tools:

Familiarity with Next.js and Related Technologies

You should have a basic understanding of:

• Next.js and its features
• Server-side rendering (SSR) in Next.js
• JavaScript and React, as Next.js is built on top of these technologies
• The typical structure of a Next.js project, including the pages, components, and public directories

Internationalization (i18n) and Localization (L10n) Concepts

You should be familiar with:

By meeting these requirements, you'll be well-prepared to implement the recommendations in this guide and create a scalable and maintainable multilingual Next.js website using SSR.

Setting Up Next.js for Multiple Languages

To set up Next.js to support multiple languages, you need to configure locales in next.config.js and create JSON files with translations for each supported language. This section will guide you through the step-by-step process.

Configuring Locales in next.config.js

Add an i18n object with the list of supported locales to next.config.js. Here's an example:

/** @type {import('next').NextConfig} */const nextConfig = {  reactStrictMode: true,  i18n: {    locales: ["en", "fr", "es"],    defaultLocale: "en",  },};module.exports = nextConfig;

In this example, we're supporting three locales: English (en), French (fr), and Spanish (es). The defaultLocale is set to English.

Creating JSON Files with Translations

Create a JSON file for each supported locale in a directory named i18n in the root of your project. For example:

i18n/
en.json
fr.json
es.json

Each JSON file should contain key-value pairs for translations. Here's an example of what en.json might contain:

Similarly, fr.json might contain:

By following these steps, you've successfully set up Next.js to support multiple languages. In the next section, we'll explore how to implement SSR localization in Next.js.

Implementing SSR Localization in Next.js

To deliver localized content in Next.js applications, you can use server-side rendering (SSR) with getServerSideProps. This approach is particularly useful for multilingual websites with frequently updated content, as it ensures users always receive the latest translations without the need for client-side fetching or re-rendering.

Here's a step-by-step guide to implementing SSR localization in Next.js:

Create a Translation Utility

Create a utility function that fetches translations for a given locale. This function should read the corresponding JSON file and return the translations as an object.

import fs from 'fs'
import path from 'path'

export const getTranslations = (locale) => {
  const filePath = path.join(process.cwd(), `i18n/${locale}.json`)
  const fileContents = fs.readFileSync(filePath, 'utf8')
  return JSON.parse(fileContents)
}

Use getServerSideProps to Fetch Translations

In your page component, use the getServerSideProps function to fetch translations based on the user's locale and pass them as props to the component.

import { getTranslations } from '../utils/translations'

const HomePage = ({ translations }) => {
  // Use translations in your component
  return (
    <div>
      <h1>{translations.page.home.title}</h1>
      <p>{translations.page.home.description}</p>
    </div>
  )
}

export const getServerSideProps = async ({ locale }) => {
  const translations = getTranslations(locale)
  return {
    props: {
      translations
    }
  }
}

export default HomePage

Leverage SSR for Frequently Updated Content

While static site generation (SSG) is suitable for content that rarely changes, SSR is the preferred approach for multilingual websites with frequently updated content. By rendering the page on the server for each request, you ensure that users always receive the latest translations.

Optimize Performance with Caching

To optimize performance, consider implementing caching mechanisms for your translations. This can be achieved by caching the translation files on the server or using a content delivery network (CDN) to serve the translations from a global edge network.

By following these steps, you can effectively implement SSR localization in your Next.js application, providing a seamless and up-to-date multilingual experience for your users.

Client-Side Language Switching

Client-side language switching allows users to dynamically switch between languages without requiring a full page reload. In Next.js, you can implement client-side language switching using the useTranslation hook from the next-i18next library.

Using useTranslation Hook

The useTranslation hook provides a simple way to load translated content dynamically on the client-side. Here's an example:

import { useTranslation } from 'next-i18next';

function HomePage() {
  const { t, i18n } = useTranslation();

  return (
    <div>
      <h1>{t('home.title')}</h1>
      <p>{t('home.description')}</p>
      <button onClick={() => i18n.changeLanguage('fr')}>Switch to French</button>
    </div>
  );
}

In this example, the useTranslation hook is used to load the translated content for the home.title and home.description keys. The i18n.changeLanguage method is used to switch the language to French when the button is clicked.

Constructing a Language Switcher

To provide a seamless language switching experience, you can construct a language switcher component that allows users to select their preferred language. Here's an example:

import { useTranslation } from 'next-i18next';

function LanguageSwitcher() {
  const { i18n } = useTranslation();
  const languages = ['en', 'fr', 'es'];

  return (
    <div>
      {languages.map((lang) => (
        <button key={lang} onClick={() => i18n.changeLanguage(lang)}>
          {lang}
        </button>
      ))}
    </div>
  );
}

In this example, the LanguageSwitcher component renders a list of buttons for each supported language. When a button is clicked, the i18n.changeLanguage method is used to switch the language.

By implementing client-side language switching using the useTranslation hook and constructing a language switcher component, you can provide a seamless and dynamic multilingual experience for your users.

sbb-itb-5683811

Advanced Localization Techniques

When localizing a Next.js application for multiple languages, you may need to consider more than just translating text. Here are some advanced techniques to help you create a more robust and user-friendly multilingual experience:

Using ICU Message Format

ICU Message Format is a standard for formatting messages, dates, numbers, and plurals in a language-agnostic way. It allows you to create localized strings that can adapt to different languages and cultures. The next-i18next library supports ICU Message Format out of the box.

Right-to-Left (RTL) Language Support

For languages written from right to left, such as Arabic or Hebrew, you'll need to adjust your CSS styles and layout. Next.js provides a dir attribute that you can use to set the text direction on a per-component basis.

import { useTranslation } from 'next-i18next';

const { i18n } = useTranslation();
const isRTL = i18n.dir() === 'rtl';

return (
  <div dir={isRTL? 'rtl' : 'ltr'}>
    {/* Content */}
  </div>
);

Additionally, you may need to adjust your CSS styles to account for RTL layouts, such as reversing the order of elements or adjusting margins and paddings.

Localization Workflow and Tools

To streamline the localization process, consider using tools and workflows that make it easier to manage translations. Here are some options:

• Localization Management Platforms: Services like Lokalise, Crowdin, or Phrase can help you collaborate with translators, manage translation files, and automate the localization process.
• Pseudo-Localization: This technique involves replacing text with accented characters or other markers to ensure that your application can handle different character sets and string lengths.
• Automated Testing: Implement tests to ensure that your localized content is rendered correctly and that your application works as expected in different languages.

By incorporating these advanced techniques, you can create a more robust and user-friendly multilingual experience for your Next.js application.

Localization Workflow and Tools

To simplify the localization process for your Next.js application, it's essential to adopt the right tools and workflows. Here are some strategies to consider:

Continuous Localization Platforms

Centralize Translation Files

Use localization management platforms like Lokalise, Crowdin, or Phrase to centralize all your translation files in one place. These platforms allow you to:

• Collaborate with translators and manage translation workflows
• Automate the process of pushing and pulling translations
• Integrate with version control systems like Git
• Leverage features like machine translation, translation memory, and quality assurance checks

Version Control Integration

Track Changes and Collaborate

Integrate your localization workflow with a version control system like Git to:

• Track changes to translation files over time
• Collaborate with team members and translators
• Manage conflicts and merge translations
• Automate the deployment of updated translations

Automated Testing

Catch Issues Early

Implement automated tests to ensure that your localized content remains accurate and displays correctly across different languages. Some strategies for automated testing include:

• Unit tests for your translation functions and components
• End-to-end tests that simulate user interactions in different languages
• Visual regression testing to catch layout issues or rendering problems
• Pseudo-localization tests to ensure your application can handle different character sets and string lengths

By incorporating automated testing into your localization workflow, you can catch issues early and maintain a high-quality localized experience for your users.

Best Practices for Multilingual Next.js Apps

When building multilingual websites with Next.js and server-side rendering (SSR), it's essential to follow best practices to ensure a smooth and effective localization process. Here are some key strategies to optimize your multilingual Next.js app:

Separate Content from Code

Keep translatable content separate from your codebase to facilitate translation and maintenance. Use dedicated files or databases to store translations, making it easier for translators to work without modifying the application code.

Leverage Translation Management Systems

Use a translation management system (TMS) like Lokalise, Crowdin, or Phrase to centralize your translation files, collaborate with translators, and streamline the localization workflow.

Implement Automated Testing

Incorporate automated testing into your localization process to catch issues early and maintain a high-quality localized experience. Implement unit tests, end-to-end tests, and visual regression testing to detect layout or rendering problems.

Optimize for Performance

Server-side rendering (SSR) can improve the performance of your multilingual Next.js app. However, be mindful of the potential performance impact of loading translations and rendering content for multiple languages. Implement techniques like code-splitting, lazy loading, and caching to optimize performance.

Maintain Consistent Formatting

Ensure that your translations maintain consistent formatting across languages, including date and time formats, number formats, and currency representations.

Foster Collaboration and Communication

Establish clear communication channels and collaboration processes between developers, translators, and stakeholders involved in the localization process. Regular reviews, feedback loops, and version control integration can help maintain consistency and ensure that translations align with the intended messaging and branding.

By following these best practices, you can streamline the localization process, improve the quality of your translations, and deliver a seamless multilingual experience to your users.

Summary and Key Points

In this guide, we've covered the essential strategies and best practices for building high-quality, localized experiences for a global audience. Here's a recap of the key takeaways:

Best Practices for Multilingual Next.js Apps

By following these best practices, you can effectively reach a global audience, improve user engagement, and drive business growth.

FAQs

How to localize a Next.js app?

To localize a Next.js app, follow these steps:

1. Configure i18n in next.config.js

Add the i18n object with your supported locales and default locale.

2. Create locale files

Create a folder (e.g., locales) with JSON files containing your translated strings for each locale (e.g., en.json, fr.json).

3. Fetch translations

Use getStaticProps or getServerSideProps to fetch the appropriate translations based on the current locale.

4. Implement a Locale Switcher

Create a LocaleSwitcher component to allow users to change the locale, updating the NEXT_LOCALE cookie.

5. Use next/link with the locale prop

Use the next/link component with the locale prop to switch between locales.

By following these steps, you can serve content in multiple languages and provide a seamless user experience through server-side rendering and client-side language switching.

Related posts

• Next.js 14 Static Site Localization Tutorial
• NextJS Nested Routes: 5-Step Implementation Guide
• NextJS Module Federation Quickstart Guide
• Next.js Incremental Static Regeneration (ISR) Guide