Next.js 入门指南：从零到一构建全栈应用

向上的车轮2026-05-30 12:01

1. 引言

Next.js 是当前最流行的 React 全栈框架之一，由 Vercel 团队维护。它提供了服务端渲染（SSR）、静态站点生成（SSG）、API 路由、文件系统路由等开箱即用的能力，让开发者能够快速构建高性能、SEO 友好的 Web 应用。本文将从零开始，带你掌握 Next.js 的核心概念与实战技巧。

https://nextjs.org/

2. 环境搭建

首先确保你的开发环境中已安装 Node.js 18.17 或更高版本。然后通过以下命令创建新项目：

bash 复制代码 
npx create-next-app@latest my-next-app

在安装过程中，你会被问到是否启用 TypeScript、ESLint、Tailwind CSS、App Router 等选项。对于新项目，建议全部选择 "Yes" 以体验最新特性。

安装完成后，进入项目目录并启动开发服务器：

bash 复制代码 
cd my-next-app
npm run dev

打开浏览器访问 http://localhost:3000，你将看到 Next.js 的默认欢迎页面。

3. 路由系统

Next.js 13+ 引入了基于文件系统的 App Router，所有路由定义在 app/ 目录下。

3.1 基础路由

  • app/page.tsx → /
  • app/about/page.tsx → /about
  • app/blog/[slug]/page.tsx → /blog/hello-world

3.2 布局与模板

布局文件 layout.tsx 会在多个页面间共享，不会在导航时重新渲染：

tsx 复制代码 
// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="zh-CN">
      <body>
        <header>网站导航</header>
        <main>{children}</main>
        <footer>版权信息</footer>
      </body>
    </html>
  )
}

4. 数据获取

Next.js 提供了多种数据获取策略，以适应不同的应用场景。

4.1 服务端组件（默认）

App Router 中的组件默认是服务端组件，可以直接使用 async/await 获取数据：

tsx 复制代码 
// 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 (
    <ul>
      {posts.map((post: any) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

4.2 静态生成（SSG）

使用 generateStaticParams 预生成静态页面：

tsx 复制代码 
// app/posts/[id]/page.tsx
export async function generateStaticParams() {
  const posts = await fetch('https://api.example.com/posts').then(res => res.json())
  return posts.map((post: any) => ({ id: String(post.id) }))
}

4.3 增量静态再生（ISR）

通过 revalidate 选项实现按需重新生成：

tsx 复制代码 
const res = await fetch('https://api.example.com/posts', {
  next: { revalidate: 60 } // 每 60 秒重新验证
})

4.4 三种数据获取策略对比

下表从适用场景、性能特点、缓存行为和使用方法四个维度，对比 SSR、SSG 和 ISR 三种策略：

对比维度 SSR（服务端渲染） SSG（静态生成） ISR（增量静态再生）
适用场景 内容频繁更新、需要实时数据（如用户仪表盘、社交动态） 内容相对固定、不常变化（如博客文章、文档站点、营销页面） 内容更新频率中等、需要兼顾性能与实时性（如电商商品页、新闻门户）
性能特点 每次请求都重新渲染，首屏 TTFB 较高，但数据始终最新 构建时预生成 HTML，CDN 直接分发，首屏加载极快 首次访问返回缓存页面，后台触发重新生成，兼顾速度与新鲜度
缓存行为 默认不缓存，可通过 request.cache 或 CDN 层配置缓存策略 构建产物为静态文件，永久缓存，直到下次构建 缓存按 revalidate 时间窗口失效，窗口期内返回旧缓存，后台异步更新
使用方法 服务端组件中直接 fetch（默认行为），或使用 dynamic = 'force-dynamic' 配合 generateStaticParams 预生成路径，fetch 默认缓存 fetch 中设置 next: { revalidate: N }，或使用 generateStaticParams + revalidate 导出

选择建议：

  • 如果页面内容几乎不变 → 用 SSG
  • 如果页面内容实时性要求高 → 用 SSR
  • 如果页面内容偶尔更新，且希望兼顾性能 → 用 ISR

5. API 路由

在 app/api/ 目录下创建路由文件即可定义 API 端点：

tsx 复制代码 
// app/api/hello/route.ts
export async function GET(request: Request) {
  return Response.json({ message: 'Hello, Next.js!' })
}

export async function POST(request: Request) {
  const body = await request.json()
  return Response.json({ received: body })
}

6. 样式方案

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

  • CSS Modules ：文件名以 .module.css 结尾，自动作用域隔离
  • Tailwind CSS ：通过 create-next-app 可选集成
  • CSS-in-JS：支持 styled-components、Emotion 等库

推荐使用 Tailwind CSS 配合 clsx 或 tailwind-merge 处理条件样式：

tsx 复制代码 
import { cn } from '@/lib/utils'

export function Button({ variant }: { variant: 'primary' | 'secondary' }) {
  return (
    <button className={cn(
      'px-4 py-2 rounded',
      variant === 'primary' && 'bg-blue-500 text-white',
      variant === 'secondary' && 'bg-gray-200 text-gray-800'
    )}>
      点击我
    </button>
  )
}

7. 部署

Next.js 应用可以部署到任何支持 Node.js 的平台。推荐使用 Vercel（Next.js 的官方平台）：

  1. 将代码推送到 GitHub 仓库
  2. 登录 Vercel 并导入该仓库
  3. Vercel 会自动检测 Next.js 项目并完成构建部署

也可以使用 Docker 部署：

dockerfile 复制代码 
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

8.中间件实战：请求日志记录

在 Next.js 中，中间件是一个运行在请求到达页面或 API 路由之前的函数，适合做日志记录、重定向、权限校验等操作。下面创建一个简单的中间件，记录每个请求的路径和 HTTP 方法。

在项目根目录下创建 middleware.ts 文件：

tsx 复制代码 
// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl
  const method = request.method

  // 记录请求信息到控制台
  console.log(`[${new Date().toISOString()}] ${method} ${pathname}`)

  // 继续处理请求，不阻断
  return NextResponse.next()
}

// 配置中间件匹配的路由（可选，默认匹配所有路由）
export const config = {
  matcher: [
    /*
     * 匹配所有路径，排除以下内部资源：
     * - _next/static（静态资源）
     * - _next/image（图片优化）
     * - favicon.ico（网站图标）
     */
    '/((?!_next/static|_next/image|favicon.ico).*)',
  ],
}

代码说明：

  • middleware 函数接收 NextRequest 对象，从中提取 pathname（请求路径）和 method（HTTP 方法）。
  • 使用 console.log 将请求信息输出到服务端日志，格式为 [时间戳] GET /api/hello。
  • NextResponse.next() 表示放行请求，不修改响应内容。
  • config.matcher 用于限定中间件生效的路径范围，避免对静态资源等无关路径执行中间件逻辑。

运行效果 ：启动开发服务器后，每次访问页面或调用 API，终端都会输出类似 [2026-05-29T14:30:00.000Z] GET / 的日志，方便调试和监控。

9. 总结

本文介绍了 Next.js 的核心功能：路由系统、数据获取策略、API 路由、样式方案和部署方式。Next.js 的强大之处在于它提供了从开发到部署的全链路解决方案，让开发者可以专注于业务逻辑而非基础设施配置。

下一步建议深入学习：

  • 中间件与认证（实战示例见下方）
  • 图片优化（next/image）
  • 国际化（i18n）
  • 性能监控与分析

希望这篇指南能帮助你快速上手 Next.js，开启全栈开发之旅！

相关推荐
freeinlife'1 小时前
精准秒表计时器实现---基于js
开发语言·前端·javascript
東隅已逝，桑榆非晚1 小时前
新手入门指南：认识 C 语言文件操作（上）
c语言·开发语言·笔记
cany10001 小时前
C++ -- 动态内存分配和释放（new/delete）
开发语言·c++
brycegao3212 小时前
Vue3+Go 全栈项目上线阿里云｜从 0 到 1 踩坑全纪录
开发语言·阿里云·golang
ch.ju2 小时前
Java Programming Chapter 4——cite
java·开发语言
优雅格子衫2 小时前
uniapp 拍照相册选取后超级好用的裁剪组件，增加水印完全自定义
开发语言·前端·javascript·uni-app·vue
Vallelonga2 小时前
Rust 中 unsafe 关键字的语义
开发语言·rust
AI砖家2 小时前
前端 JavaScript 异步处理全方案详解：从回调到 Observable
开发语言·前端·javascript
思麟呀2 小时前
C++工业级日志项目（七）日志器核心
linux·开发语言·c++·windows
热门推荐
01GitHub 镜像站点02DeepSeek V4 + Claude Code thinking mode 400 错误修复方案03【AI】2026 年具身智能模型和世界模型总结04Codex 接入 DeepSeek API 完整配置文档05【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法06CC-Switch & Claude 基于 Linux 服务器安装使用指南07裂开！ChatGPT 居然开始要手机号验证，附详细解决方法08CC-Switch 全平台下载、安装与使用全指南（Windows/macOS/Linux）09几个好用的ip纯净度检测网站102026年AI编程工具终极横评：Cursor vs Claude Code vs Copilot