Creating a Multi-Language Website with Next.js

“Next.js multi-language website localization tutorial — S3B Global”

Serving content in multiple languages increases reach, boosts engagement, and improves conversions for international audiences. Next.js is a strong choice because it combines fast server rendering, static generation, and built-in i18n routing  letting you deliver localized content with excellent SEO and performance.

High-level choices:- built-in i18n vs. i18n libraries

There are two layers to consider:

  1. Routing & locale negotiation (framework level): Next.js has native support for internationalized routing: you declare locales and defaultLocale in next.config.js and Next handles locale prefixes and locale detection. That solves route structure and domain/locale mapping out of the box.

  2. Message management & formatting (library level): For translating UI strings, formatting dates/numbers and handling pluralization, use a specialized library such as next-intl, next-i18next, or alternatives (react-intl, react-i18next, Intlayer). Each has tradeoffs: next-intl is lightweight and modern; next-i18next is feature-rich and mature. Choose based on project scale, TypeScript needs, SSR/SSG strategy, and developer familiarity.

Step-by-step: basic setup (App Router – current Next.js)

Below is a practical recipe using the App Router (Next.js 13+). Replace with Pages Router steps if your project uses it.

1. Configure Next.js i18n routing

Add locales in next.config.js:

// next.config.js
module.exports = {
i18n: {
locales: ['en', 'fr', 'es'], // add your locales
defaultLocale: 'en',
localeDetection: true // optional: auto-detect via Accept-Language
},
};

This instructs Next.js to serve localized routes like /fr/about. Built-in i18n also supports domain-level locales (e.g., example.fr → fr).

2. Choose and install your translations library

Two recommended options:

  • next-intl — minimal API, good App Router support, built-in formatters for dates/numbers. Install:

npm i next-intl

  • next-i18next — mature, feature rich, many plugins and community examples. Install:

npm i next-i18next react-i18next i18next

See library docs for App Router-specific setup (server vs client components).

3. Organize translation files

Common patterns:

  • Per-locale JSON folder: /locales/en/common.json, /locales/fr/common.json.

  • Per-component namespaces: break translations into smaller files (header.json, footer.json) to avoid huge monolithic JSON.

  • TypeScript safety: add a script or build-time checks to detect missing keys in critical languages for large projects. Tools like Intlayer or custom unit tests help at scale.

4. Provide translations to components

Example with next-intl (App Router pattern):

// app/[locale]/layout.jsx
import { NextIntlProvider } from 'next-intl';

export default async function LocaleLayout({ params, children }) {
const messages = (await import(`../../../locales/${params.locale}.json`)).default;
return <html lang={params.locale}>
<body>
<NextIntlProvider locale={params.locale} messages={messages}>
{children}
</NextIntlProvider>
</body>
</html>
}

With next-i18next the wiring differs (server-side config + HOC or hooks) — follow that library’s docs for pages vs App Router.

5. Build a language switcher and friendly links

Use Next.js <Link> options that respect locale, or call router.push with { locale: 'fr' }. Good libraries integrate with <Link /> so switching updates routes and keeps SEO-friendly paths (e.g., /fr/products). Test that links produce correct hreflang equivalents for search engines.

SEO & Accessibility – what to watch for

  • Use localized routes and hreflang tags. Next’s i18n routing helps manage canonical URLs per locale; still generate hreflang for alternate language pages to avoid duplicate-content issues. Tools and head metadata should include link alternates.

  • Localize metadata. Page titles and meta descriptions should be translated and included per localized page – Next.js supports per-locale metadata in App Router.

  • Avoid machine-only translations for UX. Human review (or high-quality MT + post-editing) improves conversion and reduces cultural mistakes. Use translation platforms (e.g., Lokalise, Transifex) when managing many locales.

Performance & caching

  • Static generation vs SSR: If content is mostly static, pre-generate localized pages (SSG) to maximize speed and cacheability. For dynamic, use ISR or server-side rendering with careful caching headers. Next.js supports hybrid models.

  • Split large translation bundles: Use per-page or per-component translation loading to avoid shipping huge JSON for all locales on every page. Many i18n libraries allow lazy-loading message files.

Workflow & translation management (recommended)

  • Source of truth: Keep English (or your primary language) as canonical keys, avoid using entire sentences as keys for maintainability.

  • Integration with TMS (translation management systems): Platforms like Lokalise or Transifex integrate with CI to push/pull translations and reduce manual errors.

  • Testing: Add unit tests or CI checks to detect missing keys and to ensure placeholders/plurals are present in all locales. For larger teams, automated checks prevent regressions.

Common pitfalls & how to avoid them

  • Pilling translations into one huge file: Use namespaces and lazy loading.

  • Mismatched plural/format rules: Use an i18n library that supports ICU message formatting (next-intl and next-i18next support ICU-like features).

  • Broken SEO due to missing hreflang or wrong canonical: Ensure every localized page has correct metadata.

Deployment checklist for S3B Global

  • Add i18n to next.config.js and verify domain or subpath routing works on Vercel (or your host).

  • Confirm localized metadata is generated (per-locale <head>).

  • Ensure translation files are included in build or available via CDN/TMS for dynamic loading.

  • Run accessibility and SEO audits (Lighthouse) for each locale.

  • Automate checks for missing translation keys in CI.

Quick example resources & starter links

  • Next.js official i18n docs (routing + App Router guidance). Next.js+1

  • next-intl docs — App Router examples & formatting. next-intl.dev

  • next-i18next guides & community tutorials (Pages/App differences). Medium+1

  • Articles comparing next-i18next vs next-intl and modern alternatives (Intlayer) to help choose for scale. Intlayer+1

  • Localization & translation workflow best practices (Lokalise / Transifex). transifex.com

Conclusion

Localization with Next.js is a high-value investment: it improves user experience and SEO. Start with Next.js’ built-in i18n routing, pick a translation library that matches your scale (next-intl for lightweight apps, next-i18next for feature needs), organize translations into small files and integrate a TMS for scalable workflows. Test per-locale SEO and performance, and automate checks to keep translations healthy as your app grows. S3B Global can use this architecture to deliver fast, SEO-friendly, culturally accurate websites to any market.

Sources

  1. Next.js = Internationalization (i18n) guide (routing & App Router). Next.js+1

  2. next-intl –  official docs and App Router examples. next-intl.dev

  3. Comparison: next-i18next vs next-intl vs Intlayer. Intlayer+1

  4. Phrase / blog – Next.js localization with next-intl (tutorial). Phrase

  5. Lokalise –  Guide to creating a multilingual website (workflow & TMS best practices). transifex.com

  6. Practical tutorials & community posts (Medium, Dev.to) about building multilingual Next.js apps and App Router examples. Medium+1

Tagged , , , , , , , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *