关于 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