A modern Next.js boilerplate to ship production-ready projects fast — with TypeScript, Tailwind CSS v4, accessibility, testing, and developer tooling pre-configured.
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript (strict mode) |
| Styling | Tailwind CSS v4 |
| Components | ShadCN/UI + Radix UI |
| Icons | Lucide React + React Icons |
| Theming | next-themes |
| Testing | Playwright + Axe-core |
| Runtime | Node.js 22 |
- Turbopack — faster local development builds
- ESLint with import sorting, key sorting, arrow functions, template literals, and TypeScript rules
- Prettier with automatic Tailwind class sorting
- VS Code settings and recommended extensions pre-configured
- TypeScript strict mode with
@/*path alias - Node version file for
nvm,fnm, and other version managers
- Tailwind CSS v4 with a custom stone/orange design theme
- Light and dark modes — system preference by default, user-toggleable
- ShadCN/UI component library (Button, Tooltip)
- Radix UI primitives for accessible, headless components
- Mobile-first responsive design with Tailwind breakpoints
- Axe-core automated accessibility scanning in Playwright tests
- Skip-to-content navigation link for keyboard users
- Semantic HTML landmarks (
<header>,<nav>,<main>,<footer>) - ARIA labels,
aria-expanded,aria-currenton interactive elements - WCAG 2.1 AA verified in both light and dark modes
- Auto-generated
robots.txtandsitemap.xmlvia TypeScript - Configurable
<title>template (%s | NextStarter) - Open Graph and Twitter card metadata support
- Canonical URL configuration
- Playwright end-to-end tests across Chromium, Firefox, and WebKit
- Axe-core accessibility scans run on every test run
- GitHub Actions workflows for ESLint and Playwright on push and pull request
- HTML test reports
- Server components by default — minimal client-side JavaScript
next/imagefor optimized images- Static generation for sitemap and robots metadata
- Custom 404 page
Requirements: Node.js 22+ (see .node-version)
npx @bill742/create-nextstarter my-project
cd my-project
npm run dev| Variable | Description |
|---|---|
NEXT_PUBLIC_SITE_URL |
Full URL of your site (e.g. https://example.com/) |
NEXT_PUBLIC_SITE_NAME |
Name displayed in the header and footer |
| Command | Description |
|---|---|
npm run dev |
Start development server with Turbopack |
npm run build |
Build for production |
npm run start |
Serve the production build |
npm run lint |
Run ESLint |
npm run test |
Run Playwright end-to-end tests |