Next.js 国际化路由指南：使用 next-i18n-router

Next.js 国际化路由指南：使用 next-i18n-router

next-i18n-routerNext.js App Router internationalized routing and locale detection.项目地址:https://gitcode.com/gh_mirrors/ne/next-i18n-router

1. 项目目录结构及介绍

当您开始使用 next-i18n-router 时，您的项目应该遵循一定的目录结构来实现国际化功能。典型的目录结构如下：

├── app
│   └── [locale]
│       ├── layout.js          # 根据用户选择的语言切换布局
│       └── page.js             # 国际化的页面组件
├── i18nConfig.js               # 配置语言设置的核心文件
├── middleware.js                # 中间件逻辑，用于处理语言路由
└── package.json                # 项目依赖和脚本定义

• app/[locale]: 这是存放根据不同语言动态加载的页面和布局的地方。每个 [locale] 下都会有自己的 layout.js 和 page.js，支持不同的语言环境。
• i18nConfig.js: 包含所有国际化的基础配置如可用的语言(locales)和默认语言(defaultLocale)。
• middleware.js: 实现了基于 next-i18n-router 的中间件，负责路由重定向和语言识别。
• package.json: 确保包含项目所需的依赖项以及启动脚本。

2. 项目的启动文件介绍

在 next-i18n-router 的上下文中，“启动文件”主要指代通过 Next.js 的生命周期控制应用行为的入口点或配置文件。对于国际化的特定操作，重要的是配置和中间件的设置，而非传统意义上的单一“启动文件”。因此，重点在于两个文件：

• Next.js 应用入口（通常不需要修改，除非进行全局配置）
• middleware.js: 是关键的“启动”配置，它引入并配置 i18nRouter 来处理国际化的路由逻辑，确保应用可以根据用户的语言偏好重定向或服务正确的页面版本。

启动应用通常是通过 Next.js CLI，在命令行执行 npm run dev 或者根据你的构建工具配置的相应命令。

3. 项目的配置文件介绍

i18nConfig.js

这是一个核心配置文件，示例如下：

module.exports = {
  locales: ['en', 'de', 'ja'], // 支持的语言列表
  defaultLocale: 'en',         // 默认语言
};

这个文件定义了应用程序支持的所有语言以及默认显示的语言。配置中的这些设置对整个应用的国际化行为至关重要。

middleware.js

虽然不是传统意义上的配置文件，但通过其中的配置可以影响路由的国际化行为：

import { i18nRouter } from 'next-i18n-router';
import i18nConfig from './i18nConfig';

export function middleware(request) {
  return i18nRouter(request, i18nConfig);
}

// 配置匹配规则以应用中间件
export const config = {
  matcher: ['/((api|static| *\\ *|_next) *)'],
};

这里配置了如何应用国际化路由中间件，并指定了该中间件生效的路径范围。

通过以上三个关键部分的详细设定，您可以有效地实现一个具有多语言支持的Next.js应用。记得遵循项目文档和示例项目进行调整，以满足具体需求。

next-i18n-routerNext.js App Router internationalized routing and locale detection.项目地址:https://gitcode.com/gh_mirrors/ne/next-i18n-router