Next.js直接访问slug路由参数undefined及getStaticPaths全路径预加载问题

• 首先在页面组件中增加fallback状态判断，你配置了fallback: true，未预生成的路径首次访问时会先进入fallback状态，此时数据未加载完成，直接渲染依赖数据的组件会触发异常：

export default function CasinoPage({ casinos }) {
  const router = useRouter();
  // 新增fallback加载态
  if (router.isFallback) {
    return <div>页面加载中</div>
  }
  // 原有逻辑保持不变
  return (
    <Layout>
      {/* 原有代码 */}
    </Layout>
  )
}

• 其次在getStaticProps中增加容错处理，避免查询不到对应slug的casino数据时返回空值导致报错：

export async function getStaticProps(context) {
  const slug = context.params.slug
  // 原有Apollo查询逻辑保持不变
  const { data } = await client.query({/* 原有查询语句 */})
  // 新增空值判断
  if (!data.casinos?.length) {
    return {
      notFound: true
    }
  }
  return {
    props: {
      casinos: data.casinos[0],
    },
  };
}

• 若使用的是Next.js 10之前的版本，需修正Link组件的动态路由写法：

<Link href="/casinos/[slug]" as={`/casinos/${casino.slug}`}>
  <a className={featured.link}>Read Review</a>
</Link>

修改getStaticPaths逻辑，调用GraphQL接口拉取所有casino的slug生成路径列表即可：

export async function getStaticPaths() {
  const client = new ApolloClient({
    uri: "http://localhost:1337/graphql",
    cache: new InMemoryCache(),
  });
  // 查询所有casino的slug
  const { data } = await client.query({
    query: gql`
      query AllCasinoSlugs {
        casinos {
          slug
        }
      }
    `
  });
  // 生成paths数组
  const paths = data.casinos.map(item => ({
    params: { slug: item.slug }
  }))
  return {
    paths,
    // 若casino数据不会动态新增，可设置fallback: false，不存在的路径直接返回404
    // 若需要支持动态新增的casino自动生成页面，建议设置fallback: 'blocking'，无需处理fallback加载态
    fallback: 'blocking'
  };
}

配置完成后，项目build阶段会自动拉取全量slug，预生成所有casino详情页的静态资源。

内容的提问来源于stack exchange，提问作者Cult of Tranquility