框架 · 2016 年发布
Next.js 是一个 React 框架，提供基于文件的路由、服务端渲染、Server Components 和内置优化，可用于构建网站和全栈 Web 应用。
Next.js 是由 Vercel 开发的开源 React 框架，于 2016 年首次发布。它把单靠 React 时需要自行挑选和组合的路由、服务端渲染、静态生成、数据获取和构建工具整合在一起。推荐使用的 App Router 建立在 React Server Components 之上：app 目录的文件夹结构决定 URL，服务端代码和客户端代码可以在同一个项目中并存。
Next.js 在性能和搜索引擎可见度同样重要的场景中表现突出，广泛用于企业官网、博客和文档站、电商网站以及 SaaS 控制台。每个路由都可以选择在构建时预渲染或在每次请求时渲染，较慢的部分可以通过流式传输逐步发送。Server Actions 和 Route Handlers 负责处理表单和 API，因此一套代码库即可同时覆盖界面和为其服务的后端。图片、字体和脚本优化也已内置。
入门时，先安装 Node.js，用 create-next-app 创建项目，然后依次学习官方文档的 Getting Started 和免费课程 Learn Next.js。熟悉 React 的组件、props 和 Hooks 会让学习轻松许多，如果你刚接触 React，建议先掌握它的基础。TypeScript 无需额外配置即可使用，新项目推荐使用 TypeScript。
app 目录中的文件夹以及 page、layout、loading、error 等特殊文件，定义了 URL、嵌套布局、加载状态和错误界面。
组件默认在服务端渲染，不向浏览器发送 JavaScript；只有标记了 "use client" 的部分才在浏览器中运行。
可按路由组合静态生成、请求时渲染和流式传输，并通过缓存与重新验证让内容保持最新。
图片、字体和脚本组件，自动代码分割，链接预取以及 Turbopack，带来快速的构建和页面刷新。
从 nodejs.org 安装 Node.js 的 LTS 版本，并在终端中确认版本。安装时会附带 npm，也可以使用 pnpm、Yarn 或 Bun。
node --version使用 create-next-app 创建新项目。选择推荐的默认设置后，会同时配置 TypeScript、ESLint、Tailwind CSS 和 App Router。
npx create-next-app@latest my-app进入项目文件夹，启动开发服务器，然后在浏览器中打开 http://localhost:3000。保存文件后页面会立即更新。
cd my-app && npm run dev在 App Router 中，app/page.tsx 是位于 / 的首页。它默认导出的 React 组件就是这个页面，这里是一个返回标题的 Server Component。保存文件后浏览器会立即刷新；添加 app/about/page.tsx 即可新增 /about 页面。
app/page.tsx
export default function Page() {
return <h1>Hello, Next.js!</h1>;
}
npx create-next-app@latest my-app && cd my-app && npm run dev共六章，带你从安装一步步了解 Next.js 的核心概念。
在这里提问、分享经验，交流关于 Next.js 的看法。
还没有讨论。来发起第一个吧。
0 条评论
登录 · 登录后即可发表评论。