我有一个索引页，我按部分（热门电影、热门电影等）显示电影，为此我在 getStaticProps 中调用 不同 api url。现在在 [movieId].js 页面中，我使用的是 getStaticPaths，因为我使用的是动态路由。但我不明白的是，用户可以点击 any 部分上的 any 电影项目，但因为我需要获取 {{1 }} 页面并在 [movideId].js 中返回为 paths，
getStaticPaths
这是我的代码
How would I know which section a user has clicked so I can call that specific api in getStaticPaths to get the correct data and return the correct paths ?现在，如果用户点击 // index.js
export default function Home(props) {
return (
<>
<div>
<h1>Trending</h1>
{props.trending.results.map((movie, index) => {
return (
<div key={index}>
<Link href={`/movie/${movie.id}`}>
<a>{movie.original_title}</a>
</Link>
</div>
);
})}
</div>
<div>
<h1>Popular</h1>
{props.popular.results.map((movie, index) => {
return (
<div key={index}>
<Link href={`/movie/${movie.id}`}>
<a>{movie.original_title}</a>
</Link>
</div>
);
})}
</div>
</>
);
}
export async function getStaticProps() {
try {
const token = '...';
const [trendingRes, popularRes] = await Promise.all([
fetch(
`https://api.themoviedb.org/3/trending/movie/week?api_key=${token}`
),
fetch(
`https://api.themoviedb.org/3/movie/popular?api_key=${token}&language=en-US&page=1`
)
]);
const [trending, popular] = await Promise.all([
trendingRes.json(),
popularRes.json()
]);
return { props: { trending, popular } };
} catch (err) {
return { notFound: true };
}
}
// [movieId].js
export async function getStaticPaths() {
const token = "...";
const res = await fetch(
`https://api.themoviedb.org/3/trending/movie/week?api_key=${token}` // here I am hardcoding to call trending api url no matter which section a user has clicked on
);
const data = await res.json();
return {
paths: data.results.map((d) => ({ params: { movieId: d.id.toString() } }))
};
}
部分的电影，它会显示 404 not found 页面，因为我只有来自趋势 api url 的数据和路径。
我还在学习nextjs所以希望我的解释是可以理解的，可以免费询问更多细节。
答案 0 :(得分：1)
鉴于您提到的示例，我不会使用 getStaticPaths 而是使用 getServerSideProps，因为 getStaticPaths 用例仅适用于您想要静态生成少量页面的情况.
在 getServerSideProps 中，您可以访问 context 对象。然后，访问 context.query 将获得您页面包含的任何动态路径。
举个例子：
在 Next.js 项目的 pages 文件夹中，创建一个名为 movies 的文件夹，然后在其中创建一个 [id].js。
这将匹配以下路径：
/movies/1
/movies/123
/movies/456
然后您可以使用动态路径（即 123）来调用您的 API 并获取特定电影。
答案 1 :(得分：0)
在现实生活中，如果您有大量数据集，您不会想要预渲染所有可能的组合和所有可能的电影页面。
幸运的是，fallback 有一个 getStaticPaths 标志。
您可以使用 fallback: blocking (docs)，这样如果页面的键没有在 getStaticPaths 中指定，页面将在第一次请求后生成（并缓存）。但是您需要一个 api，您可以在其中通过 id 获取电影。您拥有它，因此您需要做的就是更改 fallback 键。 Check this Stackblitz example
如果您没有这样的 api，您可以例如拆分您的路线并拥有 /trending/[id] 路线和 popular/[id] 路线。这样您就可以始终知道需要从哪里获取电影。
希望它有道理，请随时提出其他问题。