NextJs获取下一页上单击项目的内容

Question

我有一个简单的nextjs应用程序，我只在主页上用按钮/链接显示10部电影的列表，打开该电影的特定页面。我想在那个页面上显示那部电影的所有内容。

我的第一个方法是将电影id添加到链接中，如下所示：

<Link href="/movies/[title]" as={`/movies/${movie._id}-${movie.title}`} prefetch>
<IconButton aria-label="Open">
<LaunchIcon />
</IconButton>
</Link>

并从下一页的url中修剪id，并向api发送一个额外的请求，以获取该电影的信息。但我确信这不是一个好的做法。

在单个电影组件/movies/[title].tsx内部。我试图创建一个基本的电影对象

const movieObj = {
_id: 1,
title: "",
release_at: new Date(),
created_at: new Date()
};

并使用钩子设置数据：

const [movie, setMovie] = useState<IMovie>(movieObj);

如何使用nextjs实现一个好的解决方案？

Answer 1

您可以检查nextjs文档。正如文档中所说，您可以通过useRouter挂钩访问URL插件。

import { useRouter } from 'next/router';
const router = useRouter();    
const { title } = router.query;