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

Framework vs. Toolkit

Next.js

Framework vs. Toolkit

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