Next.js 完整教程：从入门到精通

Next.js 是一个强大的 React 框架，它提供了许多开箱即用的功能，让你能够构建高性能的现代 Web 应用。

什么是 Next.js？

Next.js 是由 Vercel 开发的一个基于 React 的全栈框架。它提供了以下核心功能：

服务端渲染 (SSR)：提高 SEO 和首屏加载速度
静态站点生成 (SSG)：预渲染页面，获得最佳性能
API 路由：在同一个项目中构建 API 端点
文件系统路由：基于文件结构自动生成路由
图片优化：自动优化图片大小和格式
代码分割：自动进行代码分割，减少包大小

安装和设置

要开始使用 Next.js，你可以使用以下命令创建一个新项目：

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

这将创建一个新的 Next.js 项目并启动开发服务器。

App Router vs Pages Router

Next.js 13 引入了新的 App Router，它提供了更好的开发体验和性能：

App Router 的优势

布局系统：更灵活的布局管理
服务端组件：默认在服务端渲染，减少客户端 JavaScript
流式渲染：更快的页面加载
并行路由：同时渲染多个页面段

目录结构

app/
├── layout.tsx          # 根布局
├── page.tsx           # 首页
├── about/
│   └── page.tsx       # /about 页面
└── blog/
    ├── layout.tsx     # 博客布局
    ├── page.tsx       # /blog 页面
    └── [slug]/
        └── page.tsx   # 动态路由

数据获取

Next.js 提供了多种数据获取方法：

服务端组件中的数据获取

async function getData() {
  const res = await fetch('https://api.example.com/data')
  if (!res.ok) {
    throw new Error('Failed to fetch data')
  }
  return res.json()
}

export default async function Page() {
  const data = await getData()
  return <div>{data.title}</div>
}

客户端数据获取

对于需要交互的数据，使用 use hook 或传统的 useEffect：

'use client'

import { useState, useEffect } from 'react'

export default function ClientPage() {
  const [data, setData] = useState(null)
  
  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(setData)
  }, [])
  
  return <div>{data?.title}</div>
}

样式处理

Next.js 支持多种样式方案：

CSS Modules：局部作用域的 CSS
Tailwind CSS：实用优先的 CSS 框架
Styled-components：CSS-in-JS 解决方案
Sass/SCSS：CSS 预处理器

性能优化

图片优化

使用 Next.js 的 Image 组件自动优化图片：

import Image from 'next/image'

export default function MyPage() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero image"
      width={800}
      height={600}
      priority
    />
  )
}

字体优化

Next.js 13+ 提供了内置的字体优化：

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

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

部署

Next.js 应用可以部署到多个平台：

Vercel：零配置部署
Netlify：静态部署和边缘函数
AWS：使用 AWS Amplify 或 EC2
Docker：容器化部署

最佳实践

使用 TypeScript：提高代码质量和开发体验
合理使用 SSR 和 SSG：根据内容特性选择渲染策略
优化包大小：使用动态导入和代码分割
SEO 优化：正确设置 metadata 和结构化数据
性能监控：使用 Web Vitals 监控性能

总结

Next.js 是一个功能强大的 React 框架，它简化了现代 Web 应用的开发过程。通过合理使用其提供的功能，你可以构建出高性能、SEO 友好的应用。

无论你是初学者还是有经验的开发者，Next.js 都能帮助你更高效地构建 Web 应用。随着框架的不断发展，新功能如 App Router 和服务端组件为开发者提供了更多可能性。