Next.js中使用Link组件传参时如何去除URL中的?及后续内容？

我当前使用Next.js的Link组件传递数据的代码如下：

<div>
        {data.map((myData) => (
          <h2>
            <Link
            href={{
              pathname: `/${myData.title}`,
              query: {
                id: myData.id
              }
            }}>
            <a>{myData.title}</a>
            </Link>
          </h2>
        ))}
</div>

生成的URL是 http://localhost:3000/this-is-a-title?id=630f3c32c1，我希望去掉URL中的?及其后续内容，优化SEO表现，请问有其他实现方式吗？

当然有，核心是用动态路由替代查询参数，让URL更语义化，具体实现步骤如下：

1. 创建动态路由页面 #

在Next.js的pages目录下创建动态路由文件，比如pages/[slug].js（这里用slug指代处理后的标题，避免原标题包含特殊字符、空格等不符合URL规范的内容）。

2. 把标题转换成合法Slug #

先写一个简单的slug转换函数，将标题处理成符合URL规则的格式：

const generateSlug = (title) => {
  return title
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/^-+|-+$/g, '');
};

然后修改Link组件的渲染逻辑，用处理后的slug作为路径：

<div>
  {data.map((myData) => {
    const slug = generateSlug(myData.title);
    return (
      <h2 key={myData.id}>
        <Link href={`/${slug}`}>
          <a>{myData.title}</a>
        </Link>
      </h2>
    );
  })}
</div>

3. 在动态页面中匹配对应数据 #

在pages/[slug].js中，根据slug获取对应的数据，这里分两种场景：

静态生成（适合内容固定的场景） #

使用Next.js的getStaticPaths和getStaticProps预渲染页面：

// pages/[slug].js
export async function getStaticPaths() {
  // 获取所有数据源数据，生成对应的slug路径
  const data = await fetch('你的数据源地址');
  const posts = await data.json();

  const paths = posts.map((post) => ({
    params: { slug: generateSlug(post.title) },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  // 根据slug匹配对应数据
  const data = await fetch('你的数据源地址');
  const posts = await data.json();
  const post = posts.find((p) => generateSlug(p.title) === params.slug);

  return { props: { post } };
}

export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      {/* 渲染文章内容 */}
    </div>
  );
}

服务器端渲染（适合动态更新的内容） #

如果内容需要实时获取，使用getServerSideProps：

// pages/[slug].js
export async function getServerSideProps({ params }) {
  const data = await fetch('你的数据源地址');
  const posts = await data.json();
  const post = posts.find((p) => generateSlug(p.title) === params.slug);

  return { props: { post } };
}

export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      {/* 渲染文章内容 */}
    </div>
  );
}

4. 避免slug冲突的进阶方案 #

如果不同文章可能生成相同的slug（比如两篇标题高度相似的内容），可以把id融入路由中，比如/[slug]-[id]，既保证URL语义化，又避免冲突：

// 渲染Link组件时
<Link href={`/${slug}-${myData.id}`}>
  <a>{myData.title}</a>
</Link>

// 动态页面中解析参数
export async function getStaticProps({ params }) {
  // 拆分slug和id
  const [_, id] = params.slug.split('-');
  // 根据id精准获取数据
  const data = await fetch(`你的数据源地址/${id}`);
  const post = await data.json();

  return { props: { post } };
}

这样生成的URL会是http://localhost:3000/this-is-a-title或者http://localhost:3000/this-is-a-title-630f3c32c1，完全没有查询参数，更符合SEO友好的URL规范。

内容的提问来源于stack exchange，提问作者Tribe56123