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:

tailwind typography

How to use the Tailwind Typography plugin

Walk you through how to set up and use the Tailwind Typography plugin, also known as the @tailwindcss/typography or the prose plugin.

David Omotayo
May 7, 2025 ⋅ 7 min read
Running TypeScript In Node.js: Tsx Vs. Ts-node Vs. Native

Running TypeScript in Node.js: tsx vs. ts-node vs. native

TypeScript adds static typing to JavaScript code, which helps reduce unpredictable behavior and bugs. In the past, TypeScript code couldn’t […]

Amazing Enyichi Agu
May 7, 2025 ⋅ 8 min read
Authentication And Authorization In Astro

Authentication and authorization in Astro

Implement secure authentication and role-based authorization in Astro using JWT, SSR, and Astro middleware for protected routes.

Emmanuel John
May 6, 2025 ⋅ 23 min read
How To Use Custom Fonts In Tailwind CSS

How to use custom fonts in Tailwind CSS

Walk through how to use Google Fonts and locally installed fonts in your Tailwind projects to help you improve your project typography and design consistency.

Peter Ekene Eze
May 6, 2025 ⋅ 11 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