Next.js 教程（完整教程）

Next.js 教程：快速搭建静态与服务器渲染应用

Next.js 是一个基于 React 的轻量级框架，支持开箱即用的服务器端渲染（SSR）和静态生成（SSG）。它通过文件系统路由和内置 API 路由，让开发者无需配置即可构建高性能的 Web 应用。

核心概念

Next.js 通过统一的文件结构自动处理路由，每个 pages 目录下的文件对应一个路由路径。例如 pages/index.js 会映射到根路径 /，这种约定优于配置的设计能显著提升开发效率。框架内置的 next export 命令可将应用转为纯静态文件，适合部署到 CDN。

基础语法

项目初始化

npx create-next-app my-project

// 通过 npx 快速创建项目，包含基础文件结构、样式和依赖

页面结构

// pages/index.js
export default function Home() {
  return <h1>Next.js 教程</h1>
}

// 页面组件默认导出函数，返回 JSX 即可自动注册路由

动态路由

// pages/posts/[id].js
import { useRouter } from 'next/router'

export default function Post() {
  const router = useRouter()
  return <h1>文章 ID: {router.query.id}</h1>
}

// 使用方括号包裹文件名可创建动态路由，通过 useRouter 获取路径参数

进阶特性

数据获取方法

API 路由

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Next.js 教程 API 示例' })
}

// 在 pages/api 目录创建的文件会自动注册为 API 接口，处理 HTTP 请求

布局组件

// components/Layout.js
export default function Layout({ children }) {
  return (
    <div>
      <header>通用头部</header>
      {children}
      <footer>通用底部</footer>
    </div>
  )
}

// 通过组合布局组件实现页面复用，建议使用 React Context 或状态管理库传递共享数据

实战应用

搭建博客首页

// pages/index.js
import Link from 'next/link'

export default function Home({ posts }) {
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>
          <Link href={`/posts/${post.id}`}>
            <a>{post.title}</a>
          </Link>
        </li>
      ))}
    </ul>
  )
}

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts')
  const posts = await res.json()
  return { props: { posts }, revalidate: 60 } // 60 秒后重新生成静态页面
}

注意事项

1. 避免在 getStaticProps 中使用客户端 API：该方法仅在构建时执行，无法访问浏览器环境
2. 动态路由需要预定义参数：使用 getStaticPaths 时必须明确指定可能的参数值
3. SSR 页面性能开销：getServerSideProps 会导致每次请求都执行数据获取，建议仅在必要时使用
4. 静态导出限制：使用 next export 时，页面必须使用 getStaticProps 或 getStaticPaths 获取数据

总结

Next.js 教程通过简洁的文件结构和自动化的数据获取机制，让开发者能快速构建兼具 SEO 优化和交互性的 Web 应用。