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://127.0.0.1:3000/posts/first-post。你应该会看到页面

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

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

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

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