时间戳

首页 > 解决方案 > NextJs 获取下一页点击项的内容

javascript - NextJs 获取下一页点击项的内容

问题描述

我有一个简单的 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 实现良好的解决方案？

标签： javascriptreactjstypescriptsingle-page-applicationnext.js

解决方案

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

import { useRouter } from 'next/router';

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

推荐阅读