Next.js 14 App Router 最佳实践

Next.js 14 的 App Router 是一个革命性的路由系统，它基于 React Server Components 构建，为现代 Web 应用提供了更强大的功能和更好的性能。

什么是 App Router？

App Router 是 Next.js 13+ 引入的新路由系统，它使用文件系统路由，但提供了更强大的功能：

• 服务器组件：默认在服务器端渲染，减少客户端 JavaScript
• 嵌套布局：支持复杂的布局结构
• 流式渲染：提供更好的用户体验
• 数据获取：更灵活的数据获取方式

项目结构设计

推荐的目录结构

app/
├── layout.tsx          # 根布局
├── page.tsx            # 首页
├── loading.tsx         # 全局加载组件
├── error.tsx           # 全局错误组件
├── not-found.tsx       # 404 页面
├── blog/
│   ├── layout.tsx      # 博客布局
│   ├── page.tsx        # 博客列表
│   └── [id]/
│       └── page.tsx    # 博客详情
└── about/
    └── page.tsx        # 关于页面

数据获取策略

服务器组件数据获取

// app/blog/page.tsx
async function getBlogPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 3600 } // 缓存1小时
  })
  
  if (!res.ok) {
    throw new Error('Failed to fetch posts')
  }
  
  return res.json()
}

export default async function BlogPage() {
  const posts = await getBlogPosts()
  
  return (
    <div>
      {posts.map(post => (
        <BlogCard key={post.id} post={post} />
      ))}
    </div>
  )
}

缓存优化

静态生成

// 生成静态页面
export async function generateStaticParams() {
  const posts = await getBlogPosts()
  
  return posts.map((post) => ({
    id: post.id.toString(),
  }))
}

// 静态生成配置
export const revalidate = 3600 // 1小时重新验证

性能优化技巧

代码分割

import dynamic from 'next/dynamic'

// 动态导入组件
const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <p>Loading...</p>,
  ssr: false // 禁用服务端渲染
})

图片优化

import Image from 'next/image'

export default function BlogPost({ post }) {
  return (
    <div>
      <Image
        src={post.image}
        alt={post.title}
        width={800}
        height={400}
        priority // 关键图片优先加载
      />
    </div>
  )
}

总结

Next.js 14 App Router 提供了强大的功能来构建现代 Web 应用。通过合理使用服务器组件、布局系统、数据获取策略和缓存优化，我们可以创建高性能、可维护的应用程序。

关键要点：

• 充分利用服务器组件的优势
• 合理设计布局层次结构
• 选择合适的缓存策略
• 实现完善的错误处理
• 持续优化性能