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
Tech debt takes a moment to create, but years to pay off.
— Me, after time-traveling to tell myself

Why is internationalization so 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.

“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.

But fast forward a few months, and inevitably, I'd encounter an unforeseen problem that would force me to rethink my app's architecture.

So why is it so hard?

This question haunted me for so long that, one day, I decided to do something about it. I started building next-intl and spent the next 5 years talking to hundreds of developers who've faced the very same struggles.

And through all these conversations, I've discovered that the difficulty comes down to three core questions.

Assumptions

1What are we getting wrong?

Let's consider this snippet:

<h2>

  {t('Latest reviews for')} {productName}

</h2>

Do you see a problem with this?

While this might work for languages like English and Spanish, this approach will break if we localize to Japanese.

The reason for it is that we've assumed a grammatical structure for this label.

Properly translating the message to Japanese would require the product name to be put at the beginning of the sentence:

// ✅ Grammatically correct

<h2>{productName} の最新レビュー</h2>

While this is only one example, the underlying problem is: We too often assume that other languages—and cultures—work the same way as our own.

If we knew about these differences upfront, we could ensure that our apps are built to adapt gracefully right from the start.

Architecture

2Why can't we just copy what works?

If you ask 10 different people how they implement internationalization, you might get 10 different answers. Building a solid foundation is about understanding the tradeoffs and picking a strategy that fits your needs.

Some of the key questions to consider:

  • What routing strategy fits your use case?
  • Which aspects of your app need to be internationalized?
  • What's the relation to countries of your supported languages?
  • How do you handle country specifics like currencies?
  • How do time zones affect your app?

The truth is: What works for a small startup might not work for an enterprise. And what works for a content-heavy site might not work for a SaaS application.

Getting internationalization right isn't about copying your competitors' solution—it's about understanding the underlying principles and applying them systematically to your specific needs.

Ecosystem

3What's the full picture?

While next-intl is a great starting point, it's only part of the solution. Getting internationalization right takes an ecosystem that works together seamlessly.

Think about it, you need:

  1. Backend and CMS integration — to bring localization to your dynamic content
  2. SEO adjustments — to ensure discoverability of your multilingual content
  3. Design considerations — to improve the UX of your app for different cultures
  4. IDE tooling — for an efficient and streamlined developer experience
  5. Continuous localization — to keep your translations up to date
  6. Generative AI — to never wait for missing translations

… and all of this, integrated into your Next.js app with a codebase that's still a joy to work with three months from now.

What I've put together for you

Your fast track to internationalization

This course distills years of hard-won experience into clear, actionable insights for you to apply in your projects.

It contains:

  • 10 chapters with a total of 42 lessons and 5+ hours of tightly-edited video content in 4K

  • A purpose-built course experience, with code snippets and summaries for later reference

  • A real-world project, with full access to the source code on GitHub

  • Individually tagged commits with all lesson code changes

  • Full access to a CMS backend based on Sanity with a ready-to-deploy internationalization setup

We'll start with the fundamentals and dive deep into hands-on, code-driven explorations with a focus on conceptual understanding.

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

Platform screenshot
App screenshot
course-material-app
course-material-cms

Build international Next.js apps with confidence

Learn everything from the fundamentals to advanced patterns, to make internationalization your competitive advantage—starting today.

All chapters & code

Master the art of holistic internationalization, from the fundamentals to advanced patterns.

$249$199

$50 off for a limited time

Get instant access

Price shown in USD, excl. sales tax

  • All 10 chapters with a total of 42 lessons

  • 5+ hours of tightly-edited video content in 4K

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

  • Avoid expensive refactors

  • One-time payment, future updates included

  • 14-day money-back guarantee

  • Support the development of next-intl

The fundamentals

Learn the fundamentals of building international Next.js apps, from planning to implementation.

$159

Get instant access

Price shown in USD, excl. sales tax

  • The first 6 chapters with a total of 26 lessons

  • 3+ hours of tightly-edited video content in 4K

  • Lesson summaries and code snippets for later reference

  • One-time payment, future updates included

  • 14-day money-back guarantee

  • Support the development of next-intl

  • Full access to GitHub repos not included

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 from Austria.

Some facts about me:

  • Created next-intl and grew it to over 800,000 weekly downloads, making it the go-to solution for internationalization in modern Next.js apps
  • 10 years of experience building user-centric apps with React
  • Lecturer for React Enterprise Applications at university

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 great 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

      Discover different ways of linking messages to locales.

    • Locale switchers 9:04

      Learn what makes an ideal locale switcher and how to build it.

  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 effectively format numbers and currencies across locales.

    • 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

      Consistent formatting is key to a great localized experience.

    • Relative times 5:53

      Let's explore the runtime implications of 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

      Let's explore how to preserve locales during navigation.

    • Locale switchers 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.

You've got questions?

Here are the answers

Get access now