# Tryboy869 Dojutsu For AI Next JS 14 General Rules > - Use the App Router: All components should be created within the `app` directory, following Next.js 14 conventions. - Skill: `tomevault-io/tryboy869-dojutsu-for-ai-next-js-14-general-rules` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/tryboy869-dojutsu-for-ai-next-js-14-general-rules` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/tryboy869-dojutsu-for-ai-next-js-14-general-rules/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/tryboy869-dojutsu-for-ai-next-js-14-general-rules --- - 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. --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/Tryboy869) — claim your Tome and manage your conversions.