This is a Next.js project bootstrapped with create-next-app, added with Chakra UI and TypeScript setup.
Start developing right away!
This is a Next.js + Chakra UI + TypeScript starter template packed with modern tooling setup.
- Framework: Next.js 16 (App Router)
- UI Library: Chakra UI v3
- Styling Engine: Emotion (via Chakra UI) + next-themes
- Language: TypeScript 5
- Linting & Formatting: Biome
- E2E Testing: Playwright
- Build System: Turborepo
- Icons: React Icons
This project uses a Split-Layer architecture to separate Next.js routing concerns from React UI logic.
graph TD
subgraph "Routing Layer (src/app)"
L[layout.tsx] --> Providers
P[page.ts] --> Logic
end
subgraph "Logic Layer (src/lib)"
Providers --> Layout[Layout Component]
Layout --> Header
Layout --> Footer
Logic --> HomePage[Page Component]
end
subgraph "UI Layer (src/components)"
HomePage --> Components
Header --> Components
Footer --> Components
end
The code is organized to keep business logic and routing separate:
src/
├── app/ # Next.js App Router (Entry points)
│ ├── layout.tsx # Global RootLayout & Providers
│ └── page.ts # Re-exports Home from lib/pages
├── components/ # Shared UI components
│ └── ui/ # Primitives (Buttons, Inputs, etc.)
└── lib/ # Application Business Logic
├── layout/ # Shell components (Header, Footer)
├── pages/ # Page implementations (Home, etc.)
└── styles/ # Theme configurationThis project uses pnpm.
pnpm installpnpm devOpen http://localhost:3000 to view it in the browser.
pnpm buildpnpm test:e2eWe use Biome for fast formatter and linter.
# Check code issues
pnpm biome:check
# Fix issues automatically
pnpm biome:fix
