innozverse-web-style

App Router uses src/app/ directory with file-based routing. Server components are default; mark interactive sections with 'use client'. This structure enables automatic code splitting and reduces client-side JavaScript while keeping business logic server-side.

Prefix client-accessible variables with NEXT_PUBLIC_. Use unprefixed variables server-side only. Pass environment-driven URLs to your API client so it connects to the correct endpoint per environment without hardcoding.

Use server components for data fetching, database queries, and sensitive operations. Use client components only for interactivity, event listeners, and browser APIs. This separation improves performance and security by keeping secrets server-side.

Import your typed API client in server or client components depending on context. In server components, fetch data directly and pass it as props. In client components, call the client within effects or event handlers to maintain type safety throughout.

Create loading.tsx and error.tsx files in route segments for automatic UI boundaries. These replace manual state management and provide fallback UI during data fetching and when errors occur, improving user experience consistently.