Blitz.js: The Next.js Toolkit for Rapid Iteration

@aleksandrasays

Who am I?

🐦 @aleksandrasays

🔗 aleksandra.codes

📍 Wroclaw, Poland

Agenda

What the heck is Blitz?

Toolkit vs. Framwork

Using Blitz Auth in Next

A few words on Blitz RPC

What's next for 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

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

Blitz RPC

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

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