javascript - 如何生成带有嵌套动态路由的静态页面

Question

我一直在这个网站上工作，但遇到了瓶颈。基本上我应该按流派列出电影，从数据库中获取。该流派应该根据流派将我带到另一个列表。一旦用户点击“ Action ”类型的电影，就会将他们带到另一个页面上的电影详细信息。这是结构

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> 提供在浏览器中。