开始使用 Next.js

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

我们所学的版本是16.0.2

什么是 Next.js？

Next.js是一个基于React全栈框架，由Vercel开发和维护，那么它有什么优势呢？

• SSR：服务端渲染，可以提高页面加载速度(现在会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,主包用的是22.17.0
• 代码编辑器 Vscode Cursor webStorm等皆可，不要用记事本就行。

预计学习时间: 2 分钟
难度级别: 初级 🟢