Directus 9 + Next

In this course we will be using Directus 9 as our API and CMS, and of course Nextjs for the frontend of our site. Kind of like we did with Making Websites With Next.js And Strapi series.

This time however we will add Tailwind into the mix and also include React Query right from the start for better performing API requests, caching, state management and so on. Oh, and also instead of using REST API we are going to use GraphQL for this series.

Link to video
Install Next, Directus, Tailwind, React Query, GraphQL And Fetch Data cover

Directus 9 + NextInstall Next, Directus, Tailwind, React Query, GraphQL And Fetch Data

In this first episode of Nextjs and Directus series we are going to set everything up and fetch some data to see if everything is working properly.

Episode  01  / Duration 37:56  / 
Link to video
Update Directus And Fix A Bug cover

Directus 9 + NextUpdate Directus And Fix A Bug

In this episode we are quickly going to update Directus, and also fix a bug that I noticed.

Episode  02  / Duration 08:56  / 
Link to video
Fix No Access Issue, Update Database, Install GraphQL Playground cover

Directus 9 + NextFix 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.

Episode  03  / Duration 09:46  / 
Link to video
Products and Categories cover

Directus 9 + NextProducts and Categories

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

Episode  04  / Duration 32:31  / 
Link to video
Fix M2M Relationship From Part 04 cover

Directus 9 + NextFix M2M Relationship From Part 04

In this episode we are going to fix a mistake that I made in part 04 of this course.

Episode  05  / Duration 06:28  / 
Link to video
Filter Products By Category cover

Directus 9 + NextFilter 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.

Episode  06  / Duration 27:06  / 
Link to video
Product Display Page cover

Directus 9 + NextProduct Display Page

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

Episode  07  / Duration 21:35  / 
Link to video
Product Options And Directus Has Some Problems cover

Directus 9 + NextProduct 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.

Episode  08  / Duration 19:50  / 
Link to video
Display Product Options cover

Directus 9 + NextDisplay Product Options

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

Episode  09  / Duration 16:31  / 
Link to video
Add To Cart cover

Directus 9 + NextAdd 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.

Episode  10  / Duration 36:08  / 
Link to video
Mini Cart And Zustand cover

Directus 9 + NextMini Cart And Zustand

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

Episode  11  / Duration 25:50  / 
Link to video
User Sign Up cover

Directus 9 + NextUser 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.

Episode  12  / Duration 20:34  / 
Link to video
User Authentication With NextAuth cover

Directus 9 + NextUser Authentication With NextAuth

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

Episode  13  / Duration 29:49  / 
Link to video
Protect Signup Form From Hackers cover

Directus 9 + NextProtect 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.

Episode  14  / Duration 04:38  / 
Get in touch