Next.js에서 "필요한 매개 변수(id)가 getStaticPaths에서 문자열로 제공되지 않았습니다" 오류가 발생했습니다.

Next.js에서 "필요한 매개 변수(id)가 getStaticPaths에서 문자열로 제공되지 않았습니다" 오류가 발생했습니다.

에 문제가 있습니다.getStaticPaths기능.파라미터를 사용하여 다이내믹 디스플레이를 가져오려고 하면, getStaticPaths for / movies / [ id ]에서 필수 파라미터(id)가 문자열로 제공되지 않았습니다만, 위의 방법을 사용하면 동작합니다.무엇보다도 나는 서류다.

import fetch from 'node-fetch';


function MovieSelect({movie}){

    return(
        <div>
            <h1>Test: {movie.name}</h1>
            <p>{movie.summary.replace(/<[/]?[pb]>/g, '')}</p>
            {movie.image ? <img src={movie.image.medium} /> : null}
        </div>
    )
}

export async function getStaticPaths(){
    const request  = await fetch('https://api.tvmaze.com/search/shows?q=batman')
    const movies = await request.json()

    //const paths = movies.map(movie =>`/movies/${movie.show.id}`)

    const paths = movies.map(movie =>({
        params: {id: movie.show.id},
    }))

    return {
        paths,
        fallback: false
    }
}

export async function getStaticProps({params}){
    const request = await fetch(`https://api.tvmaze.com/shows/${params.id}`)
    const movie = await request.json()

    return{
        props:{
            movie
        }
    }
}

export default MovieSelect

getStaticPaths for / movies / [ id ]에서 필수 매개 변수(id)가 문자열로 제공되지 않았습니다.

id는 오류에서 제시된 문자열이어야 합니다.브라우저에서 api를 누르면 id가 문자열이 아닌 숫자임을 알 수 있습니다.문자열로 변환해야 합니다.

params: {id: movie.show.id.toString()},

같은 에러가 발생했지만, 다른 버그가 발생했습니다.

TL;DR: params 객체에 사용되는 slug 키와 일치시키는 데 필요한 내 파일 이름입니다.

저 같은 경우에는 파일명이[postSlug].js따라서, 열쇠는 다음과 같아야 합니다.postSlug의 내부에getStaticPaths().

// In [postSlug].js

const pathsWithParams = slugs.map((slugs) => ({ params: { postSlug: slug } })); // <-- postSlug is right
const pathsWithParams = slugs.map((slugs) => ({ params: { id: slug } })); // <--- id is wrong

그때 내 모든 기능은 이렇게 생겼다.

export async function getStaticPaths() {
    const slugs = await getAllBlogSlugs();
    const pathsWithParams = slugs.map((slug) => ({ params: { postSlug: slug } }));

    return {
        paths: pathsWithParams,
        fallback: "blocking",
    };
}

참고 자료:

• NextJS.org 정적 경로 가져오기

export async function getServerSideProps({ query, locale }) {
const { id } = query;
if (!id) return { notFound: true };
return {
   props: {
     fallback: true,
     query,
     locale,
     ...(await serverSideTranslations(
     locale,
     ["common", "header", "footer"],
     nextI18nextConfig
    )),
   },
 };
}

언급URL : https://stackoverflow.com/questions/60814495/getting-a-required-parameter-id-was-not-provided-as-a-string-in-getstaticpath