Next.js 中的 Pages

在 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 导出。

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

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

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

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

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