如何生成具有嵌套动态路由的静态页面

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>在浏览器中访问。