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

Introduction

Blitz.js extends Next.js with a zero-API data layer, built-in authentication, code scaffolding, and conventions that make building full-stack React apps feel like working with a traditional server-rendered framework. The goal is to bring the developer experience of Ruby on Rails to the React ecosystem.

What Blitz.js Does

• Provides a zero-API data layer where server functions are called directly from React components
• Includes built-in authentication with session management, login, signup, and password reset flows
• Scaffolds CRUD operations with blitz generate for models, queries, mutations, and pages
• Extends Next.js with recipes (code mods) for adding libraries like Tailwind, Material UI, or Chakra
• Manages database schema and migrations through Prisma integration out of the box

Architecture Overview

Blitz's zero-API layer works by compiling server-side query and mutation functions into RPC endpoints at build time. When you import a server function in a React component, Blitz replaces the import with an HTTP call to the generated API route. This gives you the developer experience of direct function calls while maintaining a proper client-server boundary. Authentication state is managed through secure HTTP-only session cookies with configurable strategies.

Self-Hosting & Configuration

• Create a new project with npx blitz new which sets up Next.js, Prisma, and auth scaffolding
• Configure the database in db/schema.prisma and run blitz prisma migrate dev to apply changes
• Place queries in app/queries/ and mutations in app/mutations/ for automatic RPC endpoint generation
• Set session and auth configuration in src/blitz-server.ts and src/blitz-client.ts
• Deploy to any Node.js host, Vercel, or Docker with blitz build for production builds

Key Features

• Zero-API data layer eliminates boilerplate of writing REST or GraphQL endpoints for CRUD operations
• Built-in auth with secure sessions, CSRF protection, and configurable login strategies
• Code scaffolding generates models, pages, queries, and mutations from a single command
• Full Next.js compatibility means all Next.js features, plugins, and deployment targets work unchanged
• Recipes automate adding third-party libraries with proper configuration and boilerplate

Comparison with Similar Tools

• Next.js — Blitz is built on Next.js and adds the zero-API layer, auth, and scaffolding that Next.js leaves to you
• Remix — focuses on web fundamentals with loaders and actions; Blitz uses RPC-style queries and mutations with direct imports
• RedwoodJS — similar full-stack ambition but uses GraphQL as the API layer; Blitz eliminates the API entirely
• T3 Stack — community convention for Next.js with tRPC; Blitz provides the same type-safe server calls with less manual setup
• Ruby on Rails — Blitz aims to bring Rails-level productivity to React with conventions, generators, and batteries included

FAQ

Q: Is Blitz.js just Next.js with extra features? A: Blitz started as a Next.js superset. It now provides a toolkit that can be adopted incrementally in any Next.js app, so you can use just the auth or just the RPC layer.

Q: How does the zero-API layer handle authentication? A: Server functions automatically receive the session context. You can call ctx.session.$authorize() in any query or mutation to restrict access to authenticated users.

Q: Can I use Blitz with databases other than PostgreSQL? A: Yes. Blitz uses Prisma under the hood, which supports PostgreSQL, MySQL, SQLite, MongoDB, and SQL Server.

Q: Is Blitz.js actively maintained? A: Yes. The project has moved to a toolkit model where its features (auth, RPC, code gen) are usable independently within any Next.js project.

Sources

• https://github.com/blitz-js/blitz
• https://blitzjs.com/