Next.js创建[id]-[first_name]-[last_name]动态路由报错求助

你遇到的错误核心是：[id]-[first_name]-[last_name].js这种命名方式在Next.js里会被识别为单个动态参数，参数名就是id]-[first_name]-[last_name，而非三个独立的id、first_name、last_name参数。你的getStaticPaths错误地将其拆分为三个参数，导致Next.js找不到要求的完整参数。

不需要改用slug，只需调整动态路由的参数处理逻辑：

1. 修正getStaticPaths：生成路径时，把每个条目拼接成{id}-{first_name}-{last_name}的字符串，作为单个参数值传入。
2. 在getStaticProps中提取ID：从完整的参数字符串里拆分出ID，再调用API获取数据。
3. 组件内渲染正确数据：用拿到的info数据替换硬编码文本。

修正后的完整代码 #

export default function Info({ info }) {
  return (
    <div>
      <h1>{info.first_name}</h1>
      <p>{info.last_name}</p>
    </div>
  );
}

export const getStaticPaths = async () => {
  const res = await fetch('http://xxx:1337/api/info');
  const data = await res.json();

  // 若API返回单个对象而非数组，改为[data].map
  const paths = data.map(item => {
    // 拼接成要求的路径片段格式：id-first_name-last_name
    const paramValue = `${item.id}-${item.first_name}-${item.last_name}`;
    return {
      params: {
        // 参数名必须和文件名动态部分完全一致，需用引号包裹
        'id]-[first_name]-[last_name': paramValue
      }
    };
  });

  return {
    paths,
    fallback: false
  };
};

export const getStaticProps = async (context) => {
  // 获取完整的参数字符串
  const fullParam = context.params['id]-[first_name]-[last_name'];
  // 拆分出ID（若ID是数字，可用正则匹配：fullParam.match(/^\d+/)[0]，避免名字含-导致拆分错误）
  const id = fullParam.split('-')[0];
  
  const res = await fetch(`http://xxxx:1337/api/info/${id}`);
  const data = await res.json();

  return {
    props: { info: data }
  };
};

关键说明 #

• 文件名的动态部分[id]-[first_name]-[last_name]对应唯一参数名id]-[first_name]-[last_name，必须完全匹配，因此在params中需要用引号包裹这个特殊名称。
• 如果first_name或last_name包含-符号，建议用正则匹配提取ID（比如假设ID是数字，用fullParam.match(/^\d+/)[0]），避免拆分出错。

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