Next.js App Router i18n with next-intl (practical setup)

Next.js App Router i18n with next-intl

This tutorial explains a clean i18n setup for the App Router using next-intl.

What you get

• /en and /fr locale prefixes
• Messages under messages/en.json and messages/fr.json
• A proxy (Next.js 16) to handle locale negotiation
• A great developer experience: strongly typed messages, clear structure, predictable routing

Recommended structure

• app/[locale]/... for localized routes
• messages/{locale}.json for strings
• i18n/request.ts for configuring next-intl

Common pitfalls

• Forgetting the proxy file (or using deprecated middleware)
• Not providing a default locale fallback
• Mixing server/client translations incorrectly

Practical advice

• Keep messages small and organized (group by feature: nav.*, contact.*, sections.*)
• Use a single Contact API endpoint and forward to providers (Formspree, email service, CRM)

If you want, we can add typed message keys and a lint rule to catch missing translations.

Quick commands

npm install
npm run dev