Next.js 14 实战：构建个人博客的技术选型

为什么选择 Next.js？

在构建个人博客时，我对比了几个主流方案：

| 方案 | 优点 | 缺点 | |------|------|------| | Next.js | SEO 友好、性能优秀、生态丰富 | 学习曲线 | | Gatsby | 静态生成快、插件丰富 | 构建时间长 | | Astro | 轻量、多框架支持 | 生态较新 | | Hugo | 构建速度极快 | Go 模板语法 |

最终选择 Next.js 14，主要考虑：

1. App Router 的优势

// app/posts/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await getPosts()
  return posts.map((post) => ({
    slug: post.slug,
  }))
}

export default async function PostPage({ params }) {
  const post = await getPost(params.slug)
  return <Article post={post} />
}

• Server Components - 减少客户端 JS
• Streaming - 渐进式渲染
• Layouts - 更好的代码组织

2. 性能优化

Next.js 提供了多种优化方案：

import Image from 'next/image'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function Hero() {
  return (
    <div className={inter.className}>
      <Image
        src="/avatar.jpg"
        width={120}
        height={120}
        alt="Avatar"
        priority
      />
    </div>
  )
}

• Image 优化 - 自动 WebP、尺寸调整
• Font 优化 - 自托管字体
• Bundle 分析 - Tree shaking

3. 数据获取策略

// 静态生成 (SSG)
export const revalidate = 3600 // 1 hour

async function getData() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 3600 }
  })
  return res.json()
}

支持多种渲染模式：

• SSG - 构建时生成
• ISR - 增量静态再生
• SSR - 服务端渲染
• CSR - 客户端渲染

项目结构

app/
├── layout.tsx          # 全局布局
├── page.tsx            # 首页
├── posts/
│   ├── page.tsx        # 文章列表
│   └── [slug]/
│       └── page.tsx    # 文章详情
├── resources/
│   └── page.tsx        # 资源库
└── api/
    └── submit/
        └── route.ts    # API 路由

components/
├── ui/                 # UI 组件
├── layout/             # 布局组件
└── features/           # 功能组件

lib/
├── posts.ts            # 文章数据处理
├── resources.ts        # 资源数据处理
└── utils.ts            # 工具函数

性能测试结果

使用 Lighthouse 测试：

• Performance: 95
• Accessibility: 98
• Best Practices: 100
• SEO: 100

部署方案

选择 Vercel 部署：

# 安装 Vercel CLI
npm i -g vercel

# 部署
vercel --prod

优势：

• 零配置 - 自动识别 Next.js
• 全球 CDN - 边缘缓存
• 预览部署 - 每个 PR 自动生成预览
• Analytics - 内置性能分析

总结

Next.js 14 是构建现代博客的绝佳选择，尤其是：

1. ✅ 需要良好的 SEO
2. ✅ 追求极致性能
3. ✅ 希望灵活的数据获取
4. ✅ 需要丰富的生态系统

下一篇将分享 Tailwind CSS 的使用技巧 👋