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()},