Next.js 学习笔记（三）——路由

路由

路由基础知识

每个应用程序的骨架都是路由。本页将向你介绍互联网路由的基本概念以及如何在 Next.js 中处理路由。

术语

首先，你将在整个文档中看到这些术语的使用情况。以下是一个快速参考：

• 树（Tree）：用于可视化层次结构的约定。例如：具有父组件和子组件的组件树、文件夹结构等
• 子树（Subtree）：树的一部分，从新的根开始（第一个），到叶子结束（最后一个）
• 根（Root）：树或子树中的第一个节点，例如：根布局（root layout）
• 叶（Leaf）：子树中没有子级的节点，例如：URL 路径中的最后一段

• URL 段：由斜杠分隔的 URL 路径的一部分
• URL 路径：位于域之后的 URL 的一部分（由段组成）

app 路由器

在版本 13 中，Next.js 引入了一个基于 React Server Components 的新 App Router，它支持共享布局、嵌套路由、加载状态、错误处理等。

App Router 在一个名为 app 的新目录中工作。app 目录与 pages 目录一起工作，以允许增量采用。这允许你将应用程序的某些路由选择为新行为，同时将其他路由保留在 pages 目录中以用于以前的行为。如果你的应用程序使用 pages 目录，请参阅 Pages Router 文档。

需要知道：App Router 优先于 Pages Router。跨目录的路由不应解析为相同的 URL 路径，这将导致生成时错误以防止冲突。

默认情况下，app 内部的组件是 React Server Components。这是一种性能优化，允许你轻松采用它们，还可以使用 Client Components。

建议：如果你才开始使用服务器组件，请查看 Server 页面。

文件夹和文件的角色

Next.js 使用基于文件系统的路由器，其中：

• 文件夹用于定义路由。路由是嵌套文件夹的单一路径，遵循文件系统层次结构，从根文件夹向下到包括 page.js 文件的最终叶文件夹。请参见Defining Routers。
• 文件用于创建为路由段显示的 UI。请参阅特殊文件。

路由段

路由中的每个文件夹都表示一个路由段。每个路由段都映射到 URL 路径中的相应段。

嵌套路由

若要创建嵌套路由，可以将文件夹嵌套在彼此内部。例如，你可以通过在 app 目录中嵌套两个新文件夹来添加新的 /dashboard/settings 路由。

dashboard/settings 路由由三个部分组成：

• /（根段）
• dashboard（段）
• settings（叶段）

文件约定

Next.js 提供了一组特殊的文件来创建嵌套路由中具有特定行为的 UI：

文件名	说明
layout	段及其子级的共享 UI
page	路由的唯一 UI，并使路由可公开访问
loading	Loading 段及其子级的 UI
not-found	Not found 段及其子级的 UI
error	段及其子级的错误 UI
global-error	全局错误 UI
route	服务器端 API 端点
template	专门的重新渲染布局 UI
default	并行路由的回退 UI

需要知道：.js、.jsx 或 .tsx 文件扩展名可以用于特殊文件。

组件层次结构

路由段的特殊文件中定义的 React 组件在特定层次中渲染：

• layout.js
• template.js
• error.js（React 错误边界）
• loading.js（React suspense 边界）
• not-found.js（React 错误边界）
• page.js 或嵌套 layout.js

在嵌套路由中，段的组件将嵌套在其父段的组件内。

合并

除了特殊文件外，你还可以选择将自己的文件（如：组件、样式、测试等）合并到 app 目录中的文件夹中。

这是因为当文件夹定义路由时，只有 page.js 或 route.js 返回的内容是可公开寻址的。

了解有关项目组织和托管的更多信息。

高级路由模式

App Router 还提供了一组约定，以帮助你实现更高级的路由模式。其中包括：

• 并行路由：允许你在同一视图中同时显示两个或多个可以独立导航的页面。你可以将它们用于具有自己的子导航的拆分视图。例如：Dashboards。
• 拦截路由：允许你拦截一条路由，并将其显示在另一条路由的上下文中。当保留当前页面的上下文很重要时，可以使用这些内容。例如：在编辑一个任务或在提要中展开照片时查看所有任务。

这些模式允许你构建更丰富、更复杂的 UI，使小团队和个人开发人员实现的历史上复杂的功能民主化。

定义路由

本页将指导你如何在 Next.js 应用程序中定义和组织路由。

创建路由

Next.js 使用基于文件系统的路由器，其中文件夹用于定义路由。

每个文件夹代表一个映射到 URL 段的路由段。若要创建嵌套路由，可以将文件夹嵌套在彼此内部。

一个特殊的 page.js 文件用于使路由段可以公开访问。

在本例中，/dashboard/analytics URL 路径不可公开访问，因为它没有相应的 page.js 文件。此文件夹可用于存储组件、样式表、图像或其他共有文件。

b：.js、.jsx 或 .tsx 文件扩展名可以用于特殊文件。

创建 UI

特殊的文件约定用于为每个路由段创建 UI。最常见的是显示路由唯一 UI 的页面，以及显示跨多个路由共享的 UI 的布局。

例如：要创建第一个页面，请在 app 目录中添加 page.js 文件，然后导出 React 组件：

// app/page.tsx

export default function Page() {
  return 
Hello, Next.js!
}

页面与布局

Next.js 13 中的 App Router 引入了新的文件约定，可以轻松创建页面、共享布局和模板。本页将指导你如何在 Next.js 应用程序中使用这些特殊文件。

页面

页面是路由唯一的 UI。你可以通过从 page.js 文件导出组件来定义页面。使用嵌套文件夹定义路由，并使用 page.js 文件使路由可以公开访问。

通过在 app 目录中添加 page.js 文件来创建您的第一个页面：

// app/page.tsx

// app/page.tsx 是 / 路径的 UI
export default function Page() {
  return 
Hello, Home page!
}

// app/dashboard/page.tsx

// app/dashboard/page.tsx 是 /dashboard 路径的 UI
export default function Page() {
  return 
Hello, Dashboard Page!
}

需要知道：

• 页面始终是路由子树的叶子
• 页面的文件类型应该为 .js、.jsx、.tsx
• 需要一个 page.js 文件才能公开一个路由段
• 默认情况下，页面是 Server Components，但可以设置为 Client Component
• 页面可以获取数据，请查看 Data Fetching 部分了解更多信息

布局

布局是在多个页面之间共享的 UI。在导航时，布局会保留状态，保持交互式，并且不会重新渲染。布局也可以嵌套。

你可以通过 default 导出从 layout.js 文件导出 React 组件来定义布局。组件应接收 children prop，该 prop 将在渲染过程中填充子布局（如果存在）或子页面。

// app/dashboard/layout.tsx

export default function DashboardLayout({
  children, // children 是一个页面或嵌套布局
}: {
  children: React.ReactNode
}) {
  return (
    

        {/* 在此处包括共享 UI，例如：header 或 sidebar */}
      

 
      {children}
    
  )
}

需要知道：

• 最顶层的布局叫做根布局，这个必需的布局被一个应用中的所有页面共享，根布局必须包含 html 和 body 标签
• 任何路由段可以定义它自己的布局，这些布局将会在该路由的所有页面中共享
• 默认情况下，一个路由中的布局可以被嵌套，每个父布局都使用 React 的 children prop 将子布局包裹在其下方
• 可以使用路由组（Route Groups）来选择特定的路由进和出共享布局
• 默认情况下，布局是服务器组件，但可以设置为客户端组件
• 布局可以获取数据，查看 Data Fetching 部分了解更多信息
• 无法在父、子布局之间传递数据，但是可以在一个路由中多次请求相同的数据，并且 React 会自动对请求进行重复数据删除，而不会影响性能
• 布局无法访问自身路径下的路由，为了访问所有的路由，可以在客户端组件中使用 useSelectedLayoutSegment 或者 useSelectedLayoutSegments
• 布局的文件类型应该为 .js、.jsx 或 .tsx
• 可以在同一个文件夹中定义 layout.js 和 page.js 文件，布局将会包裹页面

根布局（必需）

根布局在 app 目录的顶层定义，并应用于所有路由。此布局使你能够修改从服务器返回的初始 HTML。

// app/layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    
      {children}
    
  )
}

需要知道：

• 该 app 目录必须包含根布局
• 根布局必须定义 和 标签，因为 Next.js 不会自动创建它们
• 可以使用内置的 SEO 支持来管理 HTML 元素，例如： https://nextjs.org/docs The React Framework for the Web `) }

  片段配置项

  路由处理器使用与页面和布局相同的路由段配置。

  // app/items/route.ts
  
  export const dynamic = 'auto'
  export const dynamicParams = true
  export const revalidate = false
  export const fetchCache = 'auto'
  export const runtime = 'nodejs'
  export const preferredRegion = 'auto'
  

  有关更多详细信息，请参阅 API 参考资料。

  中间件

  中间件允许你在请求完成之前运行代码。然后，根据传入的请求，你可以通过重写、重定向、修改请求或响应头或直接响应来修改响应。

  中间件在缓存内容和路由匹配之前运行。有关详细信息，请参阅 Matching Paths。

  约定

  使用根目录中的 middleware.ts|js 文件来定义中间件。例如，在 pages 或 app 同级，或在 src 内部（如果适用的话）。

  例子

  // middleware.ts
  
  import { NextResponse } from 'next/server'
  import type { NextRequest } from 'next/server'
   
  // 内部如果使用 await，这个函数可以用 async 标记
  export function middleware(request: NextRequest) {
    return NextResponse.redirect(new URL('/home', request.url))
  }
  
  // 具体参考下方的“匹配路径”
  export const config = {
    matcher: '/about/:path*',
  }
  

  匹配路径

  中间件将为项目中的每条路由调用。以下是执行顺序：

  1. next.config.js 中的 headers
  2. next.config.js 中的 redirects
  3. 中间件（rewrites、redirects 等等）
  4. next.config.js 中的 beforeFiles(rewrites)
  5. 文件系统路由（public/、_next/static/、pages/、app/ 等等）
  6. next.config.js 中的 afterFiles(rewrites)
  7. 动态路由（/blog/[slug]）
  8. next.config.js 中的 fallback(rewrites)

  有两种方法可以定义中间件将在哪些路径上运行：

  1. 自定义匹配器配置
  2. 条件语句

  匹配器

  matcher 允许你过滤中间件以在特定路径上运行。

  // middleware.js
  
  export const config = {
    matcher: '/about/:path*',
  }
  

  你可以使用数组语法匹配单个路径或多个路径：

  // middleware.js
  
  export const config = {
    matcher: ['/about/:path*', '/dashboard/:path*'],
  }
  

  matcher 配置允许使用完整的 regex，因此支持像负前瞻性或字符匹配这样的匹配。此处可以看到一个负前瞻性示例，用于匹配除特定路径之外的所有路径：

  // middleware.js
  
  export const config = {
    matcher: [
      /*
       * Match all request paths except for the ones starting with:
       * - api (API routes)
       * - _next/static (static files)
       * - _next/image (image optimization files)
       * - favicon.ico (favicon file)
       */
      '/((?!api|_next/static|_next/image|favicon.ico).*)',
    ],
  }
  

  需要知道：matcher 值必须是常量，这样才能在构建时对其进行静态分析，动态值（如：变量）将被忽略

  配置的匹配器：

  1. 必须以 / 开头
  2. 可以包括命名参数：/about/:path 可以匹配 /about/a 和 /about/b，但不能匹配 /about/b/c
  3. 命名参数上可以有修饰符（以 : 开头）：/about/:path* 匹配 /about/a/b/c，因为 * 表示零或更多，? 表示零或一，+ 表示一或更多
  4. 可以使用括号中的正则表达式：/about/(.*) 与 /about/:path* 相同

  需要知道：为了相后兼容，Next.js 总是将 /public 视为 /public/index，因此，/public 会被 /public/:path 的匹配器匹配。

  条件语句

  // middleware.ts
  
  import { NextResponse } from 'next/server'
  import type { NextRequest } from 'next/server'
   
  export function middleware(request: NextRequest) {
    if (request.nextUrl.pathname.startsWith('/about')) {
      return NextResponse.rewrite(new URL('/about-2', request.url))
    }
   
    if (request.nextUrl.pathname.startsWith('/dashboard')) {
      return NextResponse.rewrite(new URL('/dashboard/user', request.url))
    }
  }
  

  NextResponse

  NextResponse API 允许你：

  • redirect 传入的请求到其他 URL
  • 通过显示给定的 URL rewrite 响应
  • 设置 API 路由，getServerSideProps 和 rewrite 目标的请求头
  • 设置响应 cookies
  • 设置响应 headers

  要从中间件生成响应，你可以：

  1. rewrite 到生成响应的路由（页面或路由处理器）。
  2. 直接返回 NextResponse。请参阅生成响应。

  使用 cookies

  Cookies 是常规头。在 Request 时，它们存储在 Cookie 头中。在 Response 时，它们存储在 Set-Cookie 头中。Next.js 提供了一种方便的方式来访问和操作这些 cookies，即通过 NextRequest 和 NextResponse 上的 cookies 扩展。

  1. 对于传入请求，cookies 具有以下方法：get、getAll、set 和 delete cookies，你可以使用 clear 检查是否存在 cookie，或者使用删除所有 cookie。
  2. 对于传出响应，cookies 具有以下方法：get、getAll、set 和 delete。

  // middleware.ts
  
  import { NextResponse } from 'next/server'
  import type { NextRequest } from 'next/server'
   
  export function middleware(request: NextRequest) {
    // 假设传入请求中存在 “Cookie:nextjs=fast” 头
    // 使用 `RequestCookies` API 从请求中获取 cookie
    let cookie = request.cookies.get('nextjs')
    console.log(cookie) // => { name: 'nextjs', value: 'fast', Path: '/' }
    const allCookies = request.cookies.getAll()
    console.log(allCookies) // => [{ name: 'nextjs', value: 'fast' }]
   
    request.cookies.has('nextjs') // => true
    request.cookies.delete('nextjs')
    request.cookies.has('nextjs') // => false
   
    // 使用 `ResponseCookies` API 在响应上设置 cookie
    const response = NextResponse.next()
    response.cookies.set('vercel', 'fast')
    response.cookies.set({
      name: 'vercel',
      value: 'fast',
      path: '/',
    })
    cookie = response.cookies.get('vercel')
    console.log(cookie) // => { name: 'vercel', value: 'fast', Path: '/' }
    // 传出的响应将具有一个`Set-Cookie:vercel=fast;path=/test` 头
   
    return response
  }
  

  设置头

  你可以使用 NextResponse API 设置请求和响应头（从 Next.js v13.0.0 开始提供设置请求头）。

  // middleware.ts
  
  import { NextResponse } from 'next/server'
  import type { NextRequest } from 'next/server'
   
  export function middleware(request: NextRequest) {
    // 克隆请求头并设置新请求头 `x-hello-from-midleware1`
    const requestHeaders = new Headers(request.headers)
    requestHeaders.set('x-hello-from-middleware1', 'hello')
   
    // 你也可以在 NextResponse.write 中设置请求头
    const response = NextResponse.next({
      request: {
        // 新的请求头
        headers: requestHeaders,
      },
    })
   
    // 设置新的响应头 `x-hello-from-midleware2`
    response.headers.set('x-hello-from-middleware2', 'hello')
    return response
  }
  

  需要知道：避免设置大量的头，因为这可能导致 431 Request Header Fields Too Large 错误，取决于后端 web 服务器配置

  产生响应

  你可以通过返回 Response 或 NextResponse 实例直接从中间件进行响应。（这从 Next.js v13.1.0 开始支持）

  // middleware.ts
  
  import { NextRequest } from 'next/server'
  import { isAuthenticated } from '@lib/auth'
   
  // 限制为路径以 `/api` 开头的中间件
  export const config = {
    matcher: '/api/:function*',
  }
   
  export function middleware(request: NextRequest) {
    // 调用我们的身份验证功能来检查请求
    if (!isAuthenticated(request)) {
      // 使用指示错误消息的 JSON 进行响应
      return Response.json(
        { success: false, message: 'authentication failed' },
        { status: 401 }
      )
    }
  }
  

  高级中间件标志

  在 Next.js v13.1 中为中间件引入了两个额外的标志：skipMiddlewareUrlNormalize 和 skipTrailingSlashRedirect ，以处理高级用例。

  skipTrailingSlashRedirect 允许禁用 Next.js 默认重定向以添加或删除尾部斜杠，从而允许在中间件内部进行自定义处理，这可以允许为某些路径维护尾部斜杠，但不允许为其他路径维护尾部斜线，从而更容易地进行增量迁移。

  // next.config.js
  
  module.exports = {
    skipTrailingSlashRedirect: true,
  }
  

  // middleware.js
  
  const legacyPrefixes = ['/docs', '/blog']
   
  export default async function middleware(req) {
    const { pathname } = req.nextUrl
   
    if (legacyPrefixes.some((prefix) => pathname.startsWith(prefix))) {
      return NextResponse.next()
    }
   
    // 应用尾部斜线处理
    if (
      !pathname.endsWith('/') &&
      !pathname.match(/((?!\.well-known(?:\/.*)?)(?:[^/]+\/)*[^/]+\.\w+)/)
    ) {
      req.nextUrl.pathname += '/'
      return NextResponse.redirect(req.nextUrl)
    }
  }
  

  skipMiddlewareUrlNormalize 允许禁用 URL 规范化 Next.js 所做的操作，以使处理直接访问和客户端转换相同。在一些高级情况下，你需要使用解锁的原始 URL 进行完全控制。

  // next.config.js
  
  module.exports = {
    skipMiddlewareUrlNormalize: true,
  }
  

  // middleware.js
  
  export default async function middleware(req) {
    const { pathname } = req.nextUrl
   
    // GET /_next/data/build-id/hello.json
   
    console.log(pathname)
    // 带有 this now/next/data/build-id/hello.json 标志
    // 如果没有标志，这将被规范化为 /hello
  }
  

  运行时

  中间件目前仅支持 Edge 运行时。Node.js 运行时无法使用。

  历史版本

  Version	Changes
  v13.1.0	添加高级中间件标志
  v13.0.0	中间件可以修改请求头、响应头和发送响应
  v12.2.0	中间件稳定，请参阅升级指南
  v12.0.9	在 Edge 运行时中强制执行绝对 URL（PR）
  v12.0.0	添加中间件（测试版）

  项目组织与文件托管

  除了路由文件夹和文件约定外，Next.js 对如何组织和并置项目文件没有任何偏见。

  此页面共享默认行为和特点，你可以用来组织你的项目

  • 默认情况下安全主机代管
  • 项目组织功能
  • 项目组织策略

  默认情况下安全主机代管

  在 app 目录中，嵌套文件夹层次结构定义了路由结构。

  每个文件夹表示映射到 URL 路径中相应段的路由段。

  然后，即使路由结构是通过文件夹定义的，在将 page.js 或 route.js 文件添加到路由段之前，路由是不可公开访问的。

  而且，即使路由被公开访问，也只有 page.js 或 route.js 返回的内容被发送到客户端。

  这意味着项目文件可以在 app 目录中的路由段安全地内置，而不会意外地变为可路由的。

  需要知道：

  • 这与 pages 目录不同，在 pages 目录中，页面中的任何文件都被视为路由。
  • 虽然你可以在 app 中对你的项目文件进行并置，但你不必这么做，如果你愿意，你可以将它们保存在 app 目录之外。

  项目组织特点

  Next.js 提供了几个功能来帮助你组织项目。

  私有文件夹

  可以通过在文件夹前加下划线来创建私有文件夹：_folderName。

  这表示文件夹是一个私有的实现细节，路由系统不应考虑它，从而选择跳出路由文件夹及其所有子文件夹。

  由于默认情况下 app 目录中的文件可以安全地进行主机代管，因此主机代管不需要私人文件夹。然而，它们可以用于：

  • 将 UI 逻辑从路由逻辑中分离
  • 在项目和 Next.js 生态系统中持续组织内部文件
  • 在代码编辑器中对文件进行排序和分组
  • 避免与未来的 Next.js 文件约定发生潜在的命名冲突

  需要知道：

  • 虽然不是框架约定，但您也可以考虑使用相同的下划线模式将私有文件夹外的文件标记为 “private”
  • 你可以创建以下划线开头的 URL 段，方法是在文件夹名称前加上 %5F（下划线的 URL 编码形式）：%5FolderName
  • 如果你不使用私有文件夹，了解 Next.js 的特殊文件约定会很有帮助，以防止意外的命名冲突

  路由组

  路由组可以通过讲文件夹括在括号中来创建：(folderNmae)。

  这表示文件夹用于组织目的，不因包含在路由的 URL 路径中。

  路由组可用于：

  • 将路由分组，例如，按位置、意图或团队
  • 在同一的路由段级别中启用嵌套布局
    • 在同一段创建多个嵌套布局，包括多个根布局
    • 将布局添加到公共段的子路由中

  src 目录

  Next.js 支持将应用程序代码（包括 app）存储在可选的 src 目录中。这将应用程序代码与项目配置文件分离，这些文件大多位于项目的根目录中。

  模块路径别名

  Next.js 支持模块路径别名，使其更容易读取和维护深度嵌套项目文件中的导入。

  // app/dashboard/settings/analytics/page.js
  
  // before
  import { Button } from '../../../components/button'
   
  // after
  import { Button } from '@/components/button'
  

  项目组织策略

  在 Next.js 项目中组织自己的文件和文件夹时，没有 “正确” 或 “错误” 的方法。

  下一节列出了共同战略的高级概述。最简单的做法是选择一种适合你和你的团队策略，并在整个项目中保持一致。

  需要知道：在下面的例子中，我们使用 components 和 lib 文件夹作为通用占位符，它们的命名没有特殊的框架意义，您的项目可能会使用其他文件夹，如 ui、utils、hooks、styles 等。

  将项目文件存储在 app 外

  此策略将所有应用程序代码存储在项目根目录中的共享文件夹中，并保留应用程序目录纯粹用于路由目的。

  将项目文件存储在 app 内部的顶级文件夹中

  此策略将所有应用程序代码存储在 app 目录的根目录的共享文件夹中。

  按特点或路由拆分项目文件

  此策略将全局共享的应用程序代码存储在根 app 目录中，并将更具体的应用程序编码拆分为使用它们的路由段。

  国际化

  Next.js 使你能够配置内容的路由和呈现，以支持多种语言。使你的网站适应不同的地区包括翻译内容（本地化）和国际化路由。

  专业术语

  • 区域设置：一组语言和格式首选项的标识符。这通常包括用户的首选语言以及可能的地理区域
    • en-US：美式英语
    • nl-NL：荷兰式荷兰语
    • nl：荷兰语

  路由概述

  建议在浏览器中使用用户的语言首选项来选择要使用的区域设置。更改你的首选语言将修改应用程序中传入的 Accept-Language 头。

  例如，使用以下库，你可以查看传入的 Request，根据 Headers、计划支持的区域设置和默认区域设置来确定要选择的区域设置。

  // middleware.js
  
  import { match } from '@formatjs/intl-localematcher'
  import Negotiator from 'negotiator'
   
  let headers = { 'accept-language': 'en-US,en;q=0.5' }
  let languages = new Negotiator({ headers }).languages()
  let locales = ['en-US', 'nl-NL', 'nl']
  let defaultLocale = 'en-US'
   
  match(languages, locales, defaultLocale) // -> 'en-US'
  

  路由可以通过子路径（/fr/productsa）或域（my-site.fr/products）实现国际化。有了这些信息，你现在可以根据中间件内部的区域设置重定向用户。

  // middleware.js
  
  let locales = ['en-US', 'nl-NL', 'nl']
   
  // 获取首选区域设置，类似于上面的内容或使用库
  function getLocale(request) { ... }
   
  export function middleware(request) {
    // 检查路径名中是否有任何支持的区域设置
    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}`
    // 例如：传入的请求是 /product
    // 新的 URL 现在是 /en-US/products
    return Response.redirect(request.nextUrl)
  }
   
  export const config = {
    matcher: [
      // Skip all internal paths (_next)
      '/((?!_next).*)',
      // Optional: only run on root (/) URL
      // '/'
    ],
  }
  

  最后，确保 app/ 中的所有特殊文件都嵌套在 app/[lang] 下。这使 Next.js 路由器能够动态处理路由中的不同区域设置，并将 lang 参数转发到每个布局和页面。例如：

  // app/[lang]/page.js
  
  // 你现在可以访问当前区域设置
  // 例如：/en-US/products -> `lang` is "en-US"
  export default async function Page({ params: { lang } }) {
    return ...
  }
  

  根布局也可以嵌套在新文件夹中（例如：app/[lang]/layout.js）。

  本地化

  根据用户的首选区域设置或本地化来更改显示的内容并不是 Next.js 特有的。下面描述的模式与任何 web 应用程序都一样。

  假设我们希望在应用程序中同时支持英语和荷兰语内容。我们可能会维护两个不同的 “字典”，它们是为我们提供从某个键到本地化字符串的映射的对象。例如：

  // dictionaries/en.json
  
  {
    "products": {
      "cart": "Add to Cart"
    }
  }
  

  // dictionaries/en.json
  
  {
    "products": {
      "cart": "Toevoegen aan Winkelwagen"
    }
  }
  

  然后，我们可以创建一个 getDictionary 函数来加载所请求区域设置的翻译：

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

  给定当前选择的语言，我们可以在布局或页面中获取字典。

  // app/[lang]/page.js
  
  import { getDictionary } from './dictionaries'
   
  export default async function Page({ params: { lang } }) {
    const dict = await getDictionary(lang) // en
    return <button>{dict.products.cart}</button> // Add to Cart
  }
  

  因为 app/ 目录中的所有布局和页面都默认为服务器组件，所以我们不需要担心翻译文件的大小会影响客户端 JavaScript 分包的大小。此代码将仅在服务器上运行，并且只有生成的 HTML 才会发送到浏览器。

  静态生成

  要为给定的一组区域设置生成静态路由，我们可以对任何页面或布局使用 generateStaticParams。这可以是全局的，例如，在根布局中：

  // app/[lang]/layout.js
  
  export async function generateStaticParams() {
    return [{ lang: 'en-US' }, { lang: 'de' }]
  }
   
  export default function Root({ children, params }) {
    return (
      <html lang={params.lang}>
        <body>{children}</body>
      </html>
    )
  }
  

  资源

  • Minimal i18n routing and translations
  • next-intl
  • next-international
  • next-i18n-router