Search for a command to run...
Expand Your Reach by Creating Multilingual Applications with Next.js
Our company comprises seasoned professionals, each an expert in their field. Customer satisfaction is our top priority, exceeding clients' needs. We ensure competitive pricing and quality in web and mobile development without compromise.
partage très utile, merci pour le partage
Très utile
A modern community for developers to learn, share, and grow together.
Discover the most practical AI tools that save time, boost productivity, and actually work.
Unlock Productivity, Creativity, and Growth Using These Free AI Tools in 2025
"A Developer’s Guide to the Best Payment Processors for Modern Web Apps"
Protect your privacy, secure your data, and browse with peace of mind.
In today's globalized world, offering your application in multiple languages can significantly broaden your audience. Next.js provides robust support for internationalization (i18n), enabling you to create multilingual apps seamlessly. This blog will guide you through the process of adding internationalization to your Next.js application.
Internationalization allows your application to be easily adapted to various languages and regions without requiring significant changes to the codebase. It enhances user experience, increases accessibility, and can potentially boost your app's reach and engagement.
Next.js has built-in support for internationalized routing, making it straightforward to manage multiple languages. Let's walk through the steps to set up internationalization in a Next.js app.
First, you need to update your next.config.js file to specify the locales your application will support.
// next.config.js
module.exports = {
i18n: {
locales: ['en', 'fr', 'es'],
defaultLocale: 'en',
},
};
locales: An array of supported locales.
defaultLocale: The default locale for the application.
Create a folder structure for storing your locale-specific content. A common approach is to use JSON files to store translations.
/locales
/en
common.json
/fr
common.json
/es
common.json
Example common.json for English:
{
"greeting": "Hello",
"welcome": "Welcome to our application"
}
Example common.json for French:
{
"greeting": "Bonjour",
"welcome": "Bienvenue dans notre application"
}
You need a translation library to load and manage your translations. next-translate is a popular choice for Next.js applications.
Install next-translate:
npm install next-translate
Create a i18n.js configuration file in the root of your project:
// i18n.js
module.exports = {
locales: ['en', 'fr', 'es'],
defaultLocale: 'en',
pages: {
'*': ['common'],
},
};
To use translations in your components, you can use the useTranslation hook provided by next-translate.
Example component:
// components/Greeting.js
import useTranslation from 'next-translate/useTranslation';
const Greeting = () => {
const { t } = useTranslation('common');
return <h1>{t('greeting')}</h1>;
};
export default Greeting;
Use the Greeting component in your pages:
// pages/index.js
import Greeting from '../components/Greeting';
const Home = () => {
return (
<div>
<Greeting />
</div>
);
};
export default Home;
To allow users to switch between languages, you can create a simple language switcher component.
Example LanguageSwitcher component:
// components/LanguageSwitcher.js
import { useRouter } from 'next/router';
const LanguageSwitcher = () => {
const router = useRouter();
const { locale, locales } = router;
const handleChangeLanguage = (e) => {
const newLocale = e.target.value;
const path = router.asPath;
router.push(path, path, { locale: newLocale });
};
return (
<select value={locale} onChange={handleChangeLanguage}>
{locales.map((loc) => (
<option key={loc} value={loc}>
{loc}
</option>
))}
</select>
);
};
export default LanguageSwitcher;
Use the LanguageSwitcher component in your pages:
// pages/index.js
import Greeting from '../components/Greeting';
import LanguageSwitcher from '../components/LanguageSwitcher';
const Home = () => {
return (
<div>
<LanguageSwitcher />
<Greeting />
</div>
);
};
export default Home;
To improve SEO for your multilingual site, ensure each language version of your pages is correctly indexed by search engines. Use the next/head component to set the hreflang attributes.
Example:
import Head from 'next/head';
import { useRouter } from 'next/router';
const Home = () => {
const { locales, asPath } = useRouter();
const siteUrl = 'https://www.yourwebsite.com';
return (
<>
<Head>
{locales.map((locale) => (
<link
key={locale}
rel="alternate"
hrefLang={locale}
href={`${siteUrl}/${locale}${asPath}`}
/>
))}
</Head>
<div>
<LanguageSwitcher />
<Greeting />
</div>
</>
);
};
export default Home;
next-translate, you can easily manage multiple languages and optimize your app for global users. Follow these steps to set up internationalization in your Next.js app, and enjoy the benefits of a multilingual application.Explore the official Next.js internationalization documentation for more details and advanced configurations.
Happy coding!