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

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