4

I have been working on this site and I have hit a wall. Basically I am supposed to list movies by genre, fetched from database. The genre should take me to another list based on the genre. Once a user clicks the movie from say 'action' genre it takes them to the movie details on another page. This is the structure

Movies/ [moviesbygenrelist]/list

Everything works till there.

Moving on to the second dynamic page I cannot get values of first and second dynamic page as below...

Movies/ [moviesbygenrelist]/[movie-slug]

I am statically generating the site

how can i get parameters of first page while on the second dynamic page

This is what i have, I first call

 let movieTypeID;
 let movieSlug;
    export async function getStaticProps({params}) {

        movieTypeID=params.movietype;
        movieSlug=params.movie;


     }

my logic is i can access route parameters from getStaticProps but not in getStaticPaths so I call it first, instantiate the variables then pass them to getStaticPaths so I can make database calls using the variables since I am now a bit deep in the database. I cannot make calls without the dynamic parameters I pass them like below

export async function getStaticPaths(movieTypeID, movieSlug) {

///only they come out as undefined


 }
juliomalves
  • 42,130
  • 20
  • 150
  • 146
Taio
  • 3,152
  • 11
  • 35
  • 59
  • For pages with dynamic routes, [`getStaticPaths` is what defines the list of paths used in `getStaticProps`](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation) at built time, and not the other way around. – juliomalves Jan 03 '21 at 16:08
  • As it is i cannot query the paths since i dont have the two parameters. From this part in documentation,, pages/posts/[postId]/[commentId] user sees list of posts clicks post1 which moves to postscomments page. but in order to prerender the comments page I'll need post1(the id). How will getStaticPaths get these id – Taio Jan 03 '21 at 16:49
  • See the difference in application from this,,, pages/posts/[id].js which is the only type of example the documentation gives. Which one fetches and prerenders posts and their ids only – Taio Jan 03 '21 at 16:54
  • You can retrieve the ids by querying the database in `getStaticPaths` and generate the paths list. – juliomalves Jan 03 '21 at 17:04
  • How do i know what post to get the comments for. That is the question. Is it post1, post2,,, which one? and where do i pass this postID to getStaticPaths function while on the comments page – Taio Jan 03 '21 at 17:08
  • Remember that you're statically generating these pages. You have to generate paths for all existing posts and comments in `getStaticPaths`, so iterate over all posts, and all comments for each post. – juliomalves Jan 03 '21 at 17:12
  • Then i must be ordering my pages wrong or something. Can you provide an example as an answer, kindly. Using this example ... pages/posts/[postId]/[commentId] . Write a mock database query in getStaticPaths for list of posts for the first page(postsId) and a query in getStaticPaths for second page (comments) – Taio Jan 03 '21 at 17:30

1 Answers1

5

Assuming the page is located under pages/movies/[type]/[slug].jsx in your Next.js app:

// pages/movies/[type]/[slug].jsx
export async function getStaticPaths() {
  const movies = db.getAllMovies() // Retrieve all movies data from database
  const paths = movies.map((movie) => ({
    params: { type: movie.type, slug: movie.slug },
  }))

  return {
    paths,
    fallback: false // Paths not returned will result in a 404
  };
}

export async function getStaticProps({ params }) {
  const { type, slug } = params
  const movieData = getMovie(type, slug) // Retrieve data for given type/slug pair

  return {
    props: {
      data: movieData
    }
  }
}

function Movie({ data }) {
  //render the given movie data
}

export default Movie

This will statically generate pages for all movies in your database. Each page will be available at /movies/<movie-type>/<movie-slug> in the browser.

juliomalves
  • 42,130
  • 20
  • 150
  • 146
  • Ooh I guess this makes sense. I'll try to implement this according to my database (firestore) and get back. This method looks really expensive and complex from the database structure i have but it makes sense – Taio Jan 03 '21 at 18:38
  • 1
    Is there a way to use 2 `params` properties, but with same slug? In this example, I'd need type for different api calls, but I need route to have only `/slug`, not `/type/slug` – flppv Mar 03 '21 at 12:16
  • That's not possible with the same slug. You could look into [catch-all dynamic routes](https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes) to have one page handle all routing, but you'd still need something like `/type/slug` for multiple params to be passed. – juliomalves Mar 03 '21 at 12:54