Next.js 15 Boilerplate Setup

This skill helps you work with a production-ready Next.js 15+ boilerplate featuring Tailwind CSS v4.1, shadcn/ui components, TypeScript, and next-themes for dark mode support.

Tech Stack

Architecture Overview

Directory Structure

When working with this boilerplate, follow this organization:

- **`(Main)/`** - Route group with MainLayout wrapper (doesn't affect URLs)

- **`ui/`** - shadcn/ui components

- **`layouts/`** - Layout components (Header, Footer, MainLayout)

- **`theme/`** - Theme components (ThemeProvider, ModeToggle)

- **`common/`** - Shared components

Path Aliases

Always use the `@/*` alias pointing to `src/*`:

```typescript

import { cn } from '@/lib/utils';

import { Header } from '@/components/layouts/Header';

```

Instructions

1. Understanding the Layout System

This boilerplate uses a three-tier layout structure:

1. **Root Layout** (`src/app/layout.tsx`) - Wraps the entire app with ThemeProvider

2. **Main Layout** (`src/app/(Main)/layout.tsx`) - Applies MainLayout to pages in the (Main) route group

3. **MainLayout Component** (`src/components/layouts/MainLayout.tsx`) - Contains Header, main content area, and Footer

When creating new pages:

2. Working with Theming

The project uses next-themes with class-based dark mode:

- `--header-height: 64px`

- `--container-max-width: 1200px`

- `--container-px: 16px`

When adding theme-aware styles:

3. Adding shadcn/ui Components

The project is pre-configured for shadcn/ui. To add new components:

```bash

npx shadcn@latest add [component-name]

```

Components are configured to:

When using shadcn/ui components:

4. Styling Approach

This boilerplate uses Tailwind CSS v4.1 with modern conventions:

When writing styles:

1. Prefer Tailwind utility classes

2. Use `cn()` for conditional/merged classes

3. Follow the 80-character line width limit

4. Let Prettier handle class sorting

5. Code Style Standards

Follow these conventions:

Run linting and formatting:

```bash

yarn lint # Check ESLint issues

yarn prettier # Check Prettier formatting

```

6. Navigation Management

Routes are centralized in `src/constants/routes.ts`:

7. Development Workflow

Standard commands:

```bash

yarn dev # Start dev server (http://localhost:3000)

yarn build # Build production bundle

yarn start # Start production server

yarn lint # Run ESLint

yarn prettier # Check code formatting

```

When building new features:

1. Create components in appropriate `src/components/` subdirectories

2. Use TypeScript for type safety

3. Follow the existing file structure and naming conventions

4. Ensure dark mode support for new UI components

5. Test in both light and dark modes

Constraints

Examples

Adding a New Page with Standard Layout

```typescript

// src/app/(Main)/about/page.tsx

export default function AboutPage() {

return (

<div className="container mx-auto px-4 py-8">

<h1 className="text-3xl font-bold dark:text-white">About Us</h1>

<p className="mt-4 text-gray-600 dark:text-gray-400">

Welcome to our application.

</p>

</div>

);

}

```

Creating a Themed Component

```typescript

// src/components/common/Card.tsx

import { cn } from '@/lib/utils';

interface CardProps {

children: React.ReactNode;

className?: string;

}

export function Card({ children, className }: CardProps) {

return (

<div

className={cn(

'rounded-lg border bg-white p-6 shadow-sm dark:bg-gray-800 dark:border-gray-700',

className

)}

>

{children}

</div>

);

}

```

Adding a Navigation Link

```typescript

// src/constants/routes.ts

export const NAV_LIST = [

{ name: 'Home', href: '/' },

{ name: 'About', href: '/about' },

{ name: 'Contact', href: '/contact' }, // New link

];

```