Install 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.
You guys seemed to like my last video about Directus 9, and many of you reached out and asked for more Directus 9 content. So I decided to make it a series where 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 Strapi and Nextjs 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.
Also I can’t think of a better time to start this series, Vercel just released Nextjs 12, which brought with it some major changes and improvements to the framework, Directus is still in Beta or Release Candidate phase, much has changed on that front from the latest video so this would be a great time to check everything out.
The goal of this series is to create a website and publish it online, we will be using Digital Ocean for that. And also near the end of the series I’m going to show you how to implement automatic deployments using Github Actions. Just like I did for my website.
But before all that we have to start somewhere, the goals for this episode will be:
- Installing Directus 9
- Next.js
- Tailwind
- React Query
- Creating a collection in Directus 9 and display it on page with GraphQL