Next.js 入门指南

Next.js 是一个基于 React 的全栈框架，提供了服务端渲染(SSR)、静态站点生成(SSG)等强大功能。

什么是 Next.js？

Next.js 是由 Vercel 开发的 React 框架，它解决了传统 React 应用的许多痛点：

• 🚀 自动路由：基于文件系统的路由
• ⚡ 性能优化：自动代码分割、图片优化
• 🎨 灵活渲染：SSR、SSG、ISR 多种渲染方式
• 📦 零配置：开箱即用的 TypeScript、CSS 支持

App Router vs Pages Router

Next.js 13 引入了全新的 App Router，基于 React Server Components。

Pages Router（旧）

// pages/index.js
export default function Home() {
  return <h1>Hello World</h1>
}

// pages/about.js
export default function About() {
  return <h1>About Us</h1>
}

App Router（新）

// app/page.tsx
export default function Page() {
  return <h1>Hello World</h1>
}

// app/about/page.tsx
export default function AboutPage() {
  return <h1>About Us</h1>
}

核心概念

1. Server Components

默认情况下，App Router 中的所有组件都是 Server Components：

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

export default async function PostsPage() {
  const posts = await getPosts()

  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
        </article>
      ))}
    </div>
  )
}

2. Client Components

需要交互的组件使用 'use client' 指令：

'use client'

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  )
}

3. 动态路由

// app/posts/[slug]/page.tsx
export default function PostPage({ params }: { params: { slug: string } }) {
  return <h1>Post: {params.slug}</h1>
}

// 生成静态路径
export async function generateStaticParams() {
  const posts = await fetch('https://api.example.com/posts').then(res => res.json())

  return posts.map((post) => ({
    slug: post.slug,
  }))
}

数据获取

服务端数据获取

// 自动缓存
async function getData() {
  const res = await fetch('https://api.example.com/data')
  return res.json()
}

// 禁用缓存
async function getData() {
  const res = await fetch('https://api.example.com/data', { cache: 'no-store' })
  return res.json()
}

// 定时重新验证
async function getData() {
  const res = await fetch('https://api.example.com/data', { next: { revalidate: 3600 } })
  return res.json()
}

客户端数据获取

'use client'

import { useEffect, useState } from 'react'

export default function ClientComponent() {
  const [data, setData] = useState(null)

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(res => res.json())
      .then(setData)
  }, [])

  return <div>{data && JSON.stringify(data)}</div>
}

Metadata 和 SEO

// app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'My Website',
  description: 'Welcome to my website',
}

// app/posts/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug)

  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      images: [post.cover],
    },
  }
}

样式方案

1. Tailwind CSS（推荐）

export default function Button() {
  return (
    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      Click Me
    </button>
  )
}

2. CSS Modules

import styles from './button.module.css'

export default function Button() {
  return <button className={styles.button}>Click Me</button>
}

部署

Vercel（推荐）

1. 将代码推送到 GitHub
2. 在 Vercel 中导入项目
3. 自动部署

其他平台

# 构建生产版本
npm run build

# 启动生产服务器
npm run start

最佳实践

1. 优先使用 Server Components：除非需要交互，否则默认使用服务器组件
2. 合理使用缓存：充分利用 Next.js 的缓存机制
3. 代码分割：使用动态导入延迟加载大型组件
4. 图片优化：使用 next/image 组件
5. 字体优化：使用 next/font 自动优化字体

总结

Next.js 提供了构建现代 Web 应用所需的一切工具。通过 App Router 和 Server Components，我们可以更高效地构建高性能的应用。

开始使用 Next.js，体验全新的开发方式吧！