diff --git a/Next.js Frontend Architecture Guide.md b/Next.js Frontend Architecture Guide.md index fce2996..6bb4c38 100644 --- a/Next.js Frontend Architecture Guide.md +++ b/Next.js Frontend Architecture Guide.md @@ -130,14 +130,8 @@ All components should be Server Components by default. Example: ```tsx -export default function UsersPage(){ - - return ( -
- Users -
- ) - +export default function UsersPage() { + return
Users
; } ``` @@ -158,7 +152,7 @@ Examples: Then add: ```tsx -"use client" +'use client'; ``` at the top. @@ -166,11 +160,9 @@ at the top. Example: ```tsx -"use client" +'use client'; -export default function LoginForm(){ - -} +export default function LoginForm() {} ``` Do not add `"use client"` unnecessarily. @@ -274,10 +266,8 @@ Never call Axios directly inside components. Wrong: ```tsx -function Users(){ - - axios.get("/users") - +function Users() { + axios.get('/users'); } ``` @@ -319,8 +309,8 @@ Example: ```ts export const api = axios.create({ - baseURL: process.env.NEXT_PUBLIC_API_URL -}) + baseURL: process.env.NEXT_PUBLIC_API_URL, +}); ``` --- @@ -336,7 +326,6 @@ Examples: - Application settings - Global UI state - Structure: ``` @@ -383,20 +372,12 @@ store/provider.tsx ``` ```tsx -"use client" +'use client'; -import {Provider} from "react-redux" - -export function ReduxProvider({ - children -}){ - - return ( - - {children} - - ) +import {Provider} from 'react-redux'; +export function ReduxProvider({children}) { + return {children}; } ``` @@ -415,16 +396,16 @@ The project must be strongly typed. Avoid: ```ts -any +any; ``` Prefer: ```ts -interface -type -generics -unknown +interface; +type; +generics; +unknown; ``` Each feature owns its types: @@ -446,7 +427,6 @@ Use Tailwind for: - Responsive design - Custom styling - Example: ```tsx @@ -477,7 +457,6 @@ Examples: - Pagination - Notification - Use Tailwind for: - Layout @@ -485,7 +464,6 @@ Use Tailwind for: - Spacing - Responsive behavior - Do not rewrite Ant Design components unless required. --- @@ -568,12 +546,11 @@ When refactoring an existing project: 3. Move code gradually into feature folders. 4. Preserve existing functionality. 5. Improve: - - Type safety - - Separation of concerns - - API abstraction - - Component reuse - - State management - + - Type safety + - Separation of concerns + - API abstraction + - Component reuse + - State management --- @@ -619,4 +596,4 @@ The final project must be: Always prefer clean architecture over fast implementation. -Before creating code, understand where the code belongs in this architecture. \ No newline at end of file +Before creating code, understand where the code belongs in this architecture.