Directus 9 + Next

Protect Signup Form From Hackers
Viewer called Locness noticed a potential security flaw on our sign up form. In this episode we are going to fix that.

User Authentication With NextAuth
In this episode we are going to implement login functionality to our Next.js and Directus app using NextAuth package.

User Sign Up
In this episode we are going to implement signup functionality for our Directus and Next.js app. You will see, this is very easy.

Mini Cart And Zustand
In this episode we are going to create a mini cart for our e-commerce site using Zustand state management library.

Add To Cart
In this episode we are going to start implementing add to cart functionality. I say start because this is a pretty big functionality so I’m going to split it into two parts.

Display Product Options
In this episode we are going to display product options that we created in the previous episode.

Product Options And Directus Has Some Problems
In this episode we are going to create options for products. In our case those are going to be colours and sizes.

Product Display Page
In this episode we are going to create a product display page for our shop.

Filter Products By Category
In this episode I’m going to show you how to create a filter for our products using Directus and Next.js.

Fix M2M Relationship From Part 04
In this episode we are going to fix a mistake that I made in part 04 of this course.

Products and Categories
In this episode we are going to start building an e-commerce site using Directus and Next.

Fix No Access Issue, Update Database, Install GraphQL Playground
In this episode we are going to do a bit more cleanup (sorry), before building our app.