Next.js getStaticPaths

Question

I have a problem with the 'getStaticPaths' function. When I try to get a dynamic display with a parameter it shows me as error: A required parameter (id) was not provided as a string in getStaticPaths for / movies / [id] but if I use the other way above it works. Above all I am the documentation.

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

Answer 1

A required parameter (id) was not provided as a string in getStaticPaths for / movies / [id]

id should be a string as suggested by the error. Upon hitting the api from your browser, you can see that the id is not a string but a number. You need to convert it to string.

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

Answer 2

I faced the same problem and I did id to string conversion using toString()

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