1. 引言Next.js 是当前最流行的 React 全栈框架之一由 Vercel 团队维护。它提供了服务端渲染SSR、静态站点生成SSG、API 路由、文件系统路由等开箱即用的能力让开发者能够快速构建高性能、SEO 友好的 Web 应用。本文将从零开始带你掌握 Next.js 的核心概念与实战技巧。https://nextjs.org/2. 环境搭建首先确保你的开发环境中已安装 Node.js 18.17 或更高版本。然后通过以下命令创建新项目npx create-next-applatest my-next-app在安装过程中你会被问到是否启用 TypeScript、ESLint、Tailwind CSS、App Router 等选项。对于新项目建议全部选择 “Yes” 以体验最新特性。安装完成后进入项目目录并启动开发服务器cdmy-next-appnpmrun dev打开浏览器访问http://localhost:3000你将看到 Next.js 的默认欢迎页面。3. 路由系统Next.js 13 引入了基于文件系统的 App Router所有路由定义在app/目录下。3.1 基础路由app/page.tsx→/app/about/page.tsx→/aboutapp/blog/[slug]/page.tsx→/blog/hello-world3.2 布局与模板布局文件layout.tsx会在多个页面间共享不会在导航时重新渲染// app/layout.tsx export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( html langzh-CN body header网站导航/header main{children}/main footer版权信息/footer /body /html ) }4. 数据获取Next.js 提供了多种数据获取策略以适应不同的应用场景。4.1 服务端组件默认App Router 中的组件默认是服务端组件可以直接使用async/await获取数据// 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预生成静态页面// 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选项实现按需重新生成const res await fetch(https://api.example.com/posts, { next: { revalidate: 60 } // 每 60 秒重新验证 })4.4 三种数据获取策略对比下表从适用场景、性能特点、缓存行为和使用方法四个维度对比 SSR、SSG 和 ISR 三种策略对比维度SSR服务端渲染SSG静态生成ISR增量静态再生适用场景内容频繁更新、需要实时数据如用户仪表盘、社交动态内容相对固定、不常变化如博客文章、文档站点、营销页面内容更新频率中等、需要兼顾性能与实时性如电商商品页、新闻门户性能特点每次请求都重新渲染首屏 TTFB 较高但数据始终最新构建时预生成 HTMLCDN 直接分发首屏加载极快首次访问返回缓存页面后台触发重新生成兼顾速度与新鲜度缓存行为默认不缓存可通过request.cache或 CDN 层配置缓存策略构建产物为静态文件永久缓存直到下次构建缓存按revalidate时间窗口失效窗口期内返回旧缓存后台异步更新使用方法服务端组件中直接fetch默认行为或使用dynamic force-dynamic配合generateStaticParams预生成路径fetch默认缓存fetch中设置next: { revalidate: N }或使用generateStaticParamsrevalidate导出选择建议如果页面内容几乎不变 → 用SSG如果页面内容实时性要求高 → 用SSR如果页面内容偶尔更新且希望兼顾性能 → 用ISR5. API 路由在app/api/目录下创建路由文件即可定义 API 端点// 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处理条件样式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 的平台。推荐使用 VercelNext.js 的官方平台将代码推送到 GitHub 仓库登录 Vercel 并导入该仓库Vercel 会自动检测 Next.js 项目并完成构建部署也可以使用 Docker 部署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文件// 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请求路径和methodHTTP 方法。使用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开启全栈开发之旅
Next.js 入门指南：从零到一构建全栈应用
1. 引言Next.js 是当前最流行的 React 全栈框架之一由 Vercel 团队维护。它提供了服务端渲染SSR、静态站点生成SSG、API 路由、文件系统路由等开箱即用的能力让开发者能够快速构建高性能、SEO 友好的 Web 应用。本文将从零开始带你掌握 Next.js 的核心概念与实战技巧。https://nextjs.org/2. 环境搭建首先确保你的开发环境中已安装 Node.js 18.17 或更高版本。然后通过以下命令创建新项目npx create-next-applatest my-next-app在安装过程中你会被问到是否启用 TypeScript、ESLint、Tailwind CSS、App Router 等选项。对于新项目建议全部选择 “Yes” 以体验最新特性。安装完成后进入项目目录并启动开发服务器cdmy-next-appnpmrun dev打开浏览器访问http://localhost:3000你将看到 Next.js 的默认欢迎页面。3. 路由系统Next.js 13 引入了基于文件系统的 App Router所有路由定义在app/目录下。3.1 基础路由app/page.tsx→/app/about/page.tsx→/aboutapp/blog/[slug]/page.tsx→/blog/hello-world3.2 布局与模板布局文件layout.tsx会在多个页面间共享不会在导航时重新渲染// app/layout.tsx export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( html langzh-CN body header网站导航/header main{children}/main footer版权信息/footer /body /html ) }4. 数据获取Next.js 提供了多种数据获取策略以适应不同的应用场景。4.1 服务端组件默认App Router 中的组件默认是服务端组件可以直接使用async/await获取数据// 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预生成静态页面// 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选项实现按需重新生成const res await fetch(https://api.example.com/posts, { next: { revalidate: 60 } // 每 60 秒重新验证 })4.4 三种数据获取策略对比下表从适用场景、性能特点、缓存行为和使用方法四个维度对比 SSR、SSG 和 ISR 三种策略对比维度SSR服务端渲染SSG静态生成ISR增量静态再生适用场景内容频繁更新、需要实时数据如用户仪表盘、社交动态内容相对固定、不常变化如博客文章、文档站点、营销页面内容更新频率中等、需要兼顾性能与实时性如电商商品页、新闻门户性能特点每次请求都重新渲染首屏 TTFB 较高但数据始终最新构建时预生成 HTMLCDN 直接分发首屏加载极快首次访问返回缓存页面后台触发重新生成兼顾速度与新鲜度缓存行为默认不缓存可通过request.cache或 CDN 层配置缓存策略构建产物为静态文件永久缓存直到下次构建缓存按revalidate时间窗口失效窗口期内返回旧缓存后台异步更新使用方法服务端组件中直接fetch默认行为或使用dynamic force-dynamic配合generateStaticParams预生成路径fetch默认缓存fetch中设置next: { revalidate: N }或使用generateStaticParamsrevalidate导出选择建议如果页面内容几乎不变 → 用SSG如果页面内容实时性要求高 → 用SSR如果页面内容偶尔更新且希望兼顾性能 → 用ISR5. API 路由在app/api/目录下创建路由文件即可定义 API 端点// 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处理条件样式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 的平台。推荐使用 VercelNext.js 的官方平台将代码推送到 GitHub 仓库登录 Vercel 并导入该仓库Vercel 会自动检测 Next.js 项目并完成构建部署也可以使用 Docker 部署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文件// 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请求路径和methodHTTP 方法。使用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开启全栈开发之旅
