1

2026-05-09 01:20:37 +07:00
parent 1711c81754
commit 35a942908b
93 changed files with 83627 additions and 0 deletions
@@ -0,0 +1,207 @@
+# Copilot Instructions (Next.js App Router)
+
+## Core Principles
+
+- Clean, readable, maintainable code
+- Functional components + hooks only
+- Single responsibility per component
+- Avoid duplication
+- Do NOT break UI or existing behavior
+
+---
+
+## Architecture
+
+- Routing → `src/app/` (Next.js App Router)
+- UI → `components/` (render only)
+- Feature logic → `features/`
+- Shared logic → `utils/`
+- API layer → `features/*/api` or `lib/`
+- External setup → `lib/`
+
+---
+
+## Folder Structure
+
+```txt
+src/
+  app/                 # Next.js routing (page.tsx, layout.tsx)
+  components/          # reusable UI (atoms, molecules, organisms, templates)
+  features/            # domain-based logic (blog/, product/, auth/, ...)
+    <feature>/
+      api/
+      components/
+      hooks/
+      types/
+      utils/
+  lib/                 # axios, config, shared setup
+  utils/               # global helpers (pure functions)
+  types/               # shared types
+  constants/           # global constants
+  styles/              # optional (global styles)
+```
+
+---
+
+## Routing Rules (CRITICAL)
+
+- Use **App Router only**
+- All routes must be inside `src/app/`
+- Do NOT use `src/pages/` (remove if exists)
+
+Example:
+
+```txt
+src/app/
+  layout.tsx
+  page.tsx
+  blog/
+    page.tsx
+    [slug]/
+      page.tsx
+```
+
+---
+
+## API Rules
+
+- Do NOT use `services/`
+
+- API must be placed in:
+  - `features/<feature>/api/` (preferred)
+  - or `lib/` (shared APIs)
+
+- API layer:
+  - Only handle HTTP
+  - No UI logic
+
+---
+
+## Data Flow Rules
+
+- Data fetching:
+  - in **Server Components (app/)** OR
+  - in **hooks (features/\*/hooks)**
+
+- Components:
+  - MUST be presentational only
+  - MUST NOT call API directly
+
+---
+
+## Types Rules
+
+- `features/*/types` → feature-specific types
+- `types/` → shared global types
+- Do NOT mix API types and UI types
+- Keep local types close to usage
+
+---
+
+## Components (Atomic Design)
+
+- atoms → basic UI (Button, Input)
+- molecules → small combos (SearchBox, Card)
+- organisms → complex UI (Header, ProductSection)
+- templates → layouts
+
+➡️ Prefer composition over duplication
+
+---
+
+## Hooks
+
+- Place in `features/<feature>/hooks`
+- Used for:
+  - data fetching
+  - state logic
+
+- Keep reusable and isolated
+
+---
+
+## Utils
+
+- Pure functions only
+- No side effects
+- No API calls
+
+---
+
+## Lib
+
+- axios instance
+- interceptors
+- config
+- shared setup
+
+---
+
+## Styling
+
+- Prefer Tailwind CSS + shadcn/ui (recommended)
+- If SCSS is used:
+  - follow BEM
+  - each component has its own SCSS
+
+- Avoid inline styles
+
+---
+
+## Naming
+
+- components → PascalCase
+- folders → kebab-case
+- utils/api → camelCase or lowercase
+- entry files → `index.tsx` or `index.ts`
+
+---
+
+## Import Rules (CRITICAL)
+
+Use alias:
+
+```ts
+@/* → src/*
+```
+
+Correct:
+
+```ts
+import { Button } from '@/components/ui/Button';
+```
+
+Forbidden:
+
+```ts
+import Button from '../../../components/Button';
+```
+
+---
+
+## Code Rules
+
+- No API calls inside UI components
+- No mixing UI + business logic
+- Keep files small and reusable
+- Prefer Server Components when possible
+
+---
+
+## Remove Legacy Structure
+
+- Remove `src/pages/`
+- Remove `routes/`
+- Remove `services/` if duplicated with API layer
+- Remove unused folders/files after verification
+
+---
+
+## Scripts
+
+```bash
+npm install
+npm run dev
+npm run build
+npm start
+```