I've been working on a website and I've encountered a problem. Essentially, I need to display movies by genre from a database. When a user clicks on a genre, it should take them to another list of movies in that genre. Then, when they click on a specific movie, it should redirect them to a details page for that movie.
Movies/ [moviesbygenrelist]/list
Everything works fine up until this point.
However, on the second dynamic page, I'm struggling to retrieve values from both the first and second dynamic pages as shown below...
Movies/ [moviesbygenrelist]/[movie-slug]
I am generating the site statically.
How can I retrieve parameters from the first page while on the second dynamic page?
This is what I have:
Firstly, I call
let movieTypeID;
let movieSlug;
export async function getStaticProps({params}) {
movieTypeID=params.movietype;
movieSlug=params.movie;
}
My approach is to access the route parameters in getStaticProps but not in getStaticPaths. So, I initialize the variables first and then pass them to getStaticPaths in order to make database calls using these variables since I need them deep in the database. Without the dynamic parameters, I cannot make the necessary database calls.
I am passing them like this:
export async function getStaticPaths(movieTypeID, movieSlug) {
///however, they end up being undefined
}