Next.js 全栈开发学习路线 | 26 年最新零基础到精通一条龙（万人收藏⭐️）
编程导航学习网站：学编程、做项目、拿 Offer！
企业高频面试题库：开始刷题，面试遇原题！
精选简历模板大全：1 分钟搞定简历！
AI 资源导航网站：获取最新 AI 黑科技！
1 对 1 模拟面试：随时随地提升面试能力
Next.js 求职高频面试题：开始刷题
开篇介绍
Next.js 是由 Vercel 开发的基于 React 的全栈 Web 框架，提供了服务器端渲染（SSR）、静态站点生成（SSG）、API 路由、文件系统路由等开箱即用的功能。Next.js 让你能够使用 React 构建生产级的全栈 Web 应用，而不需要复杂的配置。
Next.js 于 2016 年首次发布，经过多年的发展，已经成为最流行的 React 框架之一。Next.js 15 引入了 App Router、React Server Components、Server Actions 等革命性特性，标志着 Next.js 进入了全新的时代。
为什么要学 Next.js？
Next.js 是目前最热门的 全栈框架 之一，被 Vercel、Netflix、GitHub、Uber 等知名公司使用。Next.js 不仅可以用于开发企业官网、博客、电商网站，还可以开发复杂的 SaaS 平台、管理后台等。而且 Next.js 的就业前景非常好，一线城市的 Next.js 工程师平均薪资在 20-40K，资深全栈工程师可以达到 40-80K+。
Next.js 的核心特性包括：服务器端渲染（SSR）提升首屏加载速度和 SEO、静态站点生成（SSG）生成静态页面、增量静态再生（ISR）、App Router 和 React Server Components 实现零 JS 传输、API Routes 开发后端接口、自动代码分割和优化等。Next.js 15 的 App Router 是全新的路由系统，支持 React 19 的 Server Components、Server Actions 等新特性，代表了 React 全栈开发的未来方向。
在 AI 时代，Next.js 结合 AI 技术可以快速开发智能 Web 应用。Vercel 推出了 AI SDK 和 AI 网关，可以方便地在 Next.js 中集成大语言模型。
💡 鱼皮专门 出视频介绍过 AI 网关技术，建议大家了解一下。
值得一提的是，鱼皮的 编程导航 和 面试鸭刷题网站 都是用 Next.js 开发的哦~
学习前提
学习 Next.js 建议先掌握：
- React 基础：熟练使用 React、Hooks、组件等【必学】
- JavaScript/TypeScript：熟练使用 ES6+ 语法【必学】
- HTML/CSS：理解网页基础【建议】
关于 React 的详细学习，可以查看 React 学习路线
学习路线图
就业方向
学完 Next.js 后，可以从事以下岗位：
- 全栈工程师：使用 Next.js 开发前后端应用
- 前端工程师：使用 Next.js 开发高性能前端应用
- React 工程师：精通 React 和 Next.js 的前端工程师
- Web 开发工程师：开发各类 Web 应用
整体学习建议
1）Next.js 是基于 React 的框架，一定要先熟练掌握 React 的基础知识（组件、Hooks、状态管理等），再学习 Next.js。
2）Next.js 发展很快，建议优先学习最新版本。尤其是 Next.js 15 引入了 App Router 和 React Server Components，这是 Next.js 的未来方向。
3）服务器端渲染（SSR）和静态站点生成（SSG）是 Next.js 的核心特性，要理解它们的原理和使用场景。
4）Next.js 有两套路由系统。Pages Router 是旧版，App Router 是新版（Next.js 13+）。建议优先学习 App Router。
5）学习 Next.js 时可以用 AI 工具辅助开发，可以到 AI 资源大全网站 中找找合适的工具。
阶段 1：Next.js 基础（10-20 天，仅供参考）
学习目标
理解 Next.js 的核心概念，掌握 Next.js 项目的创建和基本使用。
知识点
Next.js 简介【必学】：
- Next.js 的特点和优势
- Next.js 和 React 的关系
- SSR、SSG、ISR 的概念
项目创建【必学】：
- create-next-app 脚手架
- 项目结构
- 配置文件（next.config.js）
路由系统【必学】：
- 文件系统路由
- 动态路由
- 路由导航（Link 组件）
- 嵌套路由
页面和布局【必学】：
- 页面组件
- 布局组件（Layout）
- 模板（Template）
- 加载和错误处理
学习重点
1）Next.js 的路由是基于文件系统的，在 app 目录下创建文件夹和文件即可自动生成路由。这比传统的路由配置更简单直观。
2）Next.js 15 默认使用 App Router（在 app 目录下），这是推荐的路由系统。Pages Router（在 pages 目录下）仍然支持但不推荐新项目使用。
3）Layout 是 Next.js 的重要概念，可以为多个页面共享布局（如导航栏、侧边栏）。Layout 会在页面切换时保持状态，不会重新渲染。
学习资源
- ⭐ Next.js 官方文档：最权威的学习资料
- ⭐ Next.js 官方教程：官方 Learn 课程
- [Next.js 15 + Antd 5 开发教程](https://zhuanlan
