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

Prisma setup

Required dependecies:

  • prisma
  • @prisma/client

Prisma setup

Next step:

yarn prisma init --datasource-provider sqlite

Adding auth logic

Sign-up

Adding auth logic

Log-in

 

Adding auth logic

Logout

Protecting your pages

Protecting your pages

Blitz RPC

How it would look like with Blitz's Zero-API layer?

Blitz RPC

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

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

  • 95