Next.js React Coding Standards: Standard.js Rules, Tailwind, Shadcn UI & Zustand Best Practices

## Code Style and Structure

**Do:** Write compact, functional JavaScript adhering to Standard.js guidelines, favoring declarative patterns and modularity to eliminate repetition.
*Example:*
```js
function processData(items) {
  return items.filter(isValid).map(transformItem)
}
```

**Don't:** Rely on classes or duplicate logic; use descriptive names like `shouldFetch` or `userData`.
*Example (Avoid):*
```js
var x = data[0]; // Unclear name
```

**Do:** Organize files with main exported component first, followed by subcomponents, utilities, and constants.
*Example:*
```js
// Button.js
export { Button }

function Button({ children }) { ... }

export const buttonVariants = { ... }
```

## Standard.js Formatting

**Do:** Apply 2-space indents, single quotes (unless escaping needed), strict equality (`===`), and spaces around operators/keywords.
*Example:*
```js
if (error === null) {
  return data
}
```

**Don't:** Use semicolons unnecessarily, tabs, double quotes routinely, or loose equality (`==`); always manage `err` params.
*Example (Avoid):*
```js
if(error==null)return data
var unused = 5;
```

**Do:** Use camelCase for vars/functions, PascalCase for components; lowercase-dash dirs like `user-profile`.
*Example:*
```js
export function fetchUserProfile() { ... }
```

## React Patterns

**Do:** Build functional components with hooks like `useState`, `useEffect`; follow Rules of Hooks, extract custom hooks.
*Example:*
```js
function useUserData() {
  const [data, setData] = useState(null)
  useEffect(() => {
    fetchData()
  }, [])
  return { data }
}
```

**Don't:** Inline functions in JSX, violate hook rules, or overuse refs/classes; prefer `React.memo`, `useCallback`, `useMemo`.
*Example (Avoid):*
```js
{users.map(user => <div onClick={() => handleClick(user)} />)}
```

**Do:** Employ composition, children/render props, `React.lazy` + `Suspense`, controlled inputs, error boundaries, effect cleanups.
*Example:*
```js
const LazyComponent = lazy(() => import('./Component'))
<Suspense fallback={<div>Loading...</div>}>
  <LazyComponent />
</Suspense>
```

## State Management

**Do:** Leverage Zustand for app-wide state; use Context for mid-level sharing to skip prop drilling.
*Example:*
```js
import { create } from 'zustand'
const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}))
```

**Don't:** Over-rely on prop drilling or local state for shared data.

## UI and Styling

**Do:** Base UI on Shadcn UI/Radix primitives; apply Tailwind mobile-first utilities alongside Stylus CSS modules.
*Example:*
```styl
/* Button.module.styl */
.container
  display flex
  &.active
    background primary
```
import styles from './Button.module.styl'
<div className={styles.container}>...</div>
```

**Don't:** Use `@apply` in Tailwind; nest deeply in Stylus; global styles over modules.
*Example Structure:*
```
components/Button/
  Button.jsx
  Button.module.styl
```

**Do:** Define Stylus vars/mixins, camelCase classes, low specificity; Tailwind for layout, Stylus for custom logic.

## Performance and Next.js

**Do:** Minimize `'use client'`, prioritize Server Components; use `Suspense`, dynamic imports, route splitting, WebP/lazy images, PurgeCSS.
*Example:*
```js
import dynamic from 'next/dynamic'
const ClientComp = dynamic(() => import('./ClientComp'), { ssr: false })
```

**Don't:** Fetch data client-side unnecessarily or bundle non-critical code.

## Forms, Errors, a11y

**Do:** Control forms with react-hook-form/Zod; guard clauses early returns for errors; semantic HTML/ARIA/keys.
*Example:*
```js
function handleSubmit(data) {
  if (!isValid(data)) return showError()
  // Happy path
}
```

**Don't:** Nest deeply or skip sanitization/logging; uncontrolled inputs.

## Testing, Security, i18n

**Do:** Test with Jest/RTL; sanitize inputs; next-i18next for i18n; nuqs for URL state.
*Example:*
```js
import { render, screen } from '@testing-library/react'
test('renders button', () => {
  render(<Button />)
  expect(screen.getByRole('button')).toBeInTheDocument()
})
```

**Don't:** Use `dangerouslySetInnerHTML` unsafely or ignore Web Vitals.