页面路由：Next.js 中的页面 | Next.js

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

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

我们已经有了 pages/index.js 文件，现在让我们创建 pages/posts/first-post.js 来看看它是如何工作的。

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

然后在 posts 目录中创建名为 first-post.js 的文件，内容如下：

export default function FirstPost() {
  return <h1>First Post</h1>;
}

组件可以任意命名，但必须将其作为 default 导出。

现在，确保开发服务器正在运行，然后访问 http://localhost:3000/posts/first-post。您将看到以下页面：

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

只需在 pages 目录下创建 JS 文件，文件路径就会成为 URL 路径。

这种方式类似于使用 HTML 或 PHP 文件构建网站。不同之处在于您编写的是 JSX 并使用 React 组件，而不是 HTML。

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

Next.js 中的页面