Next.js 页面
在 Next.js 中，我们可以使用文件系统路由功能创建页面并在它们之间导航。我们将使用
Link 组件在页面之间进行客户端导航。
在 Next.js 中，页面是一个 React 组件，从 pages 目录导出。每个页面都与基于其文件名的路由相关联。例如
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，您将看到以下输出。
点击第一个链接，您将看到以下输出。
