Next.js 的路由系统是如何工作的？ - 面试题

Next.js 的路由系统基于文件系统，提供了简单而强大的路由管理方式。以下是 Next.js 路由系统的核心概念：

1. 基础路由

在 pages 目录下，每个文件都会自动成为一个路由。

shell
pages/
  index.js          → / (首页)
  about.js          → /about
  blog/
    index.js        → /blog
    post.js         → /blog/post

2. 动态路由

使用方括号 [] 创建动态路由段，可以匹配任何值。

shell
pages/
  blog/
    [slug].js       → /blog/hello-world, /blog/nextjs-tutorial
  users/
    [id]/
      profile.js    → /users/123/profile

获取动态路由参数：

javascript
export default function BlogPost({ params }) {
  // Next.js 13+ App Router
  return <div>Post: {params.slug}</div>;
}

// 或者使用 getStaticPaths 和 getStaticProps (Pages Router)
export async function getStaticPaths() {
  const posts = await getAllPosts();
  return {
    paths: posts.map(post => ({
      params: { slug: post.slug }
    })),
    fallback: false
  };
}

export async function getStaticProps({ params }) {
  const post = await getPostBySlug(params.slug);
  return { props: { post } };
}

3. 捕获所有路由

使用 [...param] 语法可以捕获多层路径。

shell
pages/
  docs/
    [...path].js    → /docs/a, /docs/a/b, /docs/a/b/c

javascript
export default function DocsPage({ params }) {
  // params.path 是一个数组，如 ['a', 'b', 'c']
  return <div>Path: {params.path.join('/')}</div>;
}

4. 可选的捕获所有路由

使用 [[...param]] 语法可以创建可选的捕获所有路由，即使没有参数也能匹配。

shell
pages/
  shop/
    [[...category]].js  → /shop, /shop/clothes, /shop/clothes/men

5. 嵌套路由

Next.js 支持嵌套路由，可以通过布局组件实现。

javascript
// pages/blog/index.js
export default function Blog() {
  return (
    <div>
      <h1>Blog</h1>
      <PostList />
    </div>
  );
}

// pages/blog/[slug].js
export default function BlogPost() {
  return (
    <div>
      <h1>Blog Post</h1>
      <PostContent />
    </div>
  );
}

6. 路由跳转

Next.js 提供了多种路由跳转方式：

使用 Link 组件（推荐）

javascript
import Link from 'next/link';

export default function Navigation() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/blog/nextjs">Blog Post</Link>
    </nav>
  );
}

使用 useRouter Hook

javascript
import { useRouter } from 'next/router';

export default function Button() {
  const router = useRouter();
  
  const handleClick = () => {
    router.push('/about');
    // 或者 router.replace('/about') 替换当前历史记录
  };
  
  return <button onClick={handleClick}>Go to About</button>;
}

7. 路由中间件

Next.js 12+ 支持路由中间件，可以在请求到达页面之前执行逻辑。

javascript
// middleware.js
export function middleware(request) {
  const url = request.nextUrl;
  
  if (url.pathname.startsWith('/admin') && !request.cookies.get('token')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  
  return NextResponse.next();
}

8. 路由组（App Router）

Next.js 13+ 的 App Router 引入了路由组概念，使用括号 () 创建不会影响 URL 的路由组。

shell
app/
  (marketing)/
    about/
      page.js      → /about
    contact/
      page.js      → /contact
  (dashboard)/
    layout.js      → 共享布局
    settings/
      page.js      → /settings

9. 并行路由和拦截路由（App Router）

App Router 还支持高级路由模式：

并行路由：同时渲染多个页面
拦截路由：在不改变 URL 的情况下显示其他内容

最佳实践

保持路由简洁：使用有意义的 URL 结构
使用动态路由：对于相似内容的页面使用动态路由
合理使用捕获所有路由：只在必要时使用
利用 Link 组件：提供更好的用户体验和性能
使用路由中间件：处理认证、重定向等逻辑

Next.js 的路由系统设计简洁而强大，通过文件系统自动管理路由，大大简化了路由配置工作，同时提供了足够的灵活性来处理复杂的路由需求。