Next.js中如何配置URL重写并让<Link>组件适配固定链接结构？

1. 配置Next.js重写规则（next.config.js） #

在项目根目录的next.config.js中添加重写规则，将用户访问的/[prefix]/[dataSlug]/路径内部转发到/category/[prefix]/[dataSlug]/，同时保持浏览器地址栏URL不变：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/:prefix/:dataSlug/',
        destination: '/category/:prefix/:dataSlug/',
        // 若需支持不带末尾斜杠的路径，可修改为：source: '/:prefix/:dataSlug/?'
      },
    ];
  },
};

module.exports = nextConfig;

这条规则会优先匹配所有双slug格式的请求，内部跳转到category目录下的对应路由，用户看到的URL始终是简洁的domain.com/[prefix]/[dataSlug]/。

2. 调整页面目录结构 #

在app目录下创建目标路由的页面组件，确保重写后的路径能正确渲染内容：

app/
├── category/
│   ├── [prefix]/
│   │   ├── [dataSlug]/
│   │   │   └── page.js  // 编写页面逻辑，从params获取两个slug值
├── [slug]/  // 原根目录动态页面，不受重写规则影响
│   └── page.js

在app/category/[prefix]/[dataSlug]/page.js中，可通过params获取参数并实现业务逻辑：

export default function CategoryPage({ params }) {
  const { prefix, dataSlug } = params;
  // 用dataSlug拉取数据，prefix作为装饰符使用
  return (
    <div>
      <h1>前缀标签: {prefix}</h1>
      <p>内容标识: {dataSlug}</p>
    </div>
  );
}

3. 使用Link组件实现跳转 #

直接在Link组件中写入你想要展示的URL路径即可，Next.js会自动应用重写规则，内部跳转到对应的category页面，同时浏览器地址栏显示设定的简洁URL：

import Link from 'next/link';

// 示例变量，实际可根据业务动态传入
const prefix = 'tech';
const dataSlug = 'react-performance';

<Link href={`/${prefix}/${dataSlug}`}>
  查看React性能优化指南
</Link>

点击链接后，地址栏显示domain.com/tech/react-performance/，但实际渲染的是app/category/[prefix]/[dataSlug]/page.js的内容，完全符合需求。

额外注意事项 #

• 重写规则的匹配优先级按数组顺序排列，将双slug规则放在rewrites数组最前面，避免被根目录的[slug]页面规则拦截。
• 若需支持静态生成，在app/category/[prefix]/[dataSlug]/目录下添加generateStaticParams函数，生成对应路径的静态资源。

内容的提问来源于stack exchange，提问作者Milos N.