Next.js 页面（Pages）

什么是 Next.js 页面 - Pages

在 Next.js 中，一个 page（页面） 就是一个从 .js 、 .jsx 、 .ts 或 .tsx 文件导出（export）的 React 组件 ，这些文件存放在 pages 目录下。每个 page（页面）都使用其文件名作为路由（route）。例如：

• pages/index.js 与 '/' 路由链接。
• pages/posts/first.js 与 '/posts/first' 路由等相关联。

让我们修改在Next.js 安装一节中创建的 nextjs 项目。

创建 post 目录并在其中新建 first.js 文件，内容如下：

first.js

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

添加链接支持从而使其可以返回主页。 更新 first.js 如下

first.js

import Link from 'next/link'

export default function FirstPost() {
   return (
      <>
         <h1>My First Post</h1>
         <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
         </h2>
      </>      
   )
}

将链接添加到主页从而可以使其导航到第一页。 更新 index.js 如下

index.js

import Link from 'next/link'

function HomePage() {
   return (
      <>
         <div>Welcome to 迹忆客 - Next.js 中文教程!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
      </>
   )
}

export default HomePage

运行以下命令开启服务。

$ npm run dev

在浏览器中打开 localhost:3000 ，我们将看到以下输出。

单击链接 First Post，您将看到以下输出。