Next.js 页面和路由

Next.js 的核心特性之一是其基于文件系统的路由系统。这意味着你不需要编写复杂的路由配置，只需在 pages 目录下创建文件和文件夹，Next.js 就会自动为你生成相应的路由。

创建页面

在 Next.js 中，一个页面就是一个导出了 React 组件的 .js、.jsx、.ts 或 .tsx 文件。

创建首页

pages/index.js 文件对应应用的根路径 /。

// pages/index.js
function HomePage() {
  return <h1>欢迎来到首页</h1>;
}

export default HomePage;

创建其他页面

在 pages 目录下创建新文件即可生成新页面。
- pages/about.js -> /about
- pages/contact.js -> /contact
```
// pages/about.js
function AboutPage() {
  return <h1>关于我们</h1>;
}

export default AboutPage;
```
嵌套路由

你也可以通过创建文件夹来实现嵌套路由。
- pages/blog/index.js -> /blog
- pages/blog/first-post.js -> /blog/first-post

页面跳转

在 Next.js 应用中，你应该使用 next/link 组件来实现客户端路由跳转。Link 组件可以预取页面，实现快速无缝的页面切换。

import Link from 'next/link';

function HomePage() {
  return (
    <div>
      <h1>首页</h1>
      <nav>
        <Link href="/about">
          <a>关于我们</a>
        </Link>
        <Link href="/blog">
          <a>博客</a>
        </Link>
      </nav>
    </div>
  );
}

export default HomePage;

href：目标页面的路径。
Link 组件的子元素可以是一个 <a> 标签或其他任何可交互的元素。

动态路由

Next.js 支持动态路由，允许你根据参数生成页面。要创建动态路由，你需要在文件名或目录名中使用方括号 []。

单个动态参数

例如，创建一个 pages/posts/[id].js 文件，它可以匹配 /posts/1、/posts/abc 等路由。

// pages/posts/[id].js
import { useRouter } from 'next/router';

function PostPage() {
  const router = useRouter();
  const { id } = router.query;

  return <h1>文章 ID: {id}</h1>;
}

export default PostPage;

你可以使用 useRouter hook 来获取路由参数。

多个动态参数

你也可以创建捕获所有路由的动态路由，在文件名中使用 [...slug]。

例如，pages/docs/[...slug].js 可以匹配 /docs/a、/docs/a/b、/docs/a/b/c 等。

// pages/docs/[...slug].js
import { useRouter } from 'next/router';

function DocsPage() {
  const router = useRouter();
  const { slug = [] } = router.query;

  return <h1>文档路径: {slug.join('/')}</h1>;
}

export default DocsPage;

API 路由

Next.js 允许你在 pages/api 目录下创建 API 端点。这使得构建全栈应用变得非常简单。

创建 API 路由

pages/api/user.js 会创建一个 /api/user 的 API 路由。
```
// pages/api/user.js
export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' });
}
```
- req：http.IncomingMessage 的实例，包含请求信息。
- res：http.ServerResponse 的实例，用于发送响应。

动态 API 路由

API 路由也支持动态参数，例如 pages/api/users/[id].js。

// pages/api/users/[id].js
export default function handler(req, res) {
  const { id } = req.query;
  res.status(200).json({ userId: id });
}

总结

Next.js 的路由系统直观而强大。通过文件系统，你可以轻松地创建静态页面、动态页面和 API 路由。使用 next/link 组件可以实现高性能的客户端导航。掌握这些路由概念是开发 Next.js 应用的关键。

上一章：Next.js 项目说明 | 下一章：Next.js 数据获取

#Next.js 页面和路由

#创建页面

#页面跳转

#动态路由

#API 路由

#总结

Next.js 页面和路由

创建页面

页面跳转

动态路由

API 路由

总结