Next.js 14 实战：构建高性能个人网站

为什么选择 Next.js 14？

Next.js 14 带来了许多令人兴奋的新特性：

• App Router - 全新的路由系统
• Server Components - 服务端组件减少客户端 JS
• Turbopack - 更快的构建速度
• 改进的 Image 组件 - 自动优化图片

项目初始化

npx create-next-app@latest my-site --typescript --tailwind --app

视频教程

下面是我录制的详细视频教程，讲解了完整的开发过程：

核心概念解析

1. Server Components vs Client Components

// Server Component (默认)
export default function Page() {
  return <h1>This renders on the server</h1>;
}

// Client Component
'use client';
export default function InteractiveButton() {
  return <button onClick={() => alert('clicked')}>Click me</button>;
}

2. 路由系统

App Router 使用文件系统路由：

app/
├── page.tsx          # /
├── about/
│   └── page.tsx      # /about
├── blog/
│   ├── page.tsx      # /blog
│   └── [slug]/
│       └── page.tsx  # /blog/:slug

3. 数据获取

async function getPosts() {
  const res = await fetch('https://api.example.com/posts');
  return res.json();
}

export default async function BlogPage() {
  const posts = await getPosts();
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

性能优化技巧

1. 使用 next/image 自动优化图片
2. 配置 revalidate 实现 ISR
3. 合理使用缓存策略
4. 代码分割和懒加载

部署到 Vercel

npm i -g vercel
vercel --prod

总结

Next.js 14 是构建现代网站的绝佳选择。通过 Server Components，我们可以大幅减少发送到客户端的 JavaScript，同时获得更好的性能和 SEO。

---

有问题欢迎在评论区留言讨论！