Why use Blitz instead of Next.js?

1. Fullstack instead of Frontend

Next.js is mostly a frontend framework. It’s designed for building a frontend that connects to some other API. Next.js isn’t designed for building a true fullstack application.

Blitz adds all the missing features and functionality that turns Next into a true fullstack framework. These key features include direct database access, middleware, and authentication.

2. Data Layer

The new Blitz data layer is a novel technology for eliminating the API while retaining client-side rendering. In a Blitz app, you can import your server code directly into the frontend so you don’t need to build an API and do data fetching from the frontend. At build time, Blitz automatically inserts an API call that runs the server code on the server. Essentially, Blitz abstracts your API into a compile step.

This is a game changer for React app development because it eliminates an entire portion of traditional React app architecture. This means it’s easier to learn, faster to develop, and more fun to build things!

That said, you can continue doing data fetching via REST or GraphQL like you’ve always done. Blitz doesn’t restrict this in any way.

3. Relaxed Restrictions

Next.js requires all your React pages go in a single

pages/ folder. Blitz relaxes this restriction by allowing you to have an infinite number of pages/ folders.

This is a huge benefit for scalability and developer experience because you can separate and organize your pages in any way you want.

Examples:

• app/pages/ could contain the homepage and pages like “about”
• app/products/pages/ could contain all the pages related to products
• app/admin/pages/ could contain all pages related to the backend admin section

4. Built-in Authentication

Blitz has built-in session management that works with any identity provider, including self-hosted email/password and third party services. Authentication is something that’s complicated and difficult to implement correctly. Having it built into Blitz saves you a ton of time and potential security vulnerabilities.

5. Conventions

Next.js does not have any conventions aside from file-system based routing. This leaves every developer to re-invent the wheel for every project.

Blitz brings a number of conventions for things like how to organize your files and how to structure your routes. This means you don’t waste any time figuring this out for every project. It also greatly benefits the community. Common project structure and architectural patterns allow you to move from Blitz app to Blitz app and immediately feel at home.

6. Code Scaffolding

There are two main ways to reduce the amount of code you have to write by hand:

1. Code generation
2. Code scaffolding

Code generation means a library generates code for you. Examples are graphql-code-generator which generates code from GraphQL queries and Hasura which generates an entire GraphQL API from your database schema. Usually codegen has no way to fully customize the generated code. You’re at the mercy of the library for what it supports. Often you will run into edge cases that codegen has no solution for. And you can’t fix it because you don’t own the code.

Code scaffolding means initial code is scaffolded into your project for you. From then on, you have full ownership over all the code and can customize it as much you need. A downside of code scaffolding is that you don’t get automatic updates like you do with code generation from a third-party library. But the huge upside is that you are guaranteed to never be limited by someone else’s design choices which you have no way to change.

Blitz is a huge fan of code scaffolding. We have a whole slew of

blitz generate commands for scaffolding code into your project. It’s still early days for our code scaffolding — we have a lot of powerful features that still need to be added, including the ability to add your own custom scaffold templates.

7. Installer Recipes

Installer recipes are one-line commands for scaffolding code into your project from an MDX recipe on npm or a git repository.

Examples:

• blitz install tailwind - one command to install and configure tailwind
• blitz install chakra-ui - one command to install and configure chakra
• blitz install material-ui - one command to install and configure material-ui

Recipes are super powerful. They can change almost anything in your project, including adding dependencies, changing code, adding code, etc. They are written via MDX and can be composed like React components.

8. New App Development

A new Next.js app is totally bare-bones. So every time you start a Next.js project, you have to spend hours setting up all the basics like eslint, prettier, husky git hooks, etc.

A new Blitz app saves you a ton of time because all that is pre-configured for you! For sure you can always customize it later, but having a working starting point is awesome.