关于 Next.js
Next.js 是一个基于 React 的全栈 Web 框架,
为生产环境提供了开箱即用的最佳实践和开发体验。
什么是 Next.js?
Next.js 由 Vercel 公司开发和维护,是构建现代 Web 应用最流行的 React 框架。它在 React 的基础上提供了路由、数据获取、渲染策略、性能优化等生产级功能,让你专注于构建应用逻辑,而非配置工具链。
Next.js 提供了两种路由模式:App Router(推荐)和 Pages Router。App Router 基于 React Server Components,支持布局嵌套、流式渲染、 并行路由等现代范式,是构建复杂应用的首选方案。
核心特性
文件系统路由
基于 app 目录的文件结构自动生成路由。只需创建文件夹和 page.tsx 文件,无需手动配置路由表。支持动态路由、路由组、并行路由和拦截路由。
服务端渲染 (SSR)
页面在服务器端渲染为 HTML,提升首屏加载速度和 SEO。用户看到的是完整页面,而非空白等待 JavaScript 加载。
静态生成 (SSG)
在构建时预渲染页面为静态 HTML,可部署到 CDN 实现极致性能。结合增量静态再生成 (ISR),可在运行时更新静态内容。
React Server Components
默认使用 React Server Components,组件在服务器端运行,减少客户端 JavaScript 体积。零客户端 JavaScript 的组件也能实现完整交互。
Turbopack
基于 Rust 的下一代打包工具,开发模式下编译速度提升 10 倍以上。热模块替换 (HMR) 几乎即时完成,极大提升开发体验。
全栈能力
通过 Route Handlers 和 Server Actions 构建 API 端点,直接在组件中处理数据变更。无需额外搭建后端服务即可构建完整应用。
关键概念
快速开始
# 在终端中运行以下命令创建一个新的 Next.js 项目
npx create-next-app@latest my-app# 进入项目并启动开发服务器
cd my-appnpm run dev# 然后在浏览器中打开 http://localhost:3000