📜  Next.js-页面

📅  最后修改于: 2020-10-22 06:43:57             🧑  作者: Mango


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

在Next.js中,页面是React组件,并从pages目录导出。每个页面都基于其文件名与路由关联。例如

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

  • pages / posts / first.js与“ / posts / first”路线链接,依此类推。

让我们更新在“环境设置”一章中创建的nextjs项目。

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

export default function FirstPost() {
   return 

My First Post

}

添加链接支持以返回主页。更新first.js如下-

import Link from 'next/link'

export default function FirstPost() {
   return (
      <>
         

My First Post

Home

> ) }

将链接支持添加到主页以导航到第一页。更新index.js如下-

import Link from 'next/link'

function HomePage() {
   return (
      <>
         
Welcome to Next.js!
First Post > ) } 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,您将看到以下输出。

主页

单击“第一链接”,您将看到以下输出。

第一篇文章