1. 创建第一个页面

Next.js 使用文件系统路由，pages 文件夹中的每个文件都会自动映射为应用的一个页面。下面我们将创建一个简单的页面并通过 Next.js 的路由系统进行导航。

1.1 创建页面

1. 在项目的 pages 目录下，创建一个新的文件 about.js：

   文件路径：pages/about.js

   代码：

   export default function About() {
     return (
       <div>
         <h1>About Page</h1>
         <p>This is the about page of our Next.js application.</p>
       </div>
     );
   }
   

2. 这个简单的页面包含一个标题和一段文字。Next.js 会自动将 about.js 文件映射为 /about 路由。

1.2 查看页面

1. 启动开发服务器：

   npm run dev
   

2. 在浏览器中访问 http://localhost:3000/about，你将会看到 About 页面。

2. Link 组件进行导航

Next.js 提供了一个内置的 Link 组件，用于在不同页面之间导航，而不需要重新加载整个页面。Link 组件类似于 HTML 中的 <a> 标签，但它在前端进行页面切换，从而提高性能。

2.1 使用 Link 组件

我们将修改 pages/index.js 文件，添加一个链接到 About 页面。

1. 打开或编辑 pages/index.js：

   代码：

   import Link from 'next/link';
   
   export default function Home() {
     return (
       <div>
         <h1>Home Page</h1>
         <p>Welcome to our Next.js application!</p>
         <Link href="/about">
           <a>Go to About Page</a>
         </Link>
       </div>
     );
   }
   

2. 这里我们使用了 Link 组件，并通过 href="/about" 指定了目标页面。Link 组件内部使用了 <a> 标签，但不需要手动写 a 标签，Next.js 会自动处理页面间的跳转。

3. 现在访问 http://localhost:3000，你会看到首页上有一个 "Go to About Page" 的链接。点击链接后，将跳转到 About 页面，页面刷新非常快，因为这是一种前端的导航。

3. 路由系统的基本概念

Next.js 的路由系统是基于文件系统的，位于 pages 文件夹中的文件会自动成为可访问的路由。

3.1 静态路由

每个文件的路径决定了它的 URL 路径：

• pages/index.js 对应 /（根页面）。
• pages/about.js 对应 /about。
• pages/contact.js 对应 /contact。

3.2 动态路由

Next.js 支持动态路由，适用于具有参数的 URL。例如，假设我们要创建一个用户详情页面，可以在 pages 目录下创建一个 [id].js 文件：

1. 创建 pages/user/[id].js：

   代码：

   import { useRouter } from 'next/router';
   
   export default function User() {
     const router = useRouter();
     const { id } = router.query;
   
     return (
       <div>
         <h1>User Page</h1>
         <p>User ID: {id}</p>
       </div>
     );
   }
   

2. useRouter() 钩子允许我们访问路由参数，例如 id。当你访问 http://localhost:3000/user/123 时，页面会显示 User ID: 123。

3.3 嵌套路由

你也可以通过嵌套文件夹来创建嵌套路由。例如，创建 pages/blog/[slug].js 来处理博客详情页面，[slug] 是动态部分。

3.4 API 路由

在 pages/api/ 目录下可以创建 API 路由，处理后端逻辑。文件名即是 API 路由的名称。

4. 总结

• 文件系统路由：Next.js 自动根据 pages 文件夹中的文件创建路由。
• Link 组件：用于客户端导航，不需要重新加载页面，性能更好。
• 动态路由：通过 [id].js 或 [slug].js 等动态文件名创建带参数的路由。

使用 Next.js 的路由系统和 Link 组件，你可以轻松创建和管理页面之间的导航，并实现动态和静态页面的无缝过渡。