📌  相关文章
📜  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，您将看到以下输出。

主页

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

第一篇文章