Boilerplate and Starter for Next.js 16+

A modern Next.js 16 project skeleton with TypeScript, built using the App Router architecture. This project follows atomic design principles and includes a comprehensive setup for development, testing, and code quality.

Features

• Next.js 16 with App Router and Turbopack
• React 19 for modern React features
• TypeScript for type safety
• Tailwind CSS 4 for utility-first styling
• SASS/SCSS Modules for component-scoped styles
• Zustand for state management
• API Client - structured API service layer with TypeScript
• Atomic Design Pattern - organized component structure (atoms, molecules, organisms, templates)
• Cypress for end-to-end testing
• Prettier for code formatting
• Path Aliases - @/* for cleaner imports
• Custom Hooks - reusable React hooks (e.g., useDebounce)

Project Structure

src/
├── app/                    # Next.js App Router pages
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page
├── components/
│   ├── atoms/             # Basic building blocks
│   ├── moleculs/          # Simple component groups
│   ├── organism/          # Complex components
│   └── templates/         # Page-level layouts
├── api/                   # API client and services
│   ├── client.ts         # API client with fetch wrapper
│   ├── config.ts         # API configuration
│   ├── types.ts          # API types
│   └── services/         # API service modules
├── config/                # Configuration files
├── data/                  # Mock data and constants
├── hooks/                 # Custom React hooks
├── stores/                # Zustand state stores
└── styles/                # Global styles

Getting Started

Prerequisites

• Node.js 20.9+ (required for Next.js 16)
• npm, yarn, pnpm, or bun

Installation

Install dependencies:

npm install
# or
yarn install
# or
pnpm install

Development

Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

The page auto-updates as you edit files in the src directory.

Build

Create a production build:

npm run build

Start the production server:

npm run start

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run format - Check code formatting
• npm run format:fix - Fix code formatting
• npm run cypress - Open Cypress test runner