1

npx create-next-app@latest

1
2
3
4
5
6
7
8

❯ npx create-next-app@latest
✔ What is your project named? … `next-i18n-demo`
✔ Would you like to use TypeScript? … No / `Yes`
✔ Would you like to use ESLint? … No / `Yes`
✔ Would you like to use Tailwind CSS? … No / `Yes
✔ Would you like to use `src/` directory? … No / `Yes`
✔ Would you like to use App Router? (recommended) … No / `Yes`
✔ Would you like to customize the default import alias (@/*)? … `No` / Yes

1

npm run dev

1
2
3
4
5
6
7
8
9
10
11
12

├── package.json
├── public
│   ├── next.svg
│   └── vercel.svg
├── src
│   └── app
│       ├── favicon.ico
│       ├── globals.css
│       ├── layout.tsx
│       └── page.tsx
├── tailwind.config.ts
└── tsconfig.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14

├── package.json
├── postcss.config.mjs
├── public
│   ├── next.svg
│   └── vercel.svg
├── src
│   └── app
│       ├── [lang]
│       │   ├── layout.tsx
│       │   └── page.tsx
│       ├── favicon.ico
│       └── globals.css
├── tailwind.config.ts
└── tsconfig.json

1
2
3
4
5
6
7
8
9
10

{
  "page": {
    "title": "Next.js i18n Demo",
    "desc": "How to implement i18n with Next.js (based on App Router)"
  },
  "home": {
    "title": "Hello, Next.js i18n",
    "desc": "This is a demo of Next.js i18n"
  }
}

1
2
3
4
5
6
7
8
9
10

{
  "page": {
    "title": "Next.js i18n 示例",
    "desc": "搞懂 Next.js 实现 i18n 国际化多语言(基于App Router)"
  },
  "home": {
    "title": "你好, Next.js i18n",
    "desc": "这是一个 Next.js i18n 示例"
  }
}

1
2
3
4
5
6
7
8

import 'server-only'
 
const dictionaries = {
  en: () => import('./dictionaries/en.json').then((module) => module.default),
  zh: () => import('./dictionaries/zh.json').then((module) => module.default),
}
 
export const getDictionary = async (locale) => dictionaries[locale]()

1
2
3

export default async function Home({ params: { lang } }: { params: { lang: string } }) {
  ...
}

1

const t = await getDictionary(lang);

1
2
3
4
5
6

<main className="flex min-h-screen flex-col items-center justify-between p-24">
      <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
           {t.home.title}
      </p>
      {t.home.desc}
</main>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import { NextRequest, NextResponse } from "next/server";

let locales = ["en", "zh"];
let defaultLocale = "en";


function getLocale(request: NextRequest) {
  return defaultLocale;
}

export function middleware(request: NextRequest) {
  
  const { pathname } = request.nextUrl;
  const pathnameHasLocale = locales.some(
    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  );

  if (pathnameHasLocale) return;

  
  const locale = getLocale(request);
  request.nextUrl.pathname = `/${locale}${pathname}`;
  
  
  return NextResponse.redirect(request.nextUrl);
}

export const config = {
  matcher: [
    
    "/((?!_next).*)",
    
    
  ],
};

1
2
3
4

英文时：
accept-language: en-US,en;q=0.5
中文时：
accept-language: zh-CN,zh-Hans;q=0.9

1
2
3
4
5
6
7

function getLocale(request: NextRequest) {
  const acceptLang = request.headers.get("Accept-Language");
  if (!acceptLang) return defaultLocale;
  const headers = { "accept-language": acceptLang };
  const languages = new Negotiator({ headers }).languages();
  return match(languages, locales, defaultLocale);
}

1
2
3
4
5
6
7

if (request.cookies.has(cookieName)) {
  return request.cookies.get(cookieName)!.value;
}


response.cookies.set(cookieName, locale);

1
2
3
4
5
6
7

export async function generateMetadata({ params: { lang } } : { params: { lang: string } }) {
  const t = await getDictionary(lang);
  return {
    title: t.page.title,
    description: t.page.desc,
  };
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

interface LangParams {
  lang: string;
}

export async function generateStaticParams() {
  return [{ lang: "en" }, { lang: "zh" }];
}

export default function RootLayout({
  children,
  params,
}: Readonly<{
  children: React.ReactNode;
  params: LangParams;
}>) {
  return (
    <html lang={params.lang}>
      <body className={inter.className}>{children}</body>
    </html>
  );
}

1
2
3
4
5

<div className="space-x-2">
  <Link href="/en">English</Link>
  <span>|</span>
  <Link href="/zh">Chinese</Link>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

import Negotiator from "negotiator";
import { match } from "@formatjs/intl-localematcher";
import { NextRequest, NextResponse } from "next/server";

const locales = ["en", "zh"];
const defaultLocale = "zh";
const cookieName = "i18nlang";


function getLocale(request: NextRequest): string {
  
  if (request.cookies.has(cookieName))
    return request.cookies.get(cookieName)!.value;
  
  const acceptLang = request.headers.get("Accept-Language");
  if (!acceptLang) return defaultLocale;
  
  const headers = { "accept-language": acceptLang };
  const languages = new Negotiator({ headers }).languages();
  return match(languages, locales, defaultLocale);
}

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname.startsWith("/_next")) return NextResponse.next();

  
  const { pathname } = request.nextUrl;
  const pathnameHasLocale = locales.some(
    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  );

  if (pathnameHasLocale) return;

  
  const locale = getLocale(request);
  request.nextUrl.pathname = `/${locale}${pathname}`;
  
  
  const response = NextResponse.redirect(request.nextUrl);
  
  response.cookies.set(cookieName, locale);
  return response;
}

export const config = {
  matcher: [
    
    "/((?!_next).*)",
    
    
  ],
};