Internationalization and Localization in Next.js Apps
Creating an internationalized website involves preparing it to adapt to various languages and regional differences without requiring engineering changes for each locale. This process is crucial for businesses aiming to reach a global audience. Next.js, a popular React framework, provides built-in support for both internationalization (i18n) and localization (l10n), simplifying the development of multi-language websites. In this LinkedIn article, we’ll explore how to implement i18n and l10n in Next.js apps, complete with coding examples.
Setting Up Internationalization in Next.js
First, you need to configure Next.js to enable internationalization. This is done in the next.config.js file. Here's how you can set it up to support English (default) and French:
// next.config.js
module.exports = {
i18n: {
// These are the locales you want to support
locales: ['en', 'fr'],
// This is the default locale you want to be used when visiting a non-locale prefixed path
defaultLocale: 'en',
},
}Creating Locale-Specific Files
Next, organize your translations. A common approach is to use JSON files for each locale. Create a folder named locales in your project and add JSON files for each language. For example, en.json and fr.json:
// locales/en.json
{
"greeting": "Hello!"
}
// locales/fr.json
{
"greeting": "Bonjour!"
}Fetching and Using Translations
To use these translations in your components, you’ll need a way to fetch them based on the current locale. Next.js recommends using the next-translate plugin or similar libraries for this purpose, but for simplicity, let's fetch them directly using Next.js's built-in getStaticProps or getServerSideProps functions.
Here’s an example component that uses getStaticProps to load the correct greeting:
// pages/index.js
import fs from 'fs';
import path from 'path';
export default function HomePage({ greeting }) {
return <h1>{greeting}</h1>;
}
export async function getStaticProps({ locale }) {
const filePath = path.join(process.cwd(), 'locales', `${locale}.json`);
const jsonData = fs.readFileSync(filePath);
const data = JSON.parse(jsonData);
return {
props: {
greeting: data.greeting,
},
};
}Switching Locales
Next.js automatically handles locale switching using the next/link component. You can switch locales by passing the locale prop:
// A component that switches between English and French
import Link from 'next/link';
export default function LanguageSwitcher() {
return (
<div>
<Link href="/" locale="en">
<a>English</a>
</Link>
<Link href="/" locale="fr">
<a>French</a>
</Link>
</div>
);
}Conclusion
Implementing internationalization and localization in Next.js apps is straightforward, thanks to the framework’s built-in support. By organizing your translations and leveraging Next.js’s routing capabilities, you can create a multi-language website that serves a global audience effectively. Remember, the key to a successful internationalization strategy is not just technical implementation but also ensuring your content is culturally and contextually appropriate for your target audience.
