nextarter-chakra

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.

🚀 Features

• 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

🏗 System Architecture

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

📂 Repository Structure

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 configuration

🛠 Getting Started

1. Install Dependencies

This project uses pnpm.

pnpm install

2. Run Development Server

pnpm dev

Open http://localhost:3000 to view it in the browser.

3. Build for Production

pnpm build

4. Run Tests

pnpm test:e2e

🧹 Code Quality

We use Biome for fast formatter and linter.

# Check code issues
pnpm biome:check

# Fix issues automatically
pnpm biome:fix