**如果要继续上一课，**可以跳过此页面。单击下面的按钮转到下一页。

下载入门代码（可选）

如果您不打算继续上一课，可以在下面下载、安装和运行本课程的入门代码。这将设置一个目录，使其与上一课的结果相同。nextjs-blog

同样，如果您刚刚完成上一课，则不需要这样做。

npx create-next-app nextjs-blog –use-npm –example “https://github.com/vercel/next-learn/tree/master/basics/navigate-between-pages-starter"

然后按照命令输出中的说明（进入目录并启动开发服务器）进行操作。cd

开始

在 Next.js 中，页面是从 pages 目录中的文件导出的 React 组件。

页面根据其文件名与路由相关联。例如，在开发中：

  • pages/index.js与路由相关联。/
  • pages/posts/first-post.js与路由相关联。/posts/first-post

我们已经有了这个文件，所以让我们创建看看它是如何工作的。pages/index.js``````pages/posts/first-post.js

创建新主页

在 下创建目录。posts ``````pages

创建在目录中调用的文件，其中包含以下内容：first-post.js``````posts

export default function FirstPost() { return

First Post

}

该组件可以具有任何名称，但您必须将其导出为导出。default

现在，确保开发服务器正在运行，并访问 http://localhost:3000/posts/first-post。您应该会看到该页面：

第一篇文章

这就是如何在 Next.js 中创建不同的页面。

只需在 pages 目录下创建一个 JS 文件，该文件的路径就变成了 URL 路径。

在某种程度上，这类似于使用HTML或PHP文件构建网站。你不是写HTML，而是编写JSX并使用React Components。

让我们添加一个指向新添加的页面的链接，以便我们可以从主页导航到它。