Copilot instructions

1Next.js 14 Project Guidelines
2 
3### **Code Style and Structure**
4 
5- Write clean, concise **TypeScript** code using functional programming (avoid classes).
6- Avoid code duplication by favoring **iteration** and **modularization**.
7- Use descriptive variable names like `isLoading` or `hasError` for clarity.
8- Organize files logically:
9  - Main exported component
10  - Subcomponents
11  - Helper functions
12  - Static content
13  - Type definitions
14- Store page-specific components in a `./_components` folder at the page level.
15 
16---
17 
18### **Naming Conventions**
19 
20- Use **lowercase with dashes** for directory names (e.g., `components/auth-wizard`).
21- Prefer **named exports** for components (e.g., `export { MyComponent }`).
22 
23---
24 
25### **Project Structure**
26 
27- **`_components/`**: Components specific to a page.
28- **`app/api/`**: API routes for Next.js.
29- **`components/`**: Reusable shared components.
30  - Includes a `ui/` subfolder for **Shadcn UI** components.
31- **`hooks/`**: Custom React hooks.
32- **`lib/`**: Utility files, including:
33  - Configuration files
34  - Constants
35  - Models
36  - Query utilities
37  - Type definitions
38  - General utilities
39 
40---
41 
42### **UI and Styling**
43 
44- Use **Shadcn UI**, **Radix**, and **Tailwind Aria** for UI components.
45- Style with **Tailwind CSS**, following a **mobile-first** approach for responsive design.
46 
47---
48 
49### **Performance Optimization**
50 
51- Minimize client-side code (e.g., `use client`, `useEffect`, `setState`); prioritize **React Server Components**.
52- Wrap client components in **Suspense** with fallback UIs.
53- Dynamically load non-critical components to improve load times.
54- Optimize images using the **Next.js Image** component with **WebP** format and **lazy loading**.
55 
56---
57 
58### **Key Conventions**
59 
60- Manage URL state with **`nuqs`** (Next.js URL Query State).
61- Focus on optimizing **Web Vitals** (e.g., LCP, CLS, FID).
62- Limit client-side code to **Web API access**; avoid using it for data fetching or state management.
63 
64---
65 
66### **Next.js Features**
67 
68- Leverage these Next.js features:
69  - **App Router**
70  - **Server Actions**
71  - **Image Component**
72  - **Metadata**
73  - **Link Component**
74  - **Head Management**
75  - **Layouts**
76  - **Error Pages**
77  - **Loading UI**
78 
79---
80 
81### **Tech Stack**
82 
83- Core technologies:
84  - **Next.js**
85  - **TypeScript**
86  - **Tailwind CSS**
87  - **Shadcn UI**
88- Additional tools:
89  - **Webpack**
90  - **Web Workers**
91  - **Monaco Editor**
92  - **Prettier** (code formatting)
93  - **Zod** (schema validation)
94  - **React Hook Form**
95  - **React Query** / **Tanstack Query**
96  - **Tanstack Table**
97  - **Parallel Router** (for popup functionality)
98 
99---
100 
101### **Additional Tools**
102 
103- **ESLint** (linting)
104- **Husky** (git hooks)
105- **Commitlint** (commit message linting)
106 
107This summary covers the essentials of the guidelines. If you need more details on any specific section or help applying these to a project, just let me know—I’m here to assist!
108