Next.js Starter Template v1.0.0

Basement Next Starter

A production-ready Next.js starter with React 19, Tailwind CSS v4, TypeScript strict mode, and everything you need to build modern web applications.

Tech Stack

Next.jsv16.1

App Router, Turbopack

Reactv19

React Compiler enabled

TypeScriptv5.9

Strict mode

Tailwind CSSv4

CSS-first config

Biomev2.3

Lint + Format

Bunv1.3

Package manager

Features

Design System

Pre-configured colors, breakpoints, typography, and 30+ easing functions ready to use.

Smart Components

Enhanced Image and Link components with blur placeholders, connection-aware prefetching.

Theme Support

Light/dark theme with CSS custom properties and React context.

Developer Experience

Custom scripts for component scaffolding, style generation, and HTTPS dev server.

Performance Optimized

Bundle analyzer, optimized imports, security headers, and image optimization.

Design System

Colors

black
#000000
white
#ffffff
orange
#FF4D00
blue
#487CFF
green
#00FF9B
violet
#F101A5
pink
#FF73A6
gray
#666666

Breakpoints

desktop-large1920px
desktop1440px
tablet-lg1024px
tablet768px
mobile640px

Grid System

Mobile: 4 columns
Desktop: 12 columns
Gap: 16px

Quick Start

# Clone the template
bunx degit basementstudio/next-starter my-project
# Install dependencies
cd my-project && bun install
# Start development
bun dev

Available Scripts

bun devStart development server
bun dev:httpsStart with HTTPS
bun buildBuild for production
bun generateScaffold components
bun lint:fixFix lint issues
bun typecheckType check with tsgo

Project Structure

app/                 # Next.js pages and routes
components/
  ├── layout/        # Header, Footer, Wrapper, Theme
  └── ui/            # Image, Link, SanityImage
lib/
  ├── hooks/         # useDeviceDetection, useMediaBreakpoint
  ├── scripts/       # Dev tools, generators
  ├── store/         # Zustand global state
  ├── styles/        # Design tokens, CSS config
  └── utils/         # Easings, math, strings, fetch

Ready to build something great?