NextJS中getStaticPaths路径未绑定参数导致非法URL可访问求助

1. 关于fallback运行机制的误解 #

你确实对fallback的逻辑存在误解。当fallback设为true时，只要请求的路径匹配当前动态路由的格式（即/[prefix]/[slug]的两层结构），Next.js就会放行请求：不在预生成paths列表里的路径会先返回fallback加载页，后台自动运行getStaticProps生成静态页，全程不会自动校验参数是否合法，你预期的「仅预定义前缀可通过校验」的逻辑是不存在的。

2. 现有代码的明显错误 #

你的getStaticProps只解构了slug参数，完全没有用到路径里的prefix参数做匹配校验：只要slug和后台返回的某个页面uri一致，不管前缀是什么，都会返回对应页面数据，这是导致非法前缀、前缀slug不匹配的路径都能正常访问的直接原因。

3. 符合需求的改造方案 #

不需要把fallback设为false，也不需要全量构建，只要修改getStaticProps逻辑+可选调整fallback模式即可实现需求：

改造要点 #

• 从params中同时解构prefix和slug两个参数，查询页面时同时匹配前缀和slug
• 没有匹配到对应页面时直接返回notFound: true，Next.js会自动返回404状态码和页面
• 可选：提前校验前缀是否在合法范围内，减少不必要的API请求
• 可选：将fallback改为'blocking'，用户访问合法新路径时会等待页面生成后直接返回，不需要显示加载状态，体验更友好

修改后的getStaticProps示例代码 #

export async function getStaticProps({ params: { prefix, slug } }) {
  // 可选：预先校验前缀合法性，后续扩展前缀直接更新这个数组即可，也可以从接口拉取合法前缀列表
  const validPrefixes = ['c', 's'];
  if (!validPrefixes.includes(prefix)) {
    return {
      notFound: true,
      revalidate: 60
    }
  }

  const resPages = await fetch(`${process.env.API_BASE_URL}/path/to/pagesapi`);
  const pages = await resPages.json();
  // 同时匹配前缀和slug
  const matchedPage = pages.find(page => page.uri_prefix === prefix && page.uri === slug);

  // 无匹配页面直接返回404
  if (!matchedPage) {
    return {
      notFound: true,
      revalidate: 60
    }
  }

  let products = null;
  if(matchedPage.src) {
    const resProducts = await fetch(`${process.env.API_BASE_URL_LEGACY}${matchedPage.src}`);
    products = await resProducts.json();
  }

  return {
    props: {
      products,
      seo: [matchedPage]
    },
    revalidate: 60,
  };
}

改造后效果 #

• 后台新增合法前缀+slug的页面后，用户首次访问对应路径会自动触发ISG生成静态页，不需要全量构建
• 非法前缀、前缀与slug不匹配的路径都会直接返回404，符合安全要求

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