Next.js MOC

Next.js 主题知识地图：按框架与渲染、路由、数据获取、Mutation、缓存、HTTP 边界、数据库、认证安全与生产实践组织相关知识入口。

#moc #growing #frame #react

[!info] related notes

对象总览: Next.js

前置地图: React MOC

相邻地图: TanStack Query 知识地图、数据库 MOC、Tailwind MOC

Next.js MOC

地图范围

这是一张围绕 Next.js 的主题知识地图，用于快速定位相关概念、关系与工程实践。

页面结构由普通 Markdown 标题维护；每个主题下面的知识列表使用 Obsidian Bases 动态展示，直接读取目标笔记的 title、description 与 mastery Properties，不维护第二份状态。

[!tip] Bases 视图 Bases 是 Obsidian Core Plugin。这里的每个动态表格展示“知识 + Description + Mastery”：知识列由目标文件生成可点击链接，Description 读取目标笔记的一句话说明，Mastery 直接读取目标笔记 frontmatter。没有 mastery 的笔记会保持为空，而不是自动视为 1。

[!note] 图谱关系 Bases 生成的是动态视图，不等同于 Markdown 正文中的静态 WikiLink。为了保留 MOC → 原子笔记的双链/图谱关系，每个主题后面保留一个默认折叠的“图谱索引”。

主题结构

Next.js
├─ Framework & Rendering
├─ Routing & Navigation
├─ Data Fetching
├─ Mutation & Forms
├─ Cache & Revalidation
├─ HTTP & Service Boundaries
├─ Database & Persistence
├─ Authentication & Security
└─ Content & Production

Framework & Rendering

filters:
  or:
    - 'file.path == "z/nextjs.md"'
    - 'file.path == "z/react-server-components.md"'
    - 'file.path == "z/react-server-vs-client-components.md"'
    - 'file.path == "z/csr-ssr-ssg.md"'
    - 'file.path == "z/react-ssr-vs-hydration-vs-server-components.md"'
formulas:
  knowledge: 'file.asLink(title)'
properties:
  formula.knowledge:
    displayName: 知识
  note.description:
    displayName: Description
  note.mastery:
    displayName: Mastery
views:
  - type: table
    name: Framework & Rendering
    order:
      - formula.knowledge
      - note.description
      - note.mastery
    columnSize:
      formula.knowledge: 280
      note.description: 760
      note.mastery: 56

[!note]- 图谱索引 Next.js · React Server Components · React 服务端组件与客户端组件 · CSR、SSR 与 SSG · React SSR、Hydration 与服务端组件

filters:
  or:
    - file.path == "z/nextjs-file-system-routing.md"
    - file.path == "z/nextjs-dynamic-route-segments.md"
    - file.path == "z/nextjs-layouts.md"
    - file.path == "z/nextjs-route-groups.md"
    - file.path == "z/nextjs-client-navigation-and-prefetch.md"
    - file.path == "z/nextjs-loading-and-streaming.md"
    - file.path == "z/nextjs-error-boundaries.md"
    - file.path == "z/nextjs-not-found-handling.md"
formulas:
  knowledge: file.asLink(title)
properties:
  formula.knowledge:
    displayName: 知识
  note.description:
    displayName: Description
  note.mastery:
    displayName: Mastery
views:
  - type: table
    name: Routing & Navigation
    order:
      - formula.knowledge
      - note.description
      - note.mastery
    columnSize:
      formula.knowledge: 280
      note.description: 817
      note.mastery: 56

[!note]- 图谱索引 Next.js 文件系统路由 · Next.js 动态路由段 · Next.js Layouts · Next.js Route Groups · Next.js 客户端导航与预取 · Next.js Loading 与 Streaming · Next.js Error Boundaries · Next.js Not Found 处理

Data Fetching

filters:
  or:
    - 'file.path == "z/nextjs-server-component-data-fetching.md"'
    - 'file.path == "z/nextjs-data-fetching-boundaries.md"'
    - 'file.path == "z/data-ownership-and-service-boundaries.md"'
    - 'file.path == "z/request-waterfall-and-parallel-data-fetching.md"'
    - 'file.path == "z/data-fetching-colocation.md"'
    - 'file.path == "z/nextjs-search-params-and-server-filtering.md"'
formulas:
  knowledge: 'file.asLink(title)'
properties:
  formula.knowledge:
    displayName: 知识
  note.description:
    displayName: Description
  note.mastery:
    displayName: Mastery
views:
  - type: table
    name: Data Fetching
    order:
      - formula.knowledge
      - note.description
      - note.mastery
    columnSize:
      formula.knowledge: 280
      note.description: 760
      note.mastery: 56

[!note]- 图谱索引 Next.js Server Component 数据获取 · Next.js 数据获取边界 · 数据所有权与服务边界 · Request Waterfall 与并行数据获取 · 数据获取共置 · Next.js Search Params 与服务端过滤

Mutation & Forms

filters:
  or:
    - 'file.path == "z/mutation-state-changing-operation.md"'
    - 'file.path == "z/nextjs-server-actions.md"'
    - 'file.path == "z/nextjs-form-validation-and-use-action-state.md"'
formulas:
  knowledge: 'file.asLink(title)'
properties:
  formula.knowledge:
    displayName: 知识
  note.description:
    displayName: Description
  note.mastery:
    displayName: Mastery
views:
  - type: table
    name: Mutation & Forms
    order:
      - formula.knowledge
      - note.description
      - note.mastery
    columnSize:
      formula.knowledge: 280
      note.description: 760
      note.mastery: 56

[!note]- 图谱索引 Mutation（状态变更操作） · Next.js Server Actions · Next.js 表单验证与 useActionState

Cache & Revalidation

filters:
  or:
    - file.path == "z/nextjs-cache-components.md"
    - file.path == "z/nextjs-cache-life.md"
    - file.path == "z/nextjs-tag-based-revalidation.md"
    - file.path == "z/nextjs-cache-vs-tanstack-query.md"
formulas:
  knowledge: file.asLink(title)
properties:
  formula.knowledge:
    displayName: 知识
  note.description:
    displayName: Description
  note.mastery:
    displayName: Mastery
views:
  - type: table
    name: Cache & Revalidation
    order:
      - formula.knowledge
      - note.description
      - note.mastery
    columnSize:
      formula.knowledge: 280
      note.description: 760
      note.mastery: 56

[!note]- 图谱索引 Next.js Cache Components · Next.js cacheLife · Next.js Tag-based Revalidation · Next.js Cache 与 TanStack Query 的关系

HTTP & Service Boundaries

filters:
  or:
    - 'file.path == "z/nextjs-route-handlers.md"'
    - 'file.path == "z/nextjs-route-handler-vs-server-component.md"'
    - 'file.path == "z/nextjs-server-component-server-action-route-handler-boundaries.md"'
    - 'file.path == "z/nextjs-route-handler-bff-and-webhooks.md"'
formulas:
  knowledge: 'file.asLink(title)'
properties:
  formula.knowledge:
    displayName: 知识
  note.description:
    displayName: Description
  note.mastery:
    displayName: Mastery
views:
  - type: table
    name: HTTP & Service Boundaries
    order:
      - formula.knowledge
      - note.description
      - note.mastery
    columnSize:
      formula.knowledge: 280
      note.description: 760
      note.mastery: 56

[!note]- 图谱索引 Next.js Route Handlers · Next.js Route Handler 与 Server Component 的边界 · Server Component、Server Action 与 Route Handler 的边界 · Next.js Route Handler、BFF 与 Webhook

Database & Persistence

filters:
  or:
    - 'file.path == "z/drizzle-orm.md"'
    - 'file.path == "z/drizzle-schema-relations-and-migrations.md"'
    - 'file.path == "z/nextjs-serverless-database-connections.md"'
    - 'file.path == "z/database-connection-pool.md"'
    - 'file.path == "z/relational-database.md"'
    - 'file.path == "z/object-relational-mapping-orm.md"'
    - 'file.path == "z/primary-key-foreign-key-and-constraints.md"'
    - 'file.path == "z/database-schema-migration.md"'
    - 'file.path == "z/sql-join.md"'
    - 'file.path == "z/n-plus-one-query-problem.md"'
formulas:
  knowledge: 'file.asLink(title)'
properties:
  formula.knowledge:
    displayName: 知识
  note.description:
    displayName: Description
  note.mastery:
    displayName: Mastery
views:
  - type: table
    name: Database & Persistence
    order:
      - formula.knowledge
      - note.description
      - note.mastery
    columnSize:
      formula.knowledge: 280
      note.description: 760
      note.mastery: 56

[!note]- 图谱索引 Drizzle ORM · Drizzle Schema、Relations 与 Migrations 的关系 · Next.js Serverless 数据库连接边界 · 数据库连接池 · 关系型数据库 · 对象关系映射（ORM） · 主键、外键与约束 · 数据库 Schema Migration · SQL JOIN · N+1 Query Problem

Authentication & Security

filters:
  or:
    - file.path == "z/auth-js.md"
    - file.path == "z/nextjs-authentication-session-and-authorization.md"
    - file.path == "z/nextjs-environment-variables-and-server-secrets.md"
    - file.path == "z/cookie-session-token.md"
    - file.path == "z/server-side-session-authentication.md"
    - file.path == "z/access-token.md"
    - file.path == "z/refresh-token.md"
    - file.path == "z/jwt.md"
    - file.path == "z/token-auth-implementation-flow.md"
formulas:
  knowledge: file.asLink(title)
properties:
  formula.knowledge:
    displayName: 知识
  note.description:
    displayName: Description
  note.mastery:
    displayName: Mastery
views:
  - type: table
    name: Authentication & Security
    order:
      - formula.knowledge
      - note.description
      - note.mastery
    columnSize:
      formula.knowledge: 280
      note.description: 760
      note.mastery: 56

[!note]- 图谱索引 Auth.js · Next.js Authentication、Session 与 Authorization 边界 · Next.js 环境变量与 Server-only Secret 边界 · Cookie、Session、Token 与 JWT 的关系 · Server-side Session 鉴权 · Access Token · Refresh Token · JWT · Access Token / Refresh Token 认证实现流程

Content & Production

filters:
  or:
    - 'file.path == "z/vercel-functions-and-fluid-compute.md"'
    - 'file.path == "z/nextjs-mdx-static-content.md"'
    - 'file.path == "z/markdown.md"'
    - 'file.path == "z/nextjs-image-optimization.md"'
    - 'file.path == "z/nextjs-metadata-api.md"'
    - 'file.path == "z/html-meta-and-seo.md"'
    - 'file.path == "z/tailwind.md"'
formulas:
  knowledge: 'file.asLink(title)'
properties:
  formula.knowledge:
    displayName: 知识
  note.description:
    displayName: Description
  note.mastery:
    displayName: Mastery
views:
  - type: table
    name: Content & Production
    order:
      - formula.knowledge
      - note.description
      - note.mastery
    columnSize:
      formula.knowledge: 280
      note.description: 760
      note.mastery: 56

[!note]- 图谱索引 Vercel Functions 与 Fluid Compute · Next.js 中的 Markdown 与 MDX 静态内容 · Markdown · Next.js Image Optimization · Next.js Metadata API · HTML 元信息与 SEO 基础 · Tailwind

相邻知识地图

React MOC：React 组件、Hooks、RSC 与渲染模型。
TanStack Query 知识地图：客户端 server-state cache、Mutation 与 reconciliation。
数据库 MOC：关系模型、事务、索引、SQL 与持久化基础。
Tailwind MOC：Tailwind CSS 与 UI styling。
安全 MOC：浏览器、认证、授权与 Web 安全。
HTTP 与前端网络请求 MOC：HTTP、SSE、WebSocket 与网络边界。