Skip to main content

学习 Next.js

学习 Next.js 的方法可以分为以下几个阶段：

1. 基础入门​

目标：理解 Next.js 的基本概念和核心功能，并能搭建一个简单的项目。

(1) 先掌握 React​

Next.js 是基于 React 的框架，因此如果 React 还不熟悉，建议先学习 React：

  • 了解组件（Functional Components）
  • 使用状态管理（useState, useEffect）
  • React 路由（React Router）
  • 组件间通信（Props, Context API）

👉 推荐学习资源：

(2) 了解 Next.js 核心概念​

  • 文件路由：基于文件结构自动生成路由（pages/ 目录）
  • 预渲染：
    • 静态生成（SSG）：getStaticProps，在构建时生成 HTML
    • 服务器端渲染（SSR）：getServerSideProps，每次请求动态生成 HTML
  • API Routes：在 pages/api/ 目录下创建后端接口
  • 动态路由 & API 动态路由
  • CSS 处理：
    • 全局样式 styles/globals.css
    • 模块化 CSS styles/Home.module.css
    • 支持 Tailwind CSS、Sass 等

👉 推荐资源：

2. 项目实践​

目标：通过实际项目加深理解，掌握数据获取、路由、部署等核心技能。

(1) 简单博客项目​

技术点：

  • 文章静态生成（SSG）
  • Markdown 解析
  • 路由动态渲染

👉 教程推荐：

(2) 个人作品集/简历网站​

技术点：

  • 服务器端渲染（SSR）
  • API Routes 实现留言功能
  • Tailwind CSS 进行美化

(3) 电商网站​

技术点：

  • 数据库（MongoDB, Firebase, Supabase）
  • 认证（NextAuth.js, Firebase Auth）
  • 购物车管理（Context API, Redux）
  • SEO 优化

👉 推荐教程：

3. 深入学习​

目标：掌握高级功能，如 SEO、服务器组件、性能优化等。

(1) 性能优化​

  • 图片优化：使用 next/image
  • 代码分割：dynamic() 动态导入组件
  • 静态资源缓存：next.config.js 进行优化

(2) SEO & Meta 标签​

  • 使用 next/head 添加 meta 信息
  • 使用 next-seo 插件

(3) 服务器组件 & App Router（Next.js 13+）​

  • app/ 目录的路由方式
  • use client 和 server components
  • fetch 在服务器端执行

👉 推荐资源：

4. 部署 & 实战​

目标：学习如何部署 Next.js 项目，并应用在真实项目中。

(1) Vercel 部署​

  • 直接 vercel CLI 部署
  • 自动 CI/CD 流程

(2) Docker & 自定义服务器​

  • 使用 next start
  • 结合 Nginx 部署

推荐学习路线总结​

  1. 熟悉 React（Hooks, 状态管理, 路由）
  2. 学习 Next.js 基础（路由、数据获取、API Routes）
  3. 动手实践项目（博客、个人网站、电商平台）
  4. 掌握高级功能（SEO、性能优化、服务器组件）
  5. 学习部署（Vercel, Docker）

这样，你就可以系统地掌握 Next.js！🚀