Next.js 15 入门指南

Next.js 15 带来了令人兴奋的新功能和改进。让我们探索如何使用这个强大的框架构建现代 Web 应用。

为什么选择 Next.js？

Next.js 是一个 React 框架，提供：

项目设置

创建新的 Next.js 项目：

npx create-next-app@latest my-app
cd my-app
npm run dev

App Router 结构

App Router 使用基于文件系统的路由：

app/
├── layout.tsx      # 根布局
├── page.tsx        # 首页
├── about/
│   └── page.tsx    # 关于页面
└── blog/
    ├── page.tsx    # 博客列表
    └── [slug]/
        └── page.tsx # 博客文章

服务器组件

默认情况下，App Router 中的所有组件都是服务器组件：

// 这在服务器上运行
async function BlogPosts() {
  const posts = await fetch('https://api.example.com/posts')
  const data = await posts.json()
  
  return (
    <ul>
      {data.map((post: { id: string; title: string }) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

客户端组件

对于交互性，使用 'use client' 指令：

'use client'

import { useState } from 'react'

export function LikeButton() {
  const [likes, setLikes] = useState(0)
  
  return (
    <button onClick={() => setLikes(likes + 1)}>
      ❤️ {likes} 个赞
    </button>
  )
}

数据获取

Next.js 15 简化了数据获取：

async function Page() {
  // 此 fetch 自动缓存
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()
  
  return <div>{data.title}</div>
}

最佳实践

1. 尽可能使用服务器组件 以获得更好的性能
2. 最小化客户端 JavaScript 通过隔离交互性
3. 利用缓存 通过适当的 fetch 配置
4. 实现加载状态 使用 loading.tsx 文件
5. 优雅地处理错误 使用 error.tsx 边界

结论

Next.js 15 为构建现代 Web 应用提供了强大的基础。开始探索并构建令人惊叹的东西吧！

---

祝编码愉快！🚀