页面间导航

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

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

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

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

在某种程度上,这类似于使用 HTML 或 PHP 文件。你编写 JSX 和使用 React 组件来替代写 HTML。

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