HomeCasa Prompts

Set up internationalization (i18n) in the Next.js App Router

Build a multilingual Next.js site with locale routes, language detection, server-side dictionaries, a language switcher, hreflang tags and regional date and price formatting. Designed for ChatGPT, Claude, Gemini and Microsoft Copilot. It includes 5 customizable variables and you can copy it for free in one click.

Advanced · Code · Pending editorial review

Designed for:

Prompt

Act as a senior Next.js developer with experience in multilingual sites and international SEO.

Context:
- Locales: {{locales}}
- Default locale: {{default_locale}}
- URL strategy: {{url_strategy}}
- Approach: {{approach}}
- Source of the copy: {{copy_source}}

Before writing code, confirm the Next.js version with me and whether there are existing routes that must keep working; if I do not know, state what you assume.

Deliverables:
1. A folder structure with the `[locale]` segment and how layouts, pages and metadata fit together.
2. The middleware file (or its equivalent in your version) that detects the locale from the user’s saved cookie and the Accept-Language header, and redirects according to {{url_strategy}} without loops.
3. Server-side dictionary loading with typed keys so TypeScript flags missing ones, plus a fallback to the default locale.
4. An accessible language switcher that keeps the current path and stores the preference.
5. SEO metadata: `lang` on the html element, canonical URL and hreflang alternates (including x-default) on every page, and generateStaticParams to prerender each locale.
6. Formatting of dates, numbers, currencies and plurals with Intl or with the utilities of {{approach}}.
7. A pre-launch checklist.

Constraints:
- Do not translate the real content: leave sample strings as [FILL IN] per locale.
- Do not redirect crawlers based on IP alone or hide content by country.
- Keep UI text out of components, in the dictionaries.

Output format: one code block per file with its path and a short note on each decision.

How to use it

  1. List the locales, the default one and whether every URL should carry a prefix. 2. Pick a library or your own dictionaries. 3. Create the files on a branch, test the redirects and validate hreflang with an SEO tool before launch.

Usage example

Locales: en, es, fr · Default: en · URL: prefix except for the default locale · Approach: next-intl · Copy: JSON files in the repo.

Sample output

Assumption: Next.js 15 and next-intl 4. Routes live in app/[locale]/layout.tsx and app/[locale]/page.tsx.

Routing, middleware and message loading

// src/i18n/routing.ts
import { defineRouting } from 'next-intl/routing';

export const routing = defineRouting({
  locales: ['en', 'es', 'fr'],
  defaultLocale: 'en',
  localePrefix: 'as-needed', // /about (en), /es/..., /fr/...
});

// src/middleware.ts
import createMiddleware from 'next-intl/middleware';
import { routing } from './i18n/routing';

export default createMiddleware(routing);
export const config = { matcher: ['/((?!api|_next|_vercel|.*\\..*).*)'] };

// src/i18n/request.ts
import { getRequestConfig } from 'next-intl/server';
import { hasLocale } from 'next-intl';
import { routing } from './routing';

export default getRequestConfig(async ({ requestLocale }) => {
  const requested = await requestLocale;
  const locale = hasLocale(routing.locales, requested) ? requested : routing.defaultLocale;
  return { locale, messages: (await import(`../../messages/${locale}.json`)).default };
});

The middleware checks the NEXT_LOCALE cookie first, then Accept-Language; with as-needed, English has no prefix and there are no redirect loops. Copy lives in messages/en.json, es.json and fr.json with [FILL IN] values…

Key facts

Category
Programming & development · Next.js
Output type
Code
Level
Advanced
Designed for
ChatGPT, Claude, Gemini and Microsoft Copilot
Verified in
Pending editorial verification
Variables
Locales, Default locale, URL strategy, Approach and Source of the copy
Language
English
Price
Free, no sign-up
Updated
Nov 7, 2026

Frequently asked questions

Is next-intl better than my own dictionaries?

With little copy and no complex plurals, your own dictionaries are enough. If you need plurals, ICU formatting, translations in client components and typed keys, a library like next-intl saves work.

Should I redirect automatically based on the browser language?

It is reasonable on the first visit, but always respect the user’s saved choice and keep every locale URL directly reachable. That way search engines can crawl all versions.

What does x-default do in hreflang?

It tells search engines which page to show when no locale matches the user, usually the default-locale page or a language picker.

What is this prompt for?

Build a multilingual Next.js site with locale routes, language detection, server-side dictionaries, a language switcher, hreflang tags and regional date and price formatting.

Which AI tools does it work with?

It is designed for ChatGPT, Claude, Gemini and Microsoft Copilot. We have not verified it in these tools yet, so results may vary between them.

How do I customize the prompt?

Click “Customize” and fill in the variables (Locales, Default locale, URL strategy, Approach and Source of the copy). The text updates instantly and you can then copy it in one click. Values are stored only in your browser.

Do I need experience to use it?

It is advanced: it is meant for people with experience in the topic who can evaluate and adjust the result.

Is this prompt free?

Yes. Every HomeCasa Prompts prompt is free, with no sign-up or subscription. You can also use them in professional projects.

Can I trust the AI output?

Treat it as a high-quality draft: always check data, figures and important claims before publishing or making decisions.

Related prompts