编程导航学习网站：学编程、做项目、拿 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 学习路线
学完 Next.js 后，可以从事以下岗位：
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 资源大全网站 中找找合适的工具。
理解 Next.js 的核心概念，掌握 Next.js 项目的创建和基本使用。
Next.js 简介【必学】：
项目创建【必学】：
路由系统【必学】：
页面和布局【必学】：
1）Next.js 的路由是基于文件系统的，在 app 目录下创建文件夹和文件即可自动生成路由。这比传统的路由配置更简单直观。
2）Next.js 15 默认使用 App Router（在 app 目录下），这是推荐的路由系统。Pages Router（在 pages 目录下）仍然支持但不推荐新项目使用。
3）Layout 是 Next.js 的重要概念，可以为多个页面共享布局（如导航栏、侧边栏）。Layout 会在页面切换时保持状态，不会重新渲染。
App Router 是 Next.js 13+ 的新路由系统，结合 React Server Components 可以实现更高效的服务端渲染，一定要深入理解。
App Router【必学，核心重点】：
React Server Components【必学，核心重点】：
Server Actions【必学】：
流式渲染【建议学】：
1）App Router 是 Next.js 13+ 的新路由系统，支持 React 19 的 Server Components。Server Components 在服务器上渲染，可以直接访问数据库，不会增加客户端 JS 体积。
2）一定要理解 Server Components 和 Client Components 的区别！Server Components 默认在服务器渲染，Client Components 使用 "use client" 标记，在客户端渲染。大部分组件应该是 Server Components。
3）Server Actions 是 React 19 的新特性，可以在服务器上执行函数（如表单提交、数据变更），无需编写 API 路由。Server Actions 大大简化了全栈开发。
4）框架版本更新迭代较快，建议仔细阅读官方文档来学习。
数据获取和缓存是 Next.js 的核心功能，支持多种数据获取方式和智能缓存策略，优化应用性能。
掌握 Next.js 的数据获取方法，理解缓存机制。
数据获取【必学】：
渲染策略【必学】：
缓存【必学】：
1）Next.js 15 中，Server Components 可以直接在组件中使用 async/await 获取数据，不需要 useEffect 或 useState。这大大简化了数据获取的代码。
2）Next.js 有强大的缓存机制，可以自动缓存数据和渲染结果。要理解不同的缓存层级和如何控制缓存。
3）静态渲染在构建时生成页面，动态渲染在请求时生成页面。要根据页面特性选择合适的渲染策略。
Next.js 的 API 路由可以让你在同一个项目中开发前端和后端，实现真正的全栈开发。API 路由在 app/api 目录下，使用 route.ts 文件定义。
掌握 Next.js 的 API 路由，能够开发后端接口。
Route Handlers【必学】：
数据库集成【建议学】：
认证和鉴权【建议学】：
文件上传【建议学】：
1）Prisma 是目前最流行的 TypeScript ORM，和 Next.js 配合非常好。建议学习 Prisma 进行数据库操作。
2）NextAuth.js 是 Next.js 生态的认证库，支持多种认证方式（OAuth、邮箱密码、Magic Link 等），非常方便。
掌握 Next.js 的性能优化和部署方法，让应用更快更稳定。
性能优化【必学】：
SEO 优化【必学】：
部署【必学】：
1）Vercel 是 Next.js 的官方部署平台，部署非常简单，而且免费。对于个人项目和小型项目，推荐使用 Vercel 部署。可以跟着 鱼皮的这个视频教程 学习如何使用 Vercel 部署项目。
2）next/image 组件可以自动优化图片（懒加载、响应式、格式转换），大大提升性能。要使用 next/image 替代原生 img 标签。
3）Metadata API 可以方便地设置页面的 meta 标签，提升 SEO。每个页面都应该设置合适的 metadata。
通过实际项目巩固所学知识，积累 Next.js 项目经验。
1）从简单项目开始：如个人博客、企业官网等，熟悉 Next.js 的完整开发流程。
2）开发全栈项目：使用 Next.js 的 API 路由开发后端，使用 Server Components 开发前端，体验真正的全栈开发。
3）利用 Next.js 特性：在项目中应用 SSR、SSG、ISR 等特性，理解不同渲染策略的适用场景。
4）部署上线：完成项目后，部署到 Vercel 或其他平台，让你的项目真正可访问。
入门级项目：
鱼皮原创项目（Next.js 技术栈，强烈推荐）：
进阶级项目：
官方示例：
熟练掌握 Next.js 常见面试题，准备好简历和项目经历，顺利通过面试。
1）准备项目：简历上一定要有 Next.js 全栈项目，对前端求职非常加分！强烈推荐学习鱼皮的 智能面试刷题平台，这是真实的企业级 Next.js 项目，涵盖了 SSR、App Router、Server Components 等核心特性，而且鱼皮提供了现成的简历写法，可以直接写到简历上。
2）准备简历：建议使用鱼皮团队开发的 老鱼简历 制作简历，有大量专业简历模板。关于如何写好简历，推荐学习鱼皮的 保姆级写简历指南。
3）多刷面试题：Next.js 的面试题主要包括 SSR、SSG、App Router、Server Components 等，建议使用 面试鸭 刷题。
4）准备项目经历：面试时一定会问项目经历，要能够清楚地介绍为什么使用 Next.js、使用了哪些特性、如何优化性能等。
更多求职干货：编程导航求职干货分享
基础概念：
Server Components：
数据获取：
其他：
Next.js 是目前最热门的 React 全栈框架，让你能够使用 React 开发生产级的全栈 Web 应用。
学习 Next.js 要先打好 React 基础，理解 React 的组件、Hooks、状态管理等核心概念。然后学习 Next.js 的特性，特别是 App Router 和 Server Components。多做项目实践，体验 Next.js 的全栈开发流程。
在 AI 时代，Next.js 结合 Vercel AI SDK 可以快速开发 AI 应用。掌握 Next.js + AI，将增加你求职的竞争力。
希望这份学习路线能够帮助大家少走弯路，更高效地掌握 Next.js 全栈开发。
加油小伙伴们 💪🏻！
1）程序员学习交流圈：极客教程、实战项目、求职宝典
2）程序员面试八股文：实习/校招/社招高频考点、企业真题解析
3）程序员写简历神器：专业模板、丰富例句、直通面试
4）AI 知识资源大全：前沿技术、最新 AI 资讯、提示词大全
5）1 对 1 模拟面试：实习/校招/社招面试拿 Offer 必备
