Next.js 13中如何创建含多参数的单条动态路由以优化SEO？

完全可以实现这类路由，Next.js 13的App Router支持带固定文本的多动态段路由，正好匹配你需要的SEO友好型URL格式。下面是具体实现步骤：

1. 创建路由文件夹结构 #

在项目的app目录下，创建名称为how-to-decide-which-[profession]-to-choose-after-[degree]的文件夹，然后在该文件夹内添加page.js（或page.tsx）文件。

这里的[profession]和[degree]是动态参数段，Next.js会自动匹配URL中对应位置的内容，并将其作为参数传递给页面组件。

2. 在页面组件中获取并使用参数 #

在page.js中，通过组件的params props获取这两个动态参数：

// app/how-to-decide-which-[profession]-to-choose-after-[degree]/page.js
export default function CareerDecisionPage({ params }) {
  const { profession, degree } = params;

  return (
    <main>
      <h1>如何选择{degree}毕业后的{profession}职业</h1>
      <section>
        <p>这里可以放置针对{degree}毕业生的{profession}职业选择指南内容</p>
      </section>
    </main>
  );
}

3. 动态生成SEO元数据 #

为了最大化SEO效果，你可以在该路由文件夹下创建metadata.js文件，动态生成页面的标题、描述等元数据：

// app/how-to-decide-which-[profession]-to-choose-after-[degree]/metadata.js
export async function generateMetadata({ params }) {
  const { profession, degree } = params;

  return {
    title: `如何选择${degree}毕业后的${profession}职业 - 职业决策指南`,
    description: `专为${degree}毕业生打造的${profession}职业选择攻略，帮你理清职业方向`,
    keywords: [`${degree}职业选择`, `${profession}职业规划`, `毕业后职业决策`]
  };
}

额外说明 #

• 当用户访问类似/how-to-decide-which-engineer-to-choose-after-bachelor的URL时，params.profession会被赋值为engineer，params.degree为bachelor。
• 如果需要对参数进行校验（比如限制允许的profession或degree值），可以在页面组件内添加逻辑，不符合条件时跳转到not-found页面。

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