Next Launchpad

A production-ready SaaS starter template built with Next.js 16, React 19, TypeScript, and Tailwind CSS v4.

Features

• Next.js 16 with App Router and React Compiler
• TypeScript in strict mode with path aliases (@/*)
• Tailwind CSS v4 with CSS-first configuration and dark mode
• Code Quality: ESLint, Prettier, Husky pre-commit hooks, and lint-staged
• Landing Page: Hero, Features, Pricing, and CTA sections
• Layout System: Responsive Header (with mobile menu), Footer, and Container
• UI Components: Button (with variants/sizes) and LoadingSpinner
• API Routes: Health check and contact form endpoints
• Error Handling: Custom error, global-error, loading, and not-found pages
• SEO: OpenGraph and Twitter metadata preconfigured

Getting Started

# Install dependencies
pnpm install

# Copy environment variables
cp .env.example .env.local

# Start development server
pnpm dev

Open http://localhost:3000 to view the app.

Project Structure

src/
├── app/                    # App Router pages and layouts
│   ├── api/                # API routes
│   │   ├── contact/        # Contact form endpoint
│   │   └── health-check/   # Health check endpoint
│   ├── error.tsx           # Error boundary
│   ├── global-error.tsx    # Global error boundary
│   ├── layout.tsx          # Root layout
│   ├── loading.tsx         # Loading state
│   ├── not-found.tsx       # 404 page
│   └── page.tsx            # Home page (landing)
├── components/
│   ├── landing/            # Landing page sections
│   ├── layout/             # Header, Footer, Container
│   ├── shared/             # Shared utilities (LoadingSpinner)
│   └── ui/                 # Reusable UI components (Button)
├── config/                 # App configuration
│   ├── metadata.ts         # SEO metadata
│   ├── navigation.ts       # Navigation links
│   └── site.ts             # Site-wide settings
├── lib/                    # Utilities and helpers
│   ├── env.ts              # Environment variable access
│   ├── format.ts           # Formatting helpers
│   └── utils.ts            # cn() and other utilities
└── types/                  # TypeScript type definitions
    └── index.ts

Scripts

Command	Description
pnpm dev	Start development server
pnpm build	Create production build
pnpm start	Start production server
pnpm lint	Run ESLint
pnpm lint:fix	Run ESLint with auto-fix
pnpm format	Format all files with Prettier
pnpm format:check	Check formatting without modifying
pnpm typecheck	Run TypeScript type checking

Customization

1. Site config: Edit src/config/site.ts to change the app name, description, and links
2. Navigation: Edit src/config/navigation.ts for header/footer links
3. Metadata: Edit src/config/metadata.ts for SEO settings
4. Theme: Customize colors in src/app/globals.css and Tailwind classes
5. Environment: Copy .env.example to .env.local and set your values

Tech Stack

• Next.js 16 — React framework
• React 19 — UI library
• TypeScript 5 — Type safety
• Tailwind CSS v4 — Utility-first CSS
• pnpm — Fast package manager
• ESLint — Linting
• Prettier — Code formatting
• Husky — Git hooks

License

MIT