Menu
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 
390
If a page has Dynamic Routes and uses getStaticProps , it needs to define a list of paths to be statically generated. When you export a function called getStaticPaths (Static Site Generation) from a page that uses dynamic routes, Next. js will statically pre-render all the paths specified by getStaticPaths .
The paths that have not been generated at build time will not result in a 404 page. Instead, Next. js will serve a “fallback” version of the page on the first request to such a path. Web crawlers, such as Google, won't be served a fallback and instead the path will behave as in fallback: 'blocking' .
getStaticProps(): A method that tells the Next component to populate props and render into a static HTML page at build time. getServerSideProps(): A method that tells the Next component to populate the props and render into a static HTML page at run time.
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()}, If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
