Production-ready Next.js starter with TypeScript, Tailwind CSS, and modern testing
Part of the @teo-garcia/templates ecosystem
| Category | Technologies |
|---|---|
| Framework | Next.js 16 with App Router and Turbopack |
| UI | React 19, Tailwind CSS 4, Lucide Icons |
| Data | TanStack Query for server state |
| Type Safety | TypeScript with strict mode |
| Testing | Vitest, Testing Library, Playwright, MSW |
| Code Quality | ESLint, Prettier, Husky, lint-staged |
- Node.js 24+
- pnpm 10+
pnpm install
cp .env.example .env
pnpm devThe app starts on http://localhost:3000.
| Command | Description |
|---|---|
pnpm dev |
Start development server with Turbopack |
pnpm build |
Create production build |
pnpm start |
Run production server |
pnpm test |
Run unit tests |
pnpm test:browser |
Run browser tests |
pnpm test:e2e |
Run Playwright E2E tests |
pnpm coverage |
Run tests with coverage |
pnpm check |
Run lint, typecheck, format, and tests |
pnpm lint:es |
Lint and fix with ESLint |
pnpm lint:ts |
TypeScript type checking |
pnpm format |
Format with Prettier |
| Path | Purpose |
|---|---|
app/ |
Next.js App Router pages |
app/components/ |
Shared UI components |
app/lib/ |
Configuration and utilities |
public/ |
Static assets |
e2e/ |
Playwright E2E tests |
Next.js App Router conventions own route-state wiring:
| File | Purpose |
|---|---|
app/loading.tsx |
Route loading fallback |
app/error.tsx |
Segment-level error boundary |
app/global-error.tsx |
Root application error boundary |
app/not-found.tsx |
Unmatched route UI |
app/components/route-state/route-state |
Shared local state UI |
| Area | Tooling |
|---|---|
| Dependency updates | Renovate |
| Issue intake | GitHub issue templates |
| Change review | Pull request template |
| CI | GitHub Actions for lint, typecheck, test, and build |
| Delivery | Vercel deployment workflow |
next.config.ts applies the governed web header baseline to every route:
Content Security Policy, Cross-Origin-Opener-Policy, Permissions-Policy,
Referrer-Policy, X-Content-Type-Options, and X-Frame-Options.
HSTS is intentionally deployment-owned because TLS termination and domain preload policy belong to the hosting layer.
| Package | Role |
|---|---|
@teo-garcia/eslint-config-shared |
ESLint rules |
@teo-garcia/prettier-config-shared |
Prettier formatting |
@teo-garcia/tsconfig-shared |
TypeScript settings |
@teo-garcia/vitest-config-shared |
Test configuration |
| Template | Description |
|---|---|
react-template-rr |
React Router + Vite SPA |
react-native-template-expo |
Expo mobile app |
nest-template-monolith |
NestJS backend |
nest-template-microservice |
NestJS microservice |
fastapi-template-monolith |
FastAPI backend |
MIT
Built by teo-garcia