Как получить значение slug в getStaticProps для вызова api с параметром как slug

#next.js #getstaticprops #getstaticpaths

Вопрос:

Содержимое страницы:

 import { useRouter } from "next/router";
    
export default function Gunluk({ data }) {
    let router = useRouter()
    
    const { slug } = router.query;
    return slug;
}

И показать на странице
60d6180ea9284106a4fd8441 (https://…/gunluk/60d6180ea9284106a4fd8441 идентификатор в URL-адресе)

Таким образом, я могу получить идентификатор, но я не знаю, как передать его в API.

 export async function getStaticProps(context) {
    const res = await fetch(`http://localhost:3000/api/books-i-have`)
    const data = await res.json()
    
    if (!data) {
        return {
            notFound: true,
        }
    }
    
    return {
        props: { data }, // will be passed to the page component as props
    }
}

Обычно я использую это, но в slug это не сработало. Я попробовал оба других метода, но потерпел неудачу (https://nextjs.org/docs/basic-features/data-fetching).

Короче говоря, как вы подключаетесь к API со страницы Slug?

Каталог файлов:

     pages/
        gunluk/
            [...slug].js
            index.js

1. Параметр контекста — это объект, содержащий ключ параметров, который будет иметь ваше значение slug, вы можете использовать это значение для вызова API. Я опубликовал ответ с кодом

Ответ №1:

Вы можете получить значение slug в getStaticProps и использовать его для вызова api на основе slug

 export async function getStaticPaths() {
  const idList = await fetchAllIds();
  const paths = [
  ];
  idList.forEach((id) => {paths.push(`/gunluk/${id}`)})
  return { paths, fallback: true };
}

export async function getStaticProps({ params }) {
  const { slug } = params;

 try {
    const data= await fetchGunluk(slug);
    return data? { props: { data} } : { notFound: true };
  } catch (error) {
    console.error(error);
    return { notFound: true };
  }

}

1. когда я добавил его, он вернул ошибку сервера Ошибка: getStaticPaths требуется для динамических страниц SSG и отсутствует для » /gunluk/[…slug]». Подробнее читайте: nextjs.org/docs/messages/invalid-getstaticpaths-value

2. Можете ли вы привести пример для getStaticPaths()

3. Я добавил пример getStaticPath для вашей справки