Blitz.js: The Next.js Toolkit for Rapid Iteration
@aleksandrasays
Who am I?
🐦 @aleksandrasays
🔗 aleksandra.codes
📍 Wroclaw, Poland
Agenda
What is Blitz?
What is Blitz?
A solution to make full-stack web development easier.
What is Blitz?
Inspired by Ruby on Rails.
A solution to make full-stack web development easier.
What is Blitz?
Focused on Next.js.
Inspired by Ruby on Rails.
A solution to make full-stack web development easier.
Framework vs. Toolkit
Framework vs. Toolkit
Next.js
Recipes
Zero-API Layer
React-query
Code scaffolding
AuthN & AuthZ
Prisma
Zod utilites
Misc utilities
Blitz 1.0:
a framework on top of Next.js
Framework vs. Toolkit
Next.js
Recipes
Blitz RPC
Code scaffolding
Blitz Auth
Blitz utilites
Blitz 2.0:
set of libraries for Next.js
Framework vs. Toolkit
Next.js
Recipes
Blitz RPC
Code scaffolding
Blitz Auth
Blitz utilites
Blitz 2.0:
set of libraries for Next.js
Using Blitz Auth in a Next.js app
Setup
Required dependecies:
-
blitz
-
@blitzjs/next
-
@blitzjs/auth
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/9970800/CleanShot_2022-11-03_at_14.32.35_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/9970819/CleanShot_2022-11-03_at_14.35.15_2x.png)
Prisma setup
Required dependecies:
-
prisma
-
@prisma/client
Prisma setup
Next step:
yarn prisma init --datasource-provider sqlite
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/9970830/CleanShot_2022-11-03_at_14.37.05_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/9970831/CleanShot_2022-11-03_at_14.36.56_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/9970829/CleanShot_2022-11-03_at_14.37.21_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/9970828/CleanShot_2022-11-03_at_14.38.00_2x.png)
Adding auth logic
Sign-up
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/9970951/CleanShot_2022-11-03_at_15.47.24_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/9970956/CleanShot_2022-11-03_at_15.48.31_2x.png)
Adding auth logic
Log-in
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/9970958/CleanShot_2022-11-03_at_15.51.03_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/9970959/CleanShot_2022-11-03_at_15.51.37_2x.png)
Adding auth logic
Logout
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/9970963/CleanShot_2022-11-03_at_15.53.55_2x.png)
Protecting your pages
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/9973724/CleanShot_2022-11-04_at_12.05.51_2x.png)
Protecting your pages
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/9970984/CleanShot_2022-11-03_at_15.56.38_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/9986580/CleanShot_2022-11-09_at_14.18.05_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/9970985/CleanShot_2022-11-03_at_15.56.54_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/9970990/CleanShot_2022-11-03_at_15.58.34_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/9970994/CleanShot_2022-11-03_at_15.59.10_2x.png)
Blitz RPC
How it would look like with Blitz's Zero-API layer?
Blitz RPC
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/9310352/Screenshot_2022-02-03_at_13.52.16.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/9310354/Screenshot_2022-02-03_at_13.52.30.png)
Blitz RPC
- Blitz abstracts the API into a build step
- It swaps the import with an HTTP call
- Blitz resolvers: queries and mutations
- You can still add your own API
Blitz RPC
Required dependency:
-
@blitzjs/rpc
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/9986492/CleanShot_2022-11-09_at_12.13.28_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/9986494/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/9986496/CleanShot_2022-11-09_at_12.23.37_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/9986497/CleanShot_2022-11-09_at_12.23.58_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/9986498/CleanShot_2022-11-09_at_12.27.39_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/9986499/CleanShot_2022-11-09_at_12.27.58_2x.png)
Trying out Blitz
npx blitz new my-new-blitz-app
What's next?
Takeaways
👩💻 github.com/beerose/next13-blitz-auth
📄 blitzjs.com
💬 discord.blitzjs.com/
🐦 @aleksandrasays
THANK YOU
@aleksandrasays
Blitz.js: The Next.js Toolkit For Rapid Iteration
By Aleksandra Sikora
Blitz.js: The Next.js Toolkit For Rapid Iteration
- 1,131