2021-10-14
2741
#nextjs
Ivan Vlatkovic
71779
Oct 14, 2021 ⋅ 9 min read

The complete guide to internationalization in Next.js

Ivan Vlatkovic

Recent posts:

Fix over-caching with dynamic IO caching in Next.js 15

Next.js 15 caching overhaul: Fix overcaching with Dynamic IO and the use cache directive.

David Omotayo
Aug 6, 2025 ⋅ 10 min read
LLMs are facing a QA crisis here’s how we could solve it

LLMs are facing a QA crisis: Here’s how we could solve it

LLM QA isn’t just a tooling gap — it’s a fundamental shift in how we think about software reliability.

Rosario De Chiara
Aug 4, 2025 ⋅ 7 min read

Windsurf vs. Cursor: When to choose the challenger

Windsurf AI brings agentic coding and terminal control right into your IDE. We compare it to Cursor, explore its features, and build a real frontend project.

Chizaram Ken
Jul 31, 2025 ⋅ 9 min read

The CSS if() function: Conditional styling will never be the same

The CSS Working Group has approved the if() function for development, a feature that promises to bring true conditional styling directly to our stylesheets.

Ikeh Akinyemi
Jul 30, 2025 ⋅ 12 min read
View all posts

7 Replies to "The complete guide to internationalization in Next.js"

  1. Hi friend. It is a great article, With your tutorial I have set i18n in my next.js application with Lingui.js thanks.
    But I come with some issues that I resolve, may be it will help other if it happens.

    NB: I don’t use Typescript

    1
    – I get Module not found: Can’t resolve ‘fs’ when I add Lingui configurations and tools
    – to fix: configure .babelrc like this
    {
    “presets”: [“next/babel”],
    “plugins”: [“macros”]
    }

    2
    – In most Next.js application folder I think we don’t have “src” folder so the path where Lingui will look at translation can be an issue if they start with “src”, lingui extract will not return any data

    3
    – “npm run lingui extract” result as an issue because we don’t setup the script.
    – to fix: in script of package.json we can add :
    {
    “extract”: “lingui extract”,
    “compile”: “lingui compile”
    }

    4
    – In _app.js I remove “firstRender.current” because it blocks the rendering when I change the language in my menu.

    But again thank you I set translation in my app and may be I’ll add NEXT_LOCALE.
    Great article.

  2. Thanks, If you have any problems with the code you can file an issue on the github repo, and we can take it from there.

  3. Thank you for the writeup, wondering why you put the code for loading translations inside getStaticProps? This means you have the overhead of adding the same code to every page that relies on translated content. Wouldn’t offloading the message loading to _app also work, where you have access to the routers locale and can act accordingly?
    Cheers

  4. Hey, the locale works only If I visit the index root, but I load another url in my website, the locale doesnt work… the locale doesnt appear in my url. Do you know why?

  5. Hi Ivan, thank you for the great tutorial. I’m trying to migrate to App Router atm. Are you aware of any tutorial where the App Router is being used?

Leave a Reply