开始使用 Next.js

欢迎来到 Next.js 学习之旅！本教程将带你从零开始创建你的第一个 Next.js 应用。

什么是 Next.js？

Next.js 是一个基于 React 全栈框架，由 Vercel 开发和维护，那么它有什么优势呢？ 官网地址: https://nextjs.org/ 中文网站：https://nextjscn.org/

• SSR：服务端渲染，可以提高页面加载速度
• SSG：静态站点生成，可以生成静态页面，类似于 Vitepress / Astro 等静态站点生成工具
• SEO: Next.js 提供了 SEO 优化，让你的网站更容易被搜索引擎收录
• AI: Vercel 提供了 AI SDK 可以跟 Next.js 轻松结合，让你可以轻松实现 AI 应用
• 服务端操作: Next.js 提供了服务端操作，顺便学习服务端知识，为以后做全栈开发打下基础
• 社区丰富: Next.js 拥有庞大的社区，可以让你轻松找到解决方案
• 部署: 支持多种部署选项，与 Vercel 等平台集成良好，可以快速部署

前置知识

在学习 Next.js 之前，你需要掌握以下知识：

• HTML 熟练使用
• CSS 熟练使用
• JavaScript 熟练使用
• TypeScript 基本使用即可
• React 熟练使用
• Node.js 基本使用即可

Next.js 市场情况

截止：2025 年 11 月 11 日，npm 下载量

• Next.js: 13,294,097
• Nuxt.js: 956,540
• Astro: 747,707
• SvelteKit: 626,494

环境准备

• Node.js 环境 下载地址:https://nodejs.org/en/download 注：最低版本要求 20.9
• 使用 nvm(Node Version Manager) 下载地址:https://github.com/nvm-sh/nvm (推荐)
• Visual Studio Code，WebStorm 等