next.js app目录 i18n国际化简单实现

最近在用next写一个多语言的项目，找了好久没找到简单实现的教程，实践起来感觉都比较复杂，最后终于是在官方文档找到了，结合网上找到的代码demo，终于实现了，在这里简单总结一下。

此教程适用于比较简单的项目实现，如果你是刚入门next，并且不想用太复杂的方式去实现一个多语言项目，那么这个教程就挺适合你的。

此教程适用于app目录的next项目。

先贴一下参阅的连接：

官方教程： next i18n 文档

可参阅的代码demo

实现思路

结合文件结构解说一下大致逻辑：

• i18n-config.ts只是一个全局管理多语言简写的枚举文件，其他文件可以引用这个文件，这样就不会出现不同文件对不上的情况。
• middleware.ts做了一层拦截，在用户访问localhost:3000的时候能通过请求头判断用户常用的语言，配合app目录多出来的[lang]目录，从而实现跳转到localhost:3000/zh这样。
• dictionaries文件夹下放各语言的json字段，通过字段的引用使页面呈现不同的语种。
  事实上每个页面的layout.tsx和page.tsx都会将语言作为参数传入，在对应的文件里，再调用get-dictionaries.ts文件里的方法就能读取到对应的json文件里的内容了。

大致思路是这样，下面贴对应的代码。

/i18n-config.ts

export const i18n = {
   
   
    defaultLocale: "en",
    // locales: ["en", "zh", "es", "hu", "pl"],
    locales: ["en", "zh"],
} as const;

export type Locale = (typeof i18n)["locales"][number];

/middleware.ts，需要先安装两个依赖，这两个依赖用于判断用户常用的语言：

npm install @formatjs/intl-localematcher
npm install negotiator

然后才是/middleware.ts的代码：

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

import {
   
    i18n } from "./i18n-config";

import {
   
    match as matchLocale } from "@formatjs/intl-localematcher";
import Negotiator from "negotiator";

function getLocale(request: NextRequest): string | undefined {
   
   
  // Negotiator expects plain object so we need to transform headers
  const negotiatorHeaders: Record<string, string> = {
   
   };
  request.headers.forEach((value, key) => (negotiatorHeaders[key] = value));

  // @ts-ignore locales are readonly
  const locales: string[]