Skip to main content

Frontend Conventions (Next.js)

Paved Path​

  • App Router with route segments (app/)
  • Data fetching: React Query
  • Client state: Zustand (default) + Context for auth/theme
    • Use Redux Toolkit only when ≥2 triggers apply (middleware, heavy selectors, normalized non‑server graphs, persistence, time‑travel)
  • Forms: Formik + Yup
  • Design System: Storybook
  • Accessibility: Manual/basic checks
  • i18n: next-intl
  • Assets: next/image & next/font
  • Errors: error.tsx + not-found.tsx per route segment
  • Performance budgets: LCP < 2.5s, CLS < 0.1, TTI < 3.5s (CI gate)

Root layout example:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className="min-h-screen bg-white text-slate-900">{children}</body>
    </html>
  );
}

Zustand example:

import create from 'zustand';
type UserState = { id?: string; setId: (id?: string) => void };
export const useUser = create<UserState>((set) => ({ id: undefined, setId: (id) => set({ id }) }));

LLM Notes​

  • Prefer server components; use client components only when needed (state, effects, refs).