Next.js 中的页面

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

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

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

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

创建一个新页面

在 pages 目录下创建 posts 目录。

在 posts 目录下创建一个名为 first-post.js 的文件，其内容如下：

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

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

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

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

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

从某种程度上说，这类似于使用 HTML 或 PHP 文件构建网站。不同之处在于，你写的是 JSX 而不是 HTML，并且使用 React 组件。

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