Как создавать статические страницы с вложенными динамическими маршрутами

Question

Я работал над этим сайтом и наткнулся на стену. Обычно я должен перечислять фильмы по жанрам, взятые из базы данных. Жанр должен привести меня к другому списку, основанному на жанре. Как только пользователь щелкает фильм, скажем, из жанра «боевик», он переходит к деталям фильма на другой странице. Это структура

      Movies/ [moviesbygenrelist]/list

Пока все работает.

Переходя ко второй динамической странице, я не могу получить значения первой и второй динамических страниц, как показано ниже ...

      Movies/ [moviesbygenrelist]/[movie-slug]

Я создаю сайт статически

как я могу получить параметры первой страницы, находясь на второй динамической странице

Это то, что у меня есть, я сначала звоню

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

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


     }

Моя логика заключается в том, что я могу получить доступ к параметрам маршрута из getStaticProps, но не в getStaticPaths, поэтому я сначала вызываю его, создаю экземпляры переменных, затем передаю их в getStaticPaths, чтобы я мог выполнять вызовы базы данных с использованием переменных, поскольку теперь я немного глубоко в базе данных. Я не могу совершать звонки без динамических параметров, которые я передаю, как показано ниже

      export async function getStaticPaths(movieTypeID, movieSlug) {

///only they come out as undefined


 }

Answer 1

Предполагая, что страница расположена под pages/movies/[type]/[slug].jsx в вашем приложении Next.js:

      // 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

Это статически сгенерирует страницы для всех фильмов в вашей базе данных. Каждая страница будет доступна по адресу /movies/<movie-type>/<movie-slug> в браузере.