Next.js - 页面

---

在 Next.js 中，我们可以创建页面并使用文件系统路由功能在它们之间导航。我们将使用Link组件在页面之间进行客户端导航。

在 Next.js 中，页面是一个 React 组件，并从页面目录导出。每个页面都根据其文件名与一个路径相关联。例如

• pages/index.js通过“/”路由链接。

• pages/posts/first.js与 '/posts/first' 路由等链接。

让我们更新环境设置章节中创建的 nextjs 项目。

使用以下内容在其中创建 post 目录和first.js。

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

添加链接支持返回主页。更新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如下 -

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

启动 Next.js 服务器

运行以下命令启动服务器 -。

npm run dev
> nextjs@1.0.0 dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

验证输出

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

单击第一个链接，您将看到以下输出。