Ошибка динамического маршрута Next.js: указанный путь `page-name` не соответствует странице:` / [slug]`

Question

Я пытаюсь использовать [slug].js для рендеринга страниц, смежных с index.js, через getStaticProps и getStaticPaths. При переходе на страницу с использованием динамического маршрута я получаю ошибку несоответствия. Эта ошибка возникает даже в том случае, если указанный путь действительно соответствует содержимому ярлыка страницы и свойств страницы.

Когда index.js дублируется и переименовывается в page-name.js (например, "about.js"), страница отображается нормально, поэтому я считаю, что проблема заключается в том, как я использую getStaticPaths. На самом деле я не полностью понимаю взаимосвязь между getStaticProps и getStaticPaths. Есть ли какое-то отображение, которое позволяет движку искать соответствующие реквизиты по любому пути на карте?

Index.js

import 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].js

import 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 page
export 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() возвращает "пути" в виде массива:

[
  '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
  };
}

Вы также можете рассмотреть возможность очистки данных на стороне сервера.