第四章：Next.js 基础

页面和路由

Next.js 提供了一种基于文件系统的路由机制，使得创建和管理路由变得非常简单。本节将介绍 Next.js 中的页面和路由的基本概念、动态路由以及路由跳转的方法。

1. 文件系统路由

在 Next.js 中，路由是通过文件系统的结构自动生成的。pages 目录下的每个文件都会自动映射为一个路由。例如：

  • pages/index.js → /（首页）
  • pages/about.js → /about
  • pages/blog/first-post.js → /blog/first-post

示例代码

// pages/about.js
export default function About() {
  return <h1>About Page</h1>;
}

2. 动态路由

Next.js 支持动态路由，可以通过文件名中的方括号 [] 来定义动态参数。例如：

  • pages/blog/[slug].js → 匹配 /blog/1、/blog/nextjs-tutorial 等路径。
  • pages/categories/[category]/[id].js → 匹配 /categories/react/123 等路径。

示例代码

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

export default function BlogPost() {
  const router = useRouter();
  const { slug } = router.query;

  return <h1>Blog Post: {slug}</h1>;
}

3. 路由跳转

Next.js 提供了两种方式实现路由跳转：

  1. <Link> 组件：用于客户端导航，避免页面刷新。
  2. useRouter Hook：用于编程式导航。
import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <Link href="/about">
        <a>About Page</a>
      </Link>
    </div>
  );
}

使用 useRouter Hook

import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter();

  const navigateToAbout = () => {
    router.push('/about');
  };

  return (
    <button onClick={navigateToAbout}>Go to About Page</button>
  );
}

4. 嵌套路由

Next.js 支持嵌套路由，可以通过文件夹结构实现。例如：

  • pages/dashboard/settings.js → /dashboard/settings
  • pages/dashboard/profile.js → /dashboard/profile

5. 路由钩子

Next.js 提供了一些路由钩子，可以在路由变化时执行逻辑：

  • router.events.on('routeChangeStart', callback)：路由开始变化时触发。
  • router.events.on('routeChangeComplete', callback)：路由变化完成时触发。

示例代码

import { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function Page() {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url) => {
      console.log('Navigating to:', url);
    };

    router.events.on('routeChangeStart', handleRouteChange);
    return () => {
      router.events.off('routeChangeStart', handleRouteChange);
    };
  }, []);

  return <div>Page Content</div>;
}

总结

Next.js 的文件系统路由机制简化了路由管理，支持动态路由、嵌套路由和编程式导航。通过 <Link> 组件和 useRouter Hook，可以轻松实现页面跳转和路由逻辑控制。

Last Updated::