Next.js 如何配置 rewrites？

推荐答案

在 Next.js 中，可以通过 next.config.js 文件来配置 rewrites。以下是一个简单的示例：

// www.javascriptcn.com code example
// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'https://api.example.com/:path*',
      },
      {
        source: '/blog/:slug',
        destination: '/posts/:slug',
      },
    ];
  },
};

在这个配置中：

• /api/:path* 会将所有以 /api/ 开头的请求重写到 https://api.example.com/:path*。
• /blog/:slug 会将 /blog/ 开头的请求重写到 /posts/:slug。

本题详细解读

1. 什么是 rewrites？

Rewrites 是 Next.js 提供的一种功能，允许你将传入的请求路径映射到不同的目标路径。这在处理 API 代理、路径别名或 URL 重写时非常有用。

2. 配置 rewrites 的步骤

1. 创建或修改 next.config.js 文件：在项目的根目录下找到或创建 next.config.js 文件。
2. 定义 rewrites 函数：在 next.config.js 中，导出一个包含 rewrites 函数的对象。
3. 编写重写规则：在 rewrites 函数中，返回一个包含重写规则的对象数组。每个规则对象包含 source 和 destination 属性。

3. 重写规则的属性

• source：指定要匹配的路径模式。可以使用动态路由参数（如 :path* 或 :slug）。
• destination：指定重写后的目标路径。可以是相对路径或绝对 URL。

4. 示例解析

• API 代理：/api/:path* 会将所有 /api/ 开头的请求重写到 https://api.example.com/:path*，这可以用于将前端请求代理到后端 API。
• 路径别名：/blog/:slug 会将 /blog/ 开头的请求重写到 /posts/:slug，这可以用于在不改变 URL 结构的情况下，将请求映射到不同的页面或 API 端点。

5. 注意事项

• 优先级：如果有多个重写规则，Next.js 会按照定义的顺序进行匹配，第一个匹配的规则将被应用。
• 动态路由：在 source 中使用动态路由参数时，确保 destination 中也正确使用这些参数。

通过这种方式，你可以灵活地控制 Next.js 应用中的 URL 重写行为，满足不同的业务需求。