我有一个简单的 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()
};

并使用钩子(Hook)设置该数据:

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

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

最佳答案

您可以查看 nextjs document .如文档中所述，您可以通过 useRouter Hook 访问 URL slug。

import { useRouter } from 'next/router';

const router = useRouter();    
const { title } = router.query;

https://stackoverflow.com/questions/61427999/