next-intlMembers

Build international Next.js apps with confidence

Master the art of holistic internationalization, from the fundamentals to advanced patterns, all through a real-world project.

Jan Amann

By Jan Amann

Author of next-intl

paradigm.com/us/apparel/storm-crest
App screenshot

services/products.ts

import {Locale} from 'next-intl';
import {createClient} from '@sanity/client';
import {routing} from '@/i18n/routing';
import Product from '@/models/Product';
export async function getProductById(id: string, opts?: {locale?: Locale}) {
const locale = opts?.locale ?? routing.defaultLocale;
const query = `*[_type == 'product' && _id == $id][0] {
name,
'imageUrl': image.asset->url,
description': coalesce(
description[_key == $locale][0].value,
description[_key == $defaultLocale][0].value
),
'price': price[currency == $currency][0],
}`;
return fetchContent<Product>(query, {
id,
locale,
defaultLocale: routing.defaultLocale,
currency: getCurrency(locale)
});
}
Video preview

“Can’t read, won’t buy”

This is the title of a report by CSA Research that analyzed online consumer behavior as part of a large-scale study spanning 29 countries.

The study comes to this conclusion:

  • 76% of online shoppers prefer purchasing products in their native language
  • 40% will never buy from websites that are not in their native language

While some companies have begun translating their content, many stop short of creating a truly localized experience that considers regional preferences and conventions.

It seems clear that businesses that don't offer a localized experience are missing out on significant opportunities—while those that do are already ahead of the curve.

So, why haven't more global companies properly embraced internationalization yet?

Internationalization is hard

If you're a developer who has already worked on the internationalization of an app, chances are you might nod along here. Maybe you were unsure about how to set it up, or you ran into a tough problem along the way.

I think so too, internationalization is indeed hard. At least, this always used to be the case for me.

“This time I'll get it right.”

That's what I told myself one too many times at the beginning of a project, always being optimistic that this time I'd know which challenges to anticipate.

Fast forward a few months, and inevitably, I'd encounter an unforeseen problem that would force me to rethink my app's architecture. "Not again," I thought to myself. "Can we make a compromise here, or do I have to start all over again?"

One last try

Ok, one final refactor. And—somehow—this time it seemed to work! So well, in fact, that I wanted to use the same approach again for my next project. And that's how, a few years ago, a new package found its way into the npm registry: next-intl.

While the intention of publishing the package was mostly to make my life easier for future projects, I got curious about whether other developers would share feedback, helping me to improve the package over time.

What I didn't expect, though, was that the project would seem to hit a nerve:

Weekly npm downloads of next-intl over time
Weekly npm downloads of next-intl over time

Ok, not gonna lie—this was quite a pleasant surprise.

The project entered a period of rapid growth, emerging as the go-to library for internationalization in modern Next.js apps.

I'm still in awe of all the positive feedback developers have shared with me:

We love next-intl. We've adopted it on the Node.js website along with Next.js' App Router. From all the i18n solutions out there for React and Next.js, so far the API and the design of next-intl has definitely become my favorite.
Claudio Wunder
Claudio Wunder
Cross Project Council at OpenJS Foundation

However, next-intl wasn't quite done yet.

Not a tool, but a tool-kit

The beauty of open source is that by putting your project out there, you get to learn about so many different use cases that people have. Aspects, that you might never have considered yourself.

In the case of internationalization, I've learned that there's no one-size-fits-all solution. So what I did was to ensure that next-intl provides a set of lightweight APIs that can be composed to fit your individual needs.

However, people came up with questions about how to use these:

  • “Which parts of my codebase need to be internationalized?”
  • “What is the right routing strategy for my site?”
  • “How can I optimize my development workflow?”
  • “How can I optimize my site for search engines?”
  • “How should my backend handle internationalization?”
  • “How can I improve the UX of my app for different cultures?”
  • “How do I integrate with external content from a backend or CMS?”
  • “How can I use generative AI for localization?”

Through countless conversations that started with questions like these, I was able to gain a deep understanding of the challenges developers face. And what I found is that the building blocks of next-intl can be composed with other tools in the ecosystem to handle even the most complex scenarios.

Yet, one thing was missing: A guide, helping developers to put the pieces together to fit their individual needs.

Your fast track to internationalization

So here we are.

This course distills years of hard-won experience into clear, actionable insights about internationalization. You'll develop a rock-solid foundation, mastering everything from core concepts to advanced patterns—way beyond replacing a few hardcoded text labels.

I've created this course because it's the resource I wish I had when I started working on internationalization.

Whether you're taking your first steps or carry battle scars from previous attempts, you'll quickly learn proven strategies to tackle internationalization challenges with confidence in any project. You'll build apps that are a joy to develop and deliver exceptional user experiences across languages and cultures.

This time we'll get it right. For good.

All chapters & code

Learn how to build engaging, multilingual experiences with confidence.

$250

Get instant access

Price shown in USD, excl. sales tax

  • All 10 chapters with a total of 42 lessons

  • 5+ hours of video content in 4K

  • All the source code to use in your apps (private repos for project app & CMS)

  • Save weeks of trial & error

  • One-time payment, future updates included

  • 14-day money-back guarantee

  • Support the development of next-intl

What you'll learn

  • Architect internationalized apps with care & foresight
  • Deeply understand all pieces that contribute to a truly localized experience
  • Work with translations in depth
  • Get the UX right: Resilient layouts, culture & country specifics, right-to-left languages & more
  • Integrate with external backend services and a CMS
  • Max out your developer experience with TypeScript and IDE tooling
  • Use generative AI to improve your workflow and for content localization
  • Collaborate with your team using a translation management system
  • Master SEO for multilingual apps to reach global audiences

And most importantly: Stay happy with internationalization past the honeymoon phase of your project and live happily ever after.

Raphaël Badia
Raphaël Badia
Head of Engineering
Billiv
It's a massive time-saver —

… not just for learning next-intl, but for understanding the bigger picture of i18n. I've been using next-intl since version zero, and I still had a wow effect in almost every video of the course.

Highly recommended for anyone working on multi-lingual (or multi-regional 😉) apps!

Video preview

Hi, I‘m Jan!

I‘m an independent developer, open source maintainer, and university teacher with more than 10 years of experience building user-centric apps with React.

I grew up in a small town in Austria, right at the crossing of Switzerland and Germany. Crossing borders was always daily routine for me and coincidentally, I ended up building a project that helps developers to do the same.

I‘m incredibly excited to share everything I‘ve learned about internationalization with you in this course, to help you build apps that reach users across the globe with confidence.

Signature

What you'll learn

Everything you need to build international apps with Next.js

  1. 01

    Introduction

    Let's get familiar with the app that we'll be working on.

    • Welcome 1:45Preview

      Let's set the stage for your journey into internationalization.

    • Project setup 3:12Preview

      Get familiar with the project we'll be working on.

  2. 02

    Planning

    The first step to internationalization is to carefully plan ahead.

    • Terminology & locales 6:14

      Understand the core essentials to discuss internationalization.

    • What to internationalize? 5:52

      Identify which aspects contribute to a localized experience.

    • Routing strategies 9:28

      Learn about different routing strategies and their use cases.

  3. 03

    Translations

    Let's take a deep dive on how to replace hardcoded strings with dynamic translations.

    • First translations 6:26Preview

      Let's set up next-intl and our first translations.

    • Server & Client Components 5:44Preview

      Learn how to use translations both on the server as well as the client side.

    • Organizing keys 6:35

      Discover best practices for organizing message keys.

    • Reusing messages 7:50

      Learn how, and more importantly, when to reuse messages.

    • Editor tools 6:41

      Streamline your workflow with a VS Code integration and TypeScript.

    • ICU messages 13:39

      Create flexible messages with ICU syntax to handle plurals and more.

    • Extracting literals 7:20

      Find and convert hardcoded strings using ESLint and AI agents.

  4. 04

    Adding locales

    Once we have translations in place, we can start localizing our app to new languages.

    • Providing messages 5:26

      With the message extraction done, let's add messages for new locales.

    • Locale switcher 9:04

      Now that we support multiple locales, we need a way to switch between them.

  5. 05

    Dates, times & numbers

    Learn how to format dates, times, and more—according to the user's locale.

    • Number formatting 10:28

      Learn how to format numbers and currencies.

    • Dates & time zones 13:05

      How can we reliably work with dates and time zones in JavaScript?

    • Date formatting 5:45

      Learn how to format dates and times while handling time zones.

    • Global formats 8:25

      Ensure consistent formatting across your app.

    • Relative times 5:53

      Display human-readable relative times like "2 days ago".

  6. 06

    Routing

    Let's set up locale-based routing to create unique URLs for each language.

    • Locale-based routing 13:13

      Learn how to set up routing with a top-level locale segment.

    • Navigation APIs 7:36

      After setting up locale-based routing, we should preserve locales during navigation.

    • Locale switcher part 2 5:00

      Learn how to change the locale with navigation APIs.

    • Domain-based routing 8:37

      Manage domains in coordination with locales.

    • Prefix-based routing 7:50

      Let's switch to a custom, prefix-based routing strategy.

    • Localized pathnames 9:15

      Pathnames are an important part of your UI, let's localize them too.

    • Locale cookie regulations 6:39

      Understand legal and privacy considerations when using locale cookies.

  7. 07

    Backend content

    in cooperation with Sanity

    Integrate external content from a backend, headless CMS or Markdown files into your app.

    • Overview 7:32

      Learn about different approaches to localizing external content and their use cases.

    • Document-level localization 14:43

      Work with locale-specific entities and pages, like our testimonials and stories.

    • CMS-driven URLs 10:37

      Let's incorporate localized slugs from our CMS into our routing structure.

    • Field-level localization 10:41

      Resolve localized fields like product descriptions and more.

    • User-generated content 6:39

      Allow users to translate content like product reviews into their language.

    • Markdown 2:35

      Use MDX files to provide localized content for static pages.

  8. 08

    Search engine optimization

    Optimize your app for search engines to improve discoverability.

    • Declaring content language 4:45Preview

      Use HTML attributes to help search engines understand your multilingual content.

    • Geotargeting 6:22

      Help search engines understand which countries you're targeting.

    • hreflang & canonicals 10:39

      Learn about their use cases and how to use them effectively.

    • Sitemaps 8:43

      Create a sitemap that helps search engines discover your localized content.

  9. 09

    Design for localization

    Let's explore UI design patterns that help you to create experiences that work across all languages.

    • Resilient layouts 6:33

      Create layouts that adapt seamlessly to any language.

    • Right-to-left layouts 12:01

      Learn how to adapt your layouts for languages that read from right to left.

    • Forms 9:51

      Let's question our assumptions on forms, from filling in names to addresses.

    • Regional specifics 5:46

      Explore real-world examples that illustrate cultural and regional differences.

  10. 10

    Continuous localization

    in cooperation with Crowdin

    Learn how to automatically translate your app with a translation management system.

    • AI translations with Crowdin 7:13

      Use AI-powered translations to efficiently localize your app.

    • CI/CD workflow with Crowdin 9:04

      Integrate Crowdin with your CI/CD pipeline to keep translations up to date.

Made for learning

A purpose-built course experience

  • 10 chapters with a total of 42 lessons

  • 5+ hours of video content in 4K

  • English subtitles for all videos

  • Recap sections for your later reference

  • Real-world project with no oversimplified examples

  • Tagged commits with lesson code changes

  • Access to a private repo for the app

  • Access to a private repo for the CMS

  • Optimized for both mobile and desktop

Platform screenshot

You've got questions?

Here are the answers

Get access now