Next.js动态路由错误：提供的路径`page-name`与页面不匹配：`/[slug]`

Question

我正在尝试使用[slug].js来呈现与index.jsviagetStaticProps和相邻的页面getStaticPaths。使用动态路由导航到页面后，出现不匹配错误。即使提供的路径实际上与页面 slug 和页面道具内容匹配，也会发生此错误。当index.js复制并重命名为page-name.js（例如about.js）时，页面呈现良好，所以我认为问题在于我如何使用getStaticPaths. 实际上，我并没有完全理解getStaticProps和之间的关系getStaticPaths。是否有一些映射允许引擎在给定地图中的任何路径的情况下查找适当的道具？Index.jsimport Link from 'next/link';import { getPageDataBySlug } from '../lib/api';export default function Page(pageData) {  const page = pageData;  return (    <>      <h1>document title is: {page.documentTitle}</h1>      <Link href="/[slug]" as="/about">        <a>          <h5>Link to About</h5>        </a>      </Link>    </>  );}export async function getStaticProps() {  const props = await getPageDataBySlug('home');  return {    props  };}[slug].jsimport Link from 'next/link';import { getPageDataBySlug, getApiDataPaths } from '../lib/api';export default function Page(pageData) {  const page = pageData;  return (    <>      <h1>document title is: {page.documentTitle}</h1>      <Link href="/" as="/">        <a>          <h5>Link to Home</h5>        </a>      </Link>    </>  );}// Only grab the entry for this pageexport async function getStaticProps({ params }) {  const props = await getPageDataBySlug(params.slug);  return {    props  };}export async function getStaticPaths() {  const apiDataPaths = await getApiDataPaths();  return {    paths: apiDataPaths?.map(({ slug }) => `${slug}`) ?? [],    fallback: false  };}getStaticProps返回正确的页面内容{  "title": "About",  "slug": "about",  "description": "About page description",  "documentTitle": "Pithy Compelling Headline",  "article": {    "content": [[Object], [Object]],  }}getApiDataPaths()回报[  { slug: 'about' },  { slug: 'another-page' },  { slug: 'yet-another' }]地图以数组形式getStaticPaths()返回：paths[  'about',  'another-page',  'yet-another']我在这里错过了什么？应该getStaticPaths只有当前页面的路径吧？FWIW 我正在使用 Contentful 作为 API，并且运行良好。

Answer 1

Next Js Docs帮助找出错误。这是你出错的地方。您以这种格式传递了一组对象：

[{id:1}, {id:2}]

当 getStaticPaths 期待这个时：

[

    { params: { id: '1' } },

    { params: { id: '2' } }

]

解决方案：

  export async function getStaticPaths() {

  const apiDataPaths = await getApiDataPaths();

  // Empty arr to build new paths

  const newPaths = [];

  // Add params to every slug obj returned from api

  for (let slug of apiDataPaths) {

    newPaths.push({ params: { ...slug } });

  }

  // Return paths to render components

  return {

    paths: newPaths,

    fallback: true

  };

}

您还可以考虑清理服务器端的数据。