# Blitz.js — The Full-Stack React Framework with Zero-API Data Layer

> Blitz.js is a full-stack React framework built on Next.js that eliminates the need for a separate API layer by letting you import server code directly into your components.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

# Blitz.js — The Full-Stack React Framework with Zero-API Data Layer

## Quick Use
```bash
npx blitz new my-app
cd my-app
blitz dev
```

## Introduction
Full-stack React applications typically require building and maintaining a REST or GraphQL API between the frontend and backend. Blitz.js removes this friction by providing a zero-API data layer that lets you write server-side functions and call them directly from React components as if they were local imports, while the framework handles serialization and network transport behind the scenes.

## What Blitz.js Does
- Provides a zero-API data layer that compiles server functions into RPC endpoints automatically
- Scaffolds full-stack applications with authentication, database, and routing out of the box
- Generates models, queries, mutations, and pages through a built-in CLI code generator
- Includes session management and authentication with multiple strategies preconfigured
- Builds on Next.js so you retain access to the entire Next.js ecosystem and deployment options

## Architecture Overview
Blitz uses a compiler plugin that transforms imports of server-side query and mutation files into RPC calls. When a component imports a query, the compiler replaces the import with a client-side function that sends an HTTP request to an auto-generated API route. The server-side code runs only on the server, so database calls and secrets never leak to the browser. Blitz layers its own conventions on top of Next.js: queries for reading data, mutations for writing data, and a structured file layout that maps to routes. Prisma is the default ORM, providing typed database access with migrations.

## Self-Hosting & Configuration
- Create a new project with npx blitz new, selecting your preferred options for auth and styling
- Configure the database connection in .env.local with DATABASE_URL pointing to PostgreSQL or SQLite
- Run blitz prisma migrate dev to apply schema changes during development
- Deploy to any Node.js host (Vercel, Railway, Docker) using blitz build and blitz start
- Customize authentication strategies in app/auth by swapping or extending the built-in providers

## Key Features
- Zero-API layer removes the need to build, version, and document a separate REST or GraphQL API
- Built-in auth scaffolding includes signup, login, logout, password reset, and session management
- Code generation CLI produces models, queries, mutations, and pages with a single command
- Full TypeScript end-to-end with type inference flowing from database schema to UI components
- Recipe system lets you install community packages that modify project files automatically

## Comparison with Similar Tools
- **Next.js** — Provides SSR and routing but no data layer or auth; Blitz adds full-stack conventions on top
- **Remix** — Server-centric data loading via loaders; Blitz uses a zero-API RPC pattern instead
- **RedwoodJS** — Full-stack with GraphQL; Blitz avoids the GraphQL layer entirely
- **T3 Stack** — Assembles Next.js + tRPC + Prisma manually; Blitz bundles and integrates these concerns by default
- **Rails** — Monolithic server-rendered; Blitz gives a similar DX but with React on the frontend

## FAQ
**Q: Is Blitz.js just a wrapper around Next.js?**
A: Blitz started as a Next.js superset but has evolved into a framework-agnostic toolkit. The core zero-API layer can be used independently of Next.js.

**Q: Can I use Blitz.js with an existing Next.js project?**
A: Yes. The Blitz toolkit can be installed incrementally into an existing Next.js project without rewriting everything.

**Q: What database does Blitz.js use?**
A: Blitz defaults to Prisma as the ORM, which supports PostgreSQL, MySQL, SQLite, and SQL Server. You can substitute any ORM or database client.

**Q: How does authentication work in Blitz.js?**
A: Blitz includes a session management system with built-in signup/login flows. It supports email/password, third-party OAuth, and custom strategies.

## Sources
- https://github.com/blitz-js/blitz
- https://blitzjs.com/docs/

---
Source: https://tokrepo.com/en/workflows/blitz-js-full-stack-react-framework-zero-api-data-layer-2c1ba0ef
Author: Script Depot