Next.js（Next）核心内容的清晰梳理

---

🧭 Next.js 内容知识脉络整理（v13+/App Router为主）

---

📦 1. 项目结构（App Router 模式）

/app
  ├─ layout.tsx       // 页面布局（共享结构）
  ├─ page.tsx         // 首页
  ├─ blog/
  │   ├─ page.tsx     // /blog 页面
  │   └─ [slug]/      // 动态路由：/blog/my-post
  │       └─ page.tsx
/public                // 静态资源
/styles                // 全局样式

---

🚀 2. 渲染方式

渲染方式	特点	使用场景
SSR（服务端渲染）	每次请求都在服务器生成 HTML	SEO、动态数据页面
SSG（静态生成）	编译时生成 HTML	博客、文档等不频繁更新内容
ISR（增量静态生成）	支持缓存 + 失效刷新	稳定页面内容但需偶尔更新
CSR（客户端渲染）	页面由客户端加载数据后生成	用户行为页面、交互频繁页面

Next.js 允许你在页面或组件中灵活组合这些方式（如 generateStaticParams, fetch, useEffect）。

---

🔧 3. 数据获取

• getStaticProps（SSG） ✅
• getServerSideProps（SSR）✅
• generateMetadata / generateStaticParams（App Router）
• fetch()（默认缓存 + 可定制）

---

🔀 4. 路由系统

• 文件即路由

  • /app/page.tsx → /
  • /app/blog/page.tsx → /blog
  • /app/blog/[slug]/page.tsx → 动态路由

• 嵌套路由：支持 layout 嵌套

• Parallel Routes：并行渲染（如弹窗 + 内容）

• Loading / Error / NotFound 页面内置支持

---

🧱 5. 布局系统

文件名	说明
layout.tsx	页面结构布局（可嵌套）
loading.tsx	Suspense loading fallback
error.tsx	异常处理
not-found.tsx	404 页面处理

---

🧪 6. 前端特性集成

• ✅ TailwindCSS（默认支持配置）
• ✅ TypeScript（开箱即用）
• ✅ React Server Components（默认启用）
• ✅ Image、Font 优化
• ✅ SEO Metadata 生成
• ✅ Headless CMS 适配（如 Contentful、Strapi）

---

🌍 7. 部署与平台

• Vercel（最佳原生支持）
• Node.js Server
• Docker 自定义构建
• 静态导出（部分 SSG 页面）

---

🔒 8. 认证与中间件

• 中间件 /middleware.ts 用于处理请求（如重定向、权限）
• 结合 NextAuth.js 或 自定义 JWT 认证

---

🧠 面试常问点总结

问题	示例回答要点
SSR 和 SSG 区别？	SSR 是请求时生成，SSG 是构建时生成
App Router 和 Pages Router 区别？	App Router 更现代，基于文件嵌套布局和组件化
getServerSideProps 和 fetch 有何区别？	前者是老版 SSR 函数，fetch 可配缓存策略并与 React Server Components 配合
如何做 SEO？	使用 SSR、generateMetadata、自定义 head、使用 Image 优化等
如何优化性能？	使用缓存 fetch、静态生成、Image 优化、代码分割、预加载等

---

是否需要我帮你画一个知识脑图？或者生成一个面试快速答题卡片 PDF？