Next.js动态路由[username].js中使用getServerSideProps的问题求助

首先明确：动态路由并非必须搭配getStaticPaths和getStaticProps，这两个是静态生成（SSG）方案的专属函数；而服务端渲染（SSR）方案只需要单独使用getServerSideProps即可，完全不需要getStaticPaths——因为SSR是每次请求实时处理，不需要预先生成路径列表。

针对你的需求，直接在[username].js中使用getServerSideProps就能同时获取动态路由参数和请求头信息，具体实现如下：

export default function UserPage({ username, headerUserName }) {
  return (
    <div>
      <h2>动态路由参数：{username}</h2>
      <p>请求头中的用户信息：{headerUserName}</p>
    </div>
  );
}

export async function getServerSideProps(context) {
  // 从context中获取动态路由的params参数
  const { username } = context.params;
  // 从请求头中提取需要的用户信息
  const headerUserName = context.req.headers['x-user-name'];

  // 这里可以根据业务需求，结合username和header信息做进一步处理
  // 比如调用后端接口获取用户详情等

  return {
    props: {
      username,
      headerUserName: headerUserName || '未获取到用户信息'
    }
  };
}

关键说明 #

• getServerSideProps的context参数包含了params（动态路由参数）、req/res（请求响应对象）等信息，完全覆盖你的需求。
• 不需要同时使用getStaticProps和getServerSideProps，二者分属不同的渲染方案，不可共存，但动态路由支持单独使用SSR方案。

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