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

> Build full-stack React apps without manually writing API endpoints. Blitz.js provides a zero-API data layer that lets you import server code directly into components, along with built-in authentication, code scaffolding, and conventions for rapid development.

## Install

Save in your project root:

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

## Quick Use
```bash
npx blitz new myapp
cd myapp
blitz dev
```

## Introduction
Blitz.js is a full-stack React framework inspired by Ruby on Rails that eliminates the need for a separate API layer. It lets you write server-side code and import it directly into your React components, handling the network boundary transparently while providing built-in auth, conventions, and code generation.

## What Blitz.js Does
- Provides a zero-API data layer where server functions are called directly from client components
- Includes built-in authentication with session management out of the box
- Generates boilerplate code for models, pages, queries, and mutations via CLI scaffolding
- Builds on Next.js for routing, SSR, and deployment infrastructure
- Offers recipes (plugins) for adding libraries like Tailwind, Material UI, or databases

## Architecture Overview
Blitz uses an RPC-style architecture where server-side query and mutation functions are automatically exposed as API endpoints at build time. When client code imports a server function, the bundler replaces it with an HTTP call, abstracting away fetch logic, serialization, and error handling. The framework layers on top of Next.js, adding its own file conventions for queries (read operations) and mutations (write operations) alongside the standard pages directory.

## Self-Hosting & Configuration
- Scaffold new projects with `npx blitz new` which sets up the full project structure
- Configure the database via Prisma schema in `db/schema.prisma` (SQLite by default)
- Run migrations with `blitz prisma migrate dev` to sync schema changes
- Deploy to any Node.js hosting (Vercel, Railway, Docker) with `blitz build && blitz start`
- Customize auth strategies in `src/auth/` including third-party OAuth providers

## Key Features
- Zero-API data layer removes boilerplate for client-server communication
- Built-in auth with secure session management, password hashing, and role-based access
- Code generation CLI scaffolds full CRUD features in seconds
- Type safety flows from database schema through queries to React components via Prisma
- Recipe system for adding pre-configured integrations without manual setup

## Comparison with Similar Tools
- **Next.js** — provides routing and SSR; Blitz adds the data layer, auth, and full-stack conventions on top
- **Remix** — focuses on web fundamentals with loaders/actions; Blitz offers RPC-style direct function imports
- **RedwoodJS** — similar full-stack ambition with GraphQL; Blitz uses direct RPC without GraphQL overhead
- **T3 Stack** — a curated collection of tools; Blitz is an integrated framework with tighter conventions
- **Ruby on Rails** — inspirational model; Blitz brings the Rails productivity philosophy to the React ecosystem

## FAQ
**Q: Does Blitz.js replace Next.js?**
A: No. Blitz is built on top of Next.js and adds a data layer, auth, and conventions. You still benefit from all Next.js features including routing, SSR, ISR, and its deployment ecosystem.

**Q: Can I use Blitz with any database?**
A: Blitz uses Prisma as its default ORM, which supports PostgreSQL, MySQL, SQLite, SQL Server, MongoDB, and CockroachDB. You can also use any other ORM or database client.

**Q: Is the zero-API layer secure?**
A: Yes. Server code never reaches the client bundle. The build step transforms imports into secure API calls. You can add authorization checks inside queries and mutations as normal server-side logic.

**Q: Can I adopt Blitz incrementally in an existing Next.js project?**
A: Yes. The Blitz toolkit can be added to existing Next.js apps. You can start using Blitz RPC for new features without rewriting existing API routes.

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

---
Source: https://tokrepo.com/en/workflows/asset-3038c2df
Author: AI Open Source