Next.js使用基于文件系统的路由器。每当我们将任何页面添加到页面目录时，都可以通过url自动访问。以下是此路由器的规则。

• 索引路由-文件夹中存在的index.js文件映射到目录的根目录。例如-

  • pages / index.js映射到“ /”。

  • pages / posts / index.js映射到“ / posts”。

• 嵌套路由-页面目录中的任何嵌套文件夹结构，因为路由器会自动生成URL。例如-

  • pages / settings / dashboard / about.js映射到“ / settings / dashboard / about”。

  • pages / posts / first.js映射到“ / posts / first”。

• 动态路由-我们也可以使用命名参数来匹配url。同样使用括号。例如-

  • pages / posts / [id] .js映射到’/ posts /：id’，在这里我们可以使用像’/ posts / 1’这样的URL。

  • pages / [user] /settings.js映射到’/ posts /：user / settings’，在这里我们可以使用’/ abc / settings’这样的URL。

  • pages / posts / [… all] .js映射到’/ posts / *’，我们可以在其中使用任何URL，例如’/ posts / 2020 / jun /’。

页面链接

Next.JS允许使用Link react组件在客户端链接页面。它具有以下属性-

• href-页面目录中页面的名称。例如， / posts / first引用存在于pages / posts目录中的first.js。

让我们创建一个示例来演示相同的内容。

在此示例中，我们将更新index.js和first.js页面以使服务器命中以获取数据。

让我们更新“全局CSS支持”一章中使用的nextjs项目。

如下更新页面目录中的index.js文件。

import Link from 'next/link'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         
            
         
         
Welcome to Next.js!
         > First Post
         

         
Next stars: {props.stars}
         
      >        
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

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，您将看到以下输出。

单击“第一篇文章”链接。