Next.js React Redux TypeScript Best Practices: Coding Standards Guide

### Context
These guidelines establish a robust framework for developing high-quality applications using Next.js, React, Redux Toolkit, TypeScript, and supporting tools like Tailwind CSS, Shadcn UI, and Radix UI. The focus is on creating maintainable, performant, accessible, and secure codebases that prioritize type safety, functional paradigms, and modern best practices. Ideal for teams building production-ready web apps with server-side rendering, global state management, and responsive designs.

### Rules
#### Development Approach
- Prioritize readable, extensible code adhering to SOLID principles.
- Favor declarative, functional patterns; use static typing everywhere.
- Plan thoroughly: outline pseudocode, map data flows, and anticipate errors before coding.

#### Code Formatting
- Indent with tabs.
- Use single quotes for strings (escape only when needed).
- Skip semicolons except for clarity.
- Remove unused vars; add spaces post-keywords, pre-function parens, around operators/commas.
- Align else with closing braces; brace multi-line ifs.
- Cap lines at 80 chars; trailing commas in multi-line objects/arrays.
- Always strict equality (===); handle callback errors.

#### Naming Standards
| Category | Convention | Examples |
|----------|------------|----------|
| Components, Types, Interfaces | PascalCase | `UserProfile`, `AuthInterface` |
| Directories/Files | kebab-case | `auth-wizard/`, `user-profile.tsx` |
| Vars/Functions/Hooks/Props | camelCase | `userData`, `fetchUser`, `useAuth` |
| Constants/Env Vars | UPPERCASE | `API_URL`, `MAX_RETRIES` |
- Event handlers: `handle*` (e.g., `handleSubmit`).
- Booleans: verbs like `isActive`, `hasData`.
- Hooks: `use*`.
- Abbreviations: `err`, `req`, `res`, `props`, `ref` only.

#### React Patterns
- Build functional components with typed props/interfaces.
- Extract logic to custom hooks; compose components.
- Memoize with `React.memo`, `useCallback`, `useMemo`.
- Clean up in `useEffect`; stable keys in lists (not indexes).
- Dynamic imports for code splitting.

#### Next.js Optimization
- Leverage App Router, metadata, caching.
- Prefer Server Components; 'use client' sparingly (events, browser APIs, state).
- Use built-ins: `Image`, `Link`, `Script`, `Head`.
- Server-fetch via URL params; loading states everywhere.

#### TypeScript Strictness
- Enable strict mode.
- Interfaces for props/state/Redux; type guards for nulls.
- Generics for flexible funcs/actions; utilities like `Partial<T>`, `Pick<T, K>`.
- Interfaces > types for extendable shapes; mapped types for variants.

#### Styling & UI
- Tailwind CSS utility classes; mobile-first responsive.
- Shadcn UI + Radix primitives for accessible, composable elements.
- Dark mode via vars/classes; consistent spacing/colors; WCAG contrast.

#### State Handling
- Local: `useState`, `useReducer`, `useContext`.
- Global: Redux Toolkit `createSlice`; normalize data, feature slices, selectors.

#### Forms, Errors, Validation
- Zod schemas + React Hook Form.
- Error boundaries with Sentry logging, fallback UIs.

#### Testing
- Unit: Jest + RTL; AAA pattern, mocks.
- Integration: workflows, snapshots sparingly, clean utils.

#### Accessibility & Security
- Semantic HTML, ARIA, keyboard nav, focus mgmt, contrasts, headings.
- Sanitize inputs (DOMPurify), secure auth.

#### i18n & Docs
- next-i18next; locale-aware formats.
- JSDoc for publics: full sentences, examples, markdown.

### Examples
**Component Naming & Structure:**
```tsx
// user-profile.tsx (kebab-case file)
import { FC } from 'react';

interface UserProfileProps {
  user: { name: string; email: string };
}

const UserProfile: FC<UserProfileProps> = ({ user }) => (
  <div>{user.name}</div>
);

export default UserProfile;
```

**Custom Hook:**
```tsx
// useAuth.ts
const useAuth = () => {
  const [isLoading, setIsLoading] = useState(true);
  // logic
  return { isLoading };
};
```

**Redux Slice:**
```tsx
import { createSlice } from '@reduxjs/toolkit';

const userSlice = createSlice({
  name: 'user',
  initialState: { data: null },
  reducers: {
    setUser: (state, action) => { state.data = action.payload; },
  },
});
```

**Tailwind Responsive:**
```tsx
<div className="p-4 md:p-8 bg-white dark:bg-gray-900 text-black dark:text-white">
  Content
</div>