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

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/