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

下载入门代码(可选)

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

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