What is next.js?

Blitz is based on next.js and therefore supports almost all of the functionality of next.js. For more information on the differences, see here: Why Blitz and Not next.js.

Next. Js is a popular React framework with many built-in features, such as:

  • Pre-render, support for static generation (SSG) and server side rendering (SSR) per page.
  • Automatic code splitting for faster page loading.
  • Client routing has optimized preloading capabilities.
  • The development environment supports hot updates.
  • Completely extensible.

Why Blitz and not next.js?

1. Full stack, not front end

Next. Js is primarily a front-end framework. It is designed for building front ends that connect to other apis. Nex.js is not really a full-stack framework out of the box.

Blitz added all the missing features that made Next a true full-stack framework. These key features include direct access to databases, middleware, and authentication.

2. The data layer

Blitz’s data layer is a novel technology that eliminates apis while preserving client-side rendering. In Blitz apps, you can import server code directly into the front end, so you don’t have to build apis and pull data from the front end. At build time, Blitz automatically inserts an API call that runs server-side code on the server. In essence, Blitz abstracts your API into a compilation step.

This is a game changer for React application development, as it eliminates entire parts of the traditional React application architecture. This means easier to learn, faster to develop, and more fun to build transactions!

That said, you can continue to fetch data through REST or GraphQL as usual. Blitz has no limits.

3. Built-in authentication

Blitz has built-in session management services that can be used with any authenticator, including self-hosted email/password and third-party services. Authentication is a complex and difficult thing to do properly. Building it into Blitz can save you a lot of time and potential security vulnerabilities.

Building awesome UX with Auth in next.js can be tricky and tedious, but Blitz gives you a first-class DX for free.

4. Agreement

Next. Js has no conventions other than file system-based routing. At this point, each developer can reinvent the wheel for each project.

Blitz comes with many conventions, such as how to organize files and how to construct routes. This means you won’t waste any time figuring this out for every project. It has also greatly benefited the community. Common project structures and architectural patterns allow you to migrate from Blitz application to Blitz application and immediately feel at home.

5. 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 having the library generate the Code for you. For example, graphQL-code-Generator can generate code from GraphQL queries and Hasura can generate the entire GraphQL API from your database schema. In general, CodeGen cannot fully customize the generated code. You need to support it through the library. At the same time, you’ll often encounter extreme situations that CodeGen can’t solve. And you can’t fix it because you don’t own the code.

Code scaffolding means that initial Code will be injected into your project. From then on, you have full ownership of all code and can customize it as needed. The downside of code scaffolding is that you don’t get automatic updates like code generated from third-party libraries. But the great benefit is that it ensures you’re never limited by design choices that others can’t change.

Blitz is a big advocate of code scaffolding. We have plenty of blitz generate commands to plug code scaffolding into your project. Our code scaffolding is still in its infancy — we still need to add many powerful features, including the ability to add our own custom scaffolding templates.

6. The formula

Recipes are single-line commands for putting code from MDX Recipes on NPM or Git repositories into your project.

Such as:

  • blitz install tailwindOne command to install and configure Tailwind
  • blitz install chakra-uiOne command installs and configures Chakra
  • blitz install material-uiOne command to install and configure the material- UI

Recipes are so powerful that they can change almost anything in a project, including adding dependencies, changing code, adding code, and so on. They are written in MDX and can be composed like React.

7. New development environment

A new Next. Js app is downright scary. So every time you start the Next. Js project, you have to spend hours building up all the basics of ESLint, Petterier, Husky Git hooks, etc.

A new Blitz app can save you a lot of time because it’s all pre-configured for you! Of course, you can always customize it later, but it’s nice to have a workable starting point.

8. Relax

Next. Js requires all of your React pages to be in a pages/ folder. Blitz relaxes this limit by allowing you to have an unlimited number of Pages/folders.

For large projects, this is a huge benefit because you can separate and organize pages in any way you want.

Such as:

  • app/pages/You can include pages like “Home” and “About.
  • app/products/pages/Can be included in all pages related to the product
  • app/admin/pages/You can include all the pages associated with the admin section of the back end

Weigh the

You should know that everything has to be weighed. So what does Blitz have to weigh?

Framework to limit

Each framework has some degree of limitation. If you’re building applications with React, it’s easy to be constrained by React.

Blitz’s restriction level is one level higher than Next-js. The Blitz codebase is not too different from the Next. Js codebase. But it’s different enough that “popping” into regular next.js isn’t easy. For example, you might use Blitz authentication, which is unique to Blitz. But switching to Next AUth gives you the same experience as Next. Js.

The Blitz Zero API data layer is unique to Blitz. Therefore, if you switch to next.js at this point, you must manage your API code (as you must if you start with next.js, so nothing is lost). However, all of your back-end Query and mutation logic can be ported directly.

Upgrade Next. Js

If you want to be at the forefront of the Next. Js version, know that Blitz is slightly behind but not far behind. Typically, we update Blitz less than a week after a new Next. Js release.

However, if you use YARN, you can upgrade next. Js using the Resolutions field in package.json first.

Multi-client API

Someone might say, “Sooner or later you’re going to need GraphQL, so you should start with it.” While we don’t think most applications will grow large enough to warrant GraphQL, the problem of providing multiple client apis is a good point.

We fully recognize that many Web applications will need mobile applications sooner or later. We want this integration to be as simple as possible!

That said, you can add a GraphQL server to a Blitz application for other clients, which might be a good option, and some people are already doing this.

Currently, as of February 17, 2021:

  • You have direct access to the auto-generated apis and can use them in any mobile application (we have several people in the works right now);
  • You can use Blitz Routes to see the apis generated in the application;
  • You can see the RPC Specification for the API interface here: RPC Specification.

What we plan to do in the future:

  1. First, add documentation and tools to make it easier to use the generated API interface manually: github.com/blitz-js/bl… And github.com/blitz-js/bl… ;
  2. Next, add the ability to generate a JS/TS client library as a nice way to use the generated interface from your application

Method;

  1. Also, add some first-class React-Native support, which allows you to import Blitz Queries /mutations directly into your React-Native code and make it work magically, just like it does in your Web applications today. After version 1.0, this will be Brandon’s main focus throughout the year.

High-level back-end architecture

Right now, Blitz has very little functionality on the back-end architecture, especially compared to things like Nest.js or AdonisJS. However, that doesn’t mean you can’t use these patterns in Blitz, but you do need to set them up yourself. In fact, you can use Nest.js directly within the Blitz app if you want.

But we are very interested in adding more advanced back-end architectures to Blitz either through default support or simple portability. We have an ongoing discussion, and if you have ideas, we’d like you to join us.

Single threads when not deployed to Serverless

Specifically, this is a compromise solution for next.js. Next.js is single-threaded, which means that if you are doing heavy back-end processing, you may find that all Web requests start to be affected. The solution is to let back-end processing generate other processes.

It’s not too difficult to run multiple background processes, but we want to add documentation and apis to make it as simple as possible.

Conclusion the translator

This article belongs to the second half of the Blitz.js official documentation – Introduction chapter. Fourteen chapters in total (Introduction, Community, basics, pages, routing, permissions, database, Queries and Mutations, back-end architecture, deployment, recipe, configuration, CLI, and templates). In the future, I will translate the rest of the chapters irregularly and may also create some original articles.

React Full Stack Development Manual explores Blitz. Js + React Full stack application development. The original translation will be updated to Blitz. Welcome to Star, Watch or follow the public account (@ningowood).

2021 © github.com/hylerrix/bl…