共 12 道 Next.js 方向的面试题，每题附完整答案与代码示例。点击右侧方框可标记掌握度。
Next.js 有两套路由： - Pages Router （传统）：基于 pages/ 目录，每个文件是一个路由；用 getServerSideProps / getStaticProps 做数据获…
App Router（app/ 目录） ： - app/page.tsx → / - app/about/page.tsx → /about - app/blog/[slug]/page.tsx → …
RSC 是在 服务端渲染、不发送到客户端 的组件，能直接访问数据库/文件系统，且 不增加客户端 JS 体积 。 - Server Component（默认） ：在 app/ 下不加 'use clie…
App Router 的 Server Component 里可直接 await fetch，Next 自动按 请求 memoization + 路由级缓存 处理： 缓存选项（next 字段） ： -…
SSG 在 构建时 把页面渲染成静态 HTML，访问极快、可上 CDN。 - 不带参数的页面默认静态生成 - 动态路由需配合 generateStaticParams 提供参数列表，Next 在构建时…
SSR 在 每次请求时 在服务端渲染页面，适合内容频繁变化、需实时数据的页面。 App Router：fetch 用 { cache: 'no-store' } 或不缓存即走 SSR。 Pages R…
ISR 让 SSG 页面在 构建后也能按时间段后台重新生成 ，兼顾「静态速度」与「内容新鲜度」。 解决的问题 ：纯 SSG 内容发布后需重新构建全站；纯 SSR 每次请求都查库。ISR 让页面先返回旧…
App Router 用 同名文件 约定 UI 片段，自动套用： - layout.tsx：包裹子路由的布局， 状态持久 （切换子路由不重新挂载），可嵌套 - template.tsx：类似 layo…
Server Actions 是运行在服务端的异步函数，可在表单提交/交互中直接修改数据（如写库）， 无需手写 API 路由 。在 App Router 中通过 'use server' 指令声明。 …
middleware.ts 运行在 请求到达页面/API 之前 （Edge Runtime），可对请求做拦截/改写/重定向，性能极高。 场景 ：登录鉴权、A/B 测试分流、国际化（根据 Accept-…
next/image 是优化后的 <img 替代，自动： 1. 懒加载 （默认 loading="lazy"） 2. 防止布局抖动 ：要求显式 width/height（或用 fill）预留空间 3.…
Vercel（官方） ：git push 即部署，自动识别 Next、配置 Serverless Function 与边缘缓存，最省心。 自建 / 容器 ： - next build 产出 .next…