Next.js is mostly a frontend framework. It's designed for building a frontend that connects to some other API. Next.js isn't set up by default 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.
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.
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.
Building an awesome UX with auth in Next.js is very tricky and tedious, but Blitz gives you best-in-class DX for free.
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.
There are two main ways to reduce the amount of code you have to write by hand:
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.
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 tailwindblitz install chakra-ui - one command to install and configure chakrablitz install material-ui - one command to install and configure
material-uiRecipes 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.
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.
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.
For large projects this is a huge benefit 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 productsapp/admin/pages/ could contain all pages related to the backend admin
sectionNext.js requires you to manually type out page locations. Blitz comes with a Route Manifest, so you can do:
<Link href={Routes.ProductsPage({ productId: 123 })} />
// instead of
<Link href={`/products/${123}`} />This improves expressiveness and simplifies moving pages to other location.