- Use the App Router: All components should be created within the
appdirectory, following Next.js 14 conventions. - Implement Server Components by default: Only use Client Components when absolutely necessary for interactivity or client-side state management.
- Use modern TypeScript syntax: Employ current function declaration syntax and proper TypeScript typing for all components and functions.
- Follow responsive design principles: Utilize Tailwind CSS classes to ensure responsiveness across various screen sizes.
- Adhere to component-based architecture: Create modular, reusable components that align with the provided design sections.
- Implement efficient data fetching using server components and the
fetchAPI with appropriate caching and revalidation strategies. - Use Next.js 14's metadata API for SEO optimization.
- Employ Next.js Image component for optimized image loading.
- Ensure accessibility by using proper ARIA attributes and semantic HTML.
- Implement error handling using error boundaries and error.tsx files.
- Use loading.tsx files for managing loading states.
- Utilize route handlers (route.ts) for API routes in the App Router.
- Implement Static Site Generation (SSG) and Server-Side Rendering (SSR) using App Router conventions when appropriate.
Next JS 14 General Rules
[Applies to: **/app/**/*.*] General rules for Next.js 14 development, including using the app directory, server components, and modern TypeScript syntax.
Tryboy869
Updated Next JS 14 General Rules by Tryboy869 · ac3cdff
npx skillmds@latest add tryboy869/next-js-14-general-rules-2 File contents
---name: next-js-14-general-rules-2description: [Applies to: **/app/**/*.*] General rules for Next.js 14 development, including using the app directory, server components, and modern TypeScript syntax.---- Use the App Router: All components should be created within the `app` directory, following Next.js 14 conventions.- Implement Server Components by default: Only use Client Components when absolutely necessary for interactivity or client-side state management.- Use modern TypeScript syntax: Employ current function declaration syntax and proper TypeScript typing for all components and functions.- Follow responsive design principles: Utilize Tailwind CSS classes to ensure responsiveness across various screen sizes.- Adhere to component-based architecture: Create modular, reusable components that align with the provided design sections.- Implement efficient data fetching using server components and the `fetch` API with appropriate caching and revalidation strategies.- Use Next.js 14's metadata API for SEO optimization.- Employ Next.js Image component for optimized image loading.- Ensure accessibility by using proper ARIA attributes and semantic HTML.- Implement error handling using error boundaries and error.tsx files.- Use loading.tsx files for managing loading states.- Utilize route handlers (route.ts) for API routes in the App Router.- Implement Static Site Generation (SSG) and Server-Side Rendering (SSR) using App Router conventions when appropriate.
Tryboy869/senjutsu-coding-agent/tree/main/senjutsu/skills/next-js-14-general-rules commit ac3cdff82f
Frequently asked questions
Run npx skillmds@latest add tryboy869/next-js-14-general-rules-2 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.
[Applies to: **/app/**/*.*] General rules for Next.js 14 development, including using the app directory, server components, and modern TypeScript syntax. It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. 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.
Tryboy869 (@tryboy869) published this skill. Their other Agent Skills are listed on their SkillMD profile.