Next.js 简介（手把手讲解）

Next.js 简介与核心概念

Next.js 是一个基于 React 的全栈框架，通过预渲染和服务器端渲染（SSR）能力，解决单页应用（SPA）的 SEO 和加载性能问题。它像一个自动化工具箱，能同时处理静态页面生成和动态数据渲染，适合构建从简单博客到复杂电商系统的所有类型应用。

基础语法示例

页面路由

pages 目录下的文件结构自动映射 URL 路径

// pages/index.js
// 默认导出 React 组件作为主页
export default function Home() {
  return <h1>Welcome to Next.js 13</h1>
}

API 路由

创建可直接访问的 RESTful API 端点

// pages/api/hello.js
// 接收 HTTP 请求并返回 JSON 数据
export default function handler(req, res) {
  res.status(200).json({ name: 'Next.js' })
}

动态导入

按需加载组件实现代码分割

// pages/dynamic.js
import dynamic from 'next/dynamic'
// 使用 suspense 加载异步组件
const DynamicComponent = dynamic(() => import('../components/HeavyComponent'), {
  loading: () => <p>加载中...</p>
})

进阶特性解析

特性	描述	使用场景	示例代码
SSG (静态生成)	构建时生成 HTML 页面	静态博客/文档站点	`export async function getStaticProps() { return { props: { data } } }`
SSR (服务端渲染)	每次请求动态生成 HTML	电商价格/实时数据页面	`export async function getServerSideProps() { return { props: { user } } }`
Hybrid 路由	同时支持 SSG/SSR	多种内容类型混合站点	`export const config = { dynamic: 'force-static' }`
TypeScript 支持	开箱即用的类型系统	大型团队项目	在 next.config.js 中添加 `type: 'ts'`
ES Modules	支持原生模块系统	现代 JavaScript 开发	使用 `import` 替代 `require`

实战应用案例

博客系统构建

// pages/posts/[slug].js
import { getPostBySlug } from '../lib/posts'
// 使用 getStaticPaths 实现动态路由预渲染
export async function getStaticPaths() {
  const slugs = ['nextjs-intro', 'react-basics']
  return {
    paths: slugs.map(slug => ({ params: { slug } })),
    fallback: 'blocking'
  }
}

export async function getStaticProps({ params }) {
  const post = getPostBySlug(params.slug)
  return { props: { post }, revalidate: 60 }
}

电商网站集成

// pages/products.js
import { getProducts } from '../lib/db'
// 服务端渲染获取实时产品数据
export async function getServerSideProps() {
  const products = await getProducts()
  return { props: { products } }
}

常见误区与解决方案

滥用 SSG 导致构建时间过长
限制：仅对高频访问页面使用 getStaticProps，低频页面改用 getServerSideProps
过度使用 SSR 增加服务器负载
优化：通过 getStaticProps 配合 revalidate 实现缓存更新，减少每次请求的重新渲染
忽略路由匹配规则
坑点：pages/api/ 目录下的文件会自动创建 API 路由，与普通页面路由冲突时优先使用 API 路由
错误处理不规范
建议：在 getStaticProps 中使用 try/catch，返回 notFound: true 而不是抛出错误

总结

Next.js 13 通过自动化的路由系统和灵活的渲染策略，为开发者提供了从静态生成到服务端渲染的完整解决方案，是构建现代全栈应用的高效工具。