- 使用 App Router：所有组件都应在
app目录中创建，遵循 Next.js 14 约定。 - 默认实现服务器组件：仅在绝对需要交互性或客户端状态管理时使用客户端组件。
- 使用现代 TypeScript 语法：对所有组件和函数采用当前函数声明语法和适当的 TypeScript 类型。
- 遵循响应式设计原则：利用 Tailwind CSS 类确保在各种屏幕尺寸上的响应性。
- 遵循基于组件的架构：创建与提供的设计部分一致的模块化、可重用组件。
- 使用服务器组件和
fetchAPI 实现高效数据获取，采用适当的缓存和重新验证策略。 - 使用 Next.js 14 的元数据 API 进行 SEO 优化。
- 采用 Next.js Image 组件进行优化的图像加载。
- 通过使用适当的 ARIA 属性和语义 HTML 确保可访问性。
- 使用错误边界和 error.tsx 文件实现错误处理。
- 使用 loading.tsx 文件管理加载状态。
- 在 App Router 中利用路由处理器 (route.ts) 处理 API 路由。
- 在适当时使用 App Router 约定实现静态站点生成 (SSG) 和服务器端渲染 (SSR)。
Nextjs 14 SEO Next JS 14 General Rules
Next.js 14 开发的一般规则，包括使用 app 目录、服务器组件和现代 TypeScript 语法。
liaosw97
Updated Nextjs 14 SEO Next JS 14 General Rules by liaosw97 · 8ae26ad
npx skillmds@latest add liaosw97/nextjs-14-seo-next-js-14-general-rules File contents
---name: nextjs-14-seo-next-js-14-general-rulesdescription: Next.js 14 开发的一般规则，包括使用 app 目录、服务器组件和现代 TypeScript 语法。---- 使用 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)。
liaosw97/awesome-rules-skills/tree/main/plugins/nextjs/skills/nextjs-14-seo-next-js-14-general-rules commit 8ae26add37
Frequently asked questions
Run npx skillmds@latest add liaosw97/nextjs-14-seo-next-js-14-general-rules in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Next.js 14 开发的一般规则，包括使用 app 目录、服务器组件和现代 TypeScript 语法。 It is listed under Marketing & Growth on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
liaosw97 (@liaosw97) published this skill. Their other Agent Skills are listed on their SkillMD profile.