``组件是Next.js应用中进行页面跳转的首选。它不仅封装了底层的逻辑，还内置了性Neng优化。当用户将链接放入视口时Next.js会自动在后台预取该页面的代码。这意味着，当用户真正点击的那一刻，页面几乎是瞬间呈现的，这种“零延迟”的感觉是提升用户留存的关键。

import Link from 'next/link'
export default function Navigation {
  return (
    
  )
}

当然实际开发中我们往往需要根据当前路径高亮显示菜单项。这时候，结合`usePathname` hook就Neng轻松实现：

'use client'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
const navItems = 
export function Navbar {
  const pathname = usePathname
  return (
    
  )
}

虽然``组件覆盖了大部分场景，但在某些情况下——比如表单提交成功后跳转、或者需要复杂的逻辑判断才Neng决定去向时——我们需要编程式导航。Next.js提供了`useRouter` hook，但请务必注意：在App Router中，它必须从`next/navigation`导入，而不是旧版的`next/router`。

'use client'
import { useRouter } from 'next/navigation'
export default function LoginForm {
  const router = useRouter
  const handleSubmit = async  => {
    const result = await login
    if  {
      // 使用 replace 避免用户后退时返回登录页
      router.replace
    }
  }
  return 
...
}

这里有一个小细节：`router.replace`和`router.push`的区别在于前者会替换当前的历史记录条目。这对于登录页这种“单向门”场景非常有用，防止用户点击后退按钮又回到了登录界面。

真实的业务场景中，URL往往包含动态的部分，比如博客文章的slug、商品的ID等。Next.js通过文件夹命名约定``优雅地解决了这个问题。

假设我们有一个博客详情页路径为`/blog/my-first-post`。在服务端组件中，我们Ke以直接通过`params` prop获取这个`slug`。需要注意的是在Zui新的Next.js版本中，`params`是一个Promise，需要使用`await`解包。

// src/app/blog//page.tsx
export default async function BlogPost({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const post = await getPostBySlug
  return (
      {/* 文章内容 */}
  )
}

而在客户端组件中，我们则使用`useParams` hook：

'use client'
import { useParams } from 'next/navigation'
export function PostActions {
  const params = useParams<{ slug: string }>
  // params.slug 即为当前 URL 中的路径参数值
  return 分享文章 {params.slug}
}

除了路径参数，URL中的`?`后面的查询参数同样重要。它们常用于筛选、搜索和分页。Next.js允许我们在服务端组件中直接接收`searchParams`，这极大地简化了服务端渲染的逻辑。

// src/app/blog/page.tsx
export default async function BlogPage({
  searchParams,
}: {
  searchParams: Promise<{ page?: string; tag?: string; q?: string }>
}) {
  const { page = '1', tag, q } = await searchParams
  const posts = await getPosts({
    page: parseInt,
    tag,
    query: q,
  })
  return (
    

      {q && 
搜索结果："{q}"
}
      {/* 文章列表 */}
    
  )
}

在客户端，处理查询参数稍微复杂一点，通常需要结合`useSearchParams`和`useRouter`来实现无刷新geng新。比如下面这个标签筛选组件，点击标签时只geng新URL参数而不刷新页面：

'use client'
import { useSearchParams, useRouter, usePathname } from 'next/navigation'
interface TagFilterProps {
  tags: string
}
export function TagFilter {
  const searchParams = useSearchParams
  const pathname = usePathname
  const router = useRouter
  const currentTag = searchParams.get
  const handleTagClick =  => {
    const params = new URLSearchParams)
    if  {
      params.delete  // 取消选中
    } else {
      params.set
      params.delete  // 切换标签时重置页码
    }
    router.push}`)
  }
  return (
    

      {tags.map(tag => (
         handleTagClick}
          className={`px-3 py-1 rounded-full text-sm ${
            tag === currentTag
              ? 'bg-blue-600 text-white'
              : 'bg-gray-200 text-gray-700'
          }`}
       >
          {tag}
        
      ))}
    
  )
}

Next.js路由系统Zui令人兴奋的地方，在于它突破了传统单页面应用的限制，引入了并行路由和拦截路由的概念。这为构建复杂交互提供了无限可Neng。

想象一下一个后台管理界面左侧是导航，中间是数据列表，右侧可Neng需要同时显示实时统计图表。Ru果这些模块依赖不同的数据源，串行加载会导致页面整体变慢。并行路由允许我们在同一个布局中同时渲染多个独立的页面。

通过使用`@`前缀定义插槽，我们Ke以将页面拆解：

src/app/dashboard/
├── layout.tsx           # 布局组件
├── page.tsx             # 主页面
├── @stats/              # 统计插槽
│   ├── page.tsx
│   └── loading.tsx
├── @chart/              # 图表插槽
│   ├── page.tsx
│   └── loading.tsx
└── @recent/             # Zui新订单插槽
    ├── page.tsx
    └── loading.tsx

在布局中，这些插槽会作为props传入：

// src/app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
  stats,
  chart,
  recent,
}: {
  children: React.ReactNode
  stats: React.ReactNode
  chart: React.ReactNode
  recent: React.ReactNode
}) {
  return (
    

      
{children}
      
{stats}
      
{chart}
      
{recent}
    
  )
}

这种架构的核心价值在于解耦。`@stats`模块加载慢不会阻塞`@chart`的显示，每个部分dou有独立的Loading和Error状态，用户体验得到了极大的提升。

你是否注意过Instagram或Dribbble的交互？在信息流中点击一张图片，它会以模态框的形式弹出，但URL却变了。Ru果你直接刷新这个URL，或者把链接发给朋友，它展示的却是一个完整的详情页。这就是拦截路由的魔力。

它通过特殊的文件夹命名来拦截特定路由的渲染。例如我们要实现`/photos`列表点击弹出`/photos/`详情：

src/app/
├── photos/
│   ├── page.tsx                   # 列表页
│   └── /
│       └── page.tsx               # 默认详情页
└── @modal/                        # 模态框插槽
    └── photos/                # 拦截上一层级的 photos 路由
        └── /
            └── page.tsx           # 拦截后的模态框组件

当用户在列表页点击时Next.js会匹配到`@modal/photos/`，将内容渲染在模态框插槽中，而背景保持不变。当用户直接访问或刷新时模态框插槽为空，则回退到渲染默认的`photos//page.tsx`。

为了处理模态框关闭后的状态，我们通常还需要一个`default.tsx`：

// src/app/@modal/default.tsx
export default function Default {
  return null
}

这种设计既保证了URL的可分享性，又维持了应用上下文的连续性，是现代Web应用交互的典范。

路由不仅仅是展示内容，还需要保护内容。中间件是Next.js请求处理流水线中的第一道防线，它在页面渲染之前执行，非常适合用来Zuo权限验证。

比如我们要保护`/dashboard`路径，未登录用户一律重定向到登录页：

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { auth } from '@/lib/auth'
export default async function middleware {
  const session = await auth
  const { pathname } = request.nextUrl
  const protectedPaths = 
  const isProtected = protectedPaths.some)
  if  {
    const loginUrl = new URL
    loginUrl.searchParams.set
    return NextResponse.redirect
  }
  if  {
    return NextResponse.redirect)
  }
  return NextResponse.next
}
export const config = {
  matcher: ,
}

除了中间件，Next.js还提供了便捷的重定向函数。在服务端组件中，Ru果发现数据不存在或权限不足，Ke以直接调用`redirect`或`permanentRedirect`来中断渲染并跳转。

对于动态路由，Ru果参数是有限的，我们完全Ke以在构建时就把这些页面全部生成好。这样用户访问时直接返回静态HTML，速度极快。

这通过`generateStaticParams`函数实现：

// src/app/blog//page.tsx
// 构建阶段执行，返回需要预生成的所有参数组合
export async function generateStaticParams {
  const posts = await getAllPosts
  return posts.map(post => ({
    slug: post.slug
  }))
}
export default async function BlogPost({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const post = await getPostBySlug
  return (
      {/* ... */}
  )
}

Next.js的路由系统远不止是“文件即路由”那么简单。从基础的``导航，到动态参数的精细控制，再到并行路由与拦截路由的高级交互模式，它为开发者提供了一套从简单到复杂的完整工具链。掌握这套系统，意味着你Neng够以geng少的代码、geng清晰的逻辑，构建出性Neng卓越且体验极佳的Web应用。

当然光有路由还不够，数据才是应用的灵魂。在接下来的章节中，我们将深入探讨Next.js的数据获取与缓存策略，kankan它是如何彻底改变前端开发的数据交互模式的。