# Nextjs 14 SEO Next JS 14 General Rules

> Next.js 14 开发的一般规则，包括使用 app 目录、服务器组件和现代 TypeScript 语法。

- Skill: `liaosw97/nextjs-14-seo-next-js-14-general-rules` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add liaosw97/nextjs-14-seo-next-js-14-general-rules`
- Raw SKILL.md: https://api.skillmd.com/api/skills/liaosw97/nextjs-14-seo-next-js-14-general-rules/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: liaosw97 (https://skillmd.com/u/liaosw97)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/liaosw97/nextjs-14-seo-next-js-14-general-rules

---


- 使用 App Router：所有组件都应在 `app` 目录中创建，遵循 Next.js 14 约定。
- 默认实现服务器组件：仅在绝对需要交互性或客户端状态管理时使用客户端组件。
- 使用现代 TypeScript 语法：对所有组件和函数采用当前函数声明语法和适当的 TypeScript 类型。
- 遵循响应式设计原则：利用 Tailwind CSS 类确保在各种屏幕尺寸上的响应性。
- 遵循基于组件的架构：创建与提供的设计部分一致的模块化、可重用组件。
- 使用服务器组件和 `fetch` API 实现高效数据获取，采用适当的缓存和重新验证策略。
- 使用 Next.js 14 的元数据 API 进行 SEO 优化。
- 采用 Next.js Image 组件进行优化的图像加载。
- 通过使用适当的 ARIA 属性和语义 HTML 确保可访问性。
- 使用错误边界和 error.tsx 文件实现错误处理。
- 使用 loading.tsx 文件管理加载状态。
- 在 App Router 中利用路由处理器 (route.ts) 处理 API 路由。
- 在适当时使用 App Router 约定实现静态站点生成 (SSG) 和服务器端渲染 (SSR)。