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 数据获取