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 <a title="" href="https://watch-learn.com/courses/making-websites-nextjs-and-strapi" target="_self">Making Websites With Next.js And Strapi</a> 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.

Directus 9 + Next

In this series we are going to learn how to create a websites using Next.js. The main focus of the series will definitely be Next.js, but we will do some work with Strapi too, which we will use as our API and CMS

Making Websites With Next.js And Strapi

In this series we are going to learn basics of React library and all of it's advanced features that are applicable in the year 2020.

React 2020

In this series we are going to be using WordPress REST API and Sapper for Svelte to create a modern, headless website that is going to be using WordPress as a backend and Svelte as a frontend.

Creating Svelte, Sapper and WordPress Website

There was a bug in the previous episode of this series that I noticed once I was editing that video, so I'm going to show you that bug. That bug was fixed in the Directus version 9.0 which we are going to install in this video, but there appears to be a new bug in this version. I'm going to show you how to fix that bug in this video.

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

Update Directus And Fix A Bug

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

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.

Install Next, Directus, Tailwind, React Query, GraphQL And Fetch Data

So I have been using Directus 9 for a few weeks now. And actually my new website is made using Directus 9 and Next.js, I'm going to show you that setup near the end of the video.

Now, I know I told you in one of the videos that I'm using October CMS for the backend of my site, but I decided to change it because it was very slow when I put it online. I thought it was because of October CMS, but it turns out it was not.

Actually the problem was with the Image component from Next.js, but by the time that I found that out, I already migrated my backend to Directus 9. 

This was a good thing in hind site, because since Directus 9 is a Node.js app, just like Next.js, and because of that I was able to put both backend and frontend of my site to the same Digital Ocean Droplet, without much trouble. Doing the same thing with the backend that runs on PHP would be much more difficult, at least for me, since my DevOps skills are very limited. So this turned out pretty nice all in all. 

So as you can already guess I'm going to be talking about Directus 9 in this edition of "Let's checkout..." series. And also I'm going to be comparing it with Strapi... like, a lot... since they are very similar applications.

So Directus 9 has a pretty interesting history, and that is why I'm calling it Directus 9, and not just Directus, because Directus 8 and versions before it, where entirely different applications, ... I mean, they did the same thing but they were written in PHP - Zend framework to be exact, and Directus 9 is a Node application. 

Since Zend framework got depricated, Directus team decided to port it to Laravel framework, and also they wanted to test it out in Node as well. Node version turned out to be pretty fast to build, and it showed great promise. Main thing being that API responses were 10X faster than the PHP version.

As far as I know they are still developing community driven Laravel-PHP version, but Node version is the official API version for the platform, and that is the version that we are going to be focusing on.

Ok, first of all what is Directus 9. Well it's just a headless CMS, like Strapi that we covered on this channel. That means that you only get the CMS part, that will serve your data through an API, but you need to build the frontend yourself, with something like Next.js, Nuxt.js, React, Vue or even use it as an API for your mobile apps.  

As I've said, I will be comparing it to Strapi since they are very similar applications, but I will tell you right of the bat that I like Directus a bit more. Main difference from Strapi is that is a bit more technical, but not too much, and editing experience is for the most part very nice.

Also one difference is that for self hosted version of Directus 9 you get everything free, but for Strapi you have to pay $29/month to get up to 30 custom roles, even on self hosted version.

Frontend Tips

In this episode we are going to take a look at another headless CMS that is very similar to Strapi.

Let's Checkout... Directus 9

As you may remember I already did an episode about [localization and internationalization](https://watch-learn.com/making-websites-nextjs-and-strapi/multi-language), but at the time of recording that video Strapi didn’t have options for translating content. So we had to create additional fields in our content type that would serve as translations for original fields.

This is an OK solution if you only have 1 additional language, but imagine that you wanna translate your site or app to five languages. That would mean that you would have 5 additional fields for every translatable field.

Not an elegant soultion by any stretch.

But with version 3.6 of Strapi you get translation options out of the box. And to make things even better Next.js also got **Internationalized Routing** in version 10.


So in this episode we are going to take a look at how these two features play together.

Earth Icon by [Prosymbols](https://www.flaticon.com/authors/prosymbols) from [www.flaticon.com](https://www.flaticon.com/)

In this episode we are going to take look at new internationalization features of both Strapi and Next.js.

Internationalization (i18n)

So I’m currently working on a new site for Watch and Learn, the first MVP is already done and should be live soon, once I decide what I will use for hosting the frontend of the site. The stack that I’m using for the site is October CMS for the backend.

And of course the frontend is Next.js with TypeScript and Tailwind CSS that uses Just in Time compilation. Which turned out to be a really nice way of building the frontend. 

The reason I’m using October CMS for the backend is that my site has been running on October for a few years now and all my videos and data are there, and I don’t wanna waste time with transfering all of that data to another CMS because October is doing the job it needs to just fine.

Also since October is made with Laravel it makes it pretty easy to create your own APIs that you can connect to with something like Next.js, Vue, React and so on. 

So I was thinking about how to make pagination for “all videos” page, Currently it’s a classical pagination that you need to click on to get to the next set of items.

In my opinion this is not a very good pattern because normal pagination gives you redundant info, what I mean by that, is that the pages of a list don’t actually mean anything to the user, the user won’t know what to expect on the 2nd page, and what to expect on the 10th page.

So it’s better to just serve a list that the user can scroll through without any required interaction to see the next items in the list.

This is a familiar pattern that you can see on many apps and platforms like Facebook, Instagram, Youtube and so on.

And if you include filters with infinite scrolling this makes a very nice combo. Because when the user actually filters something he or she will have a general idea of what to expect in terms of content that will be returned.

So for my site I decided to go with Infinte Scroll because of the reasons mentioned earlier. 

Now [I already showed you how to make infinite scrolling with Infinite Scroll Component](https://watch-learn.com/making-websites-nextjs-and-strapi/infinite-scroll) in the previous video, but that component will make it hard for us to include filters to our list of items, because it is primarily made to do only infinite scrolling.

So on my site I decided to go with React Query which enables me to have Infinte Scrolling, Filtering and also everything else that React Query offers in terms of data fetching - like caching, content invalidation and so on.

In this video I’m going to show you how I did this.

Scroll Icon by [Freepik](https://www.freepik.com) from [www.flaticon.com](https://www.flaticon.com/)

In this video I'm going to show you how I implemented Infinite Scroll and filters on my new website.

Infinite Scroll And Filters With React Query

In the [previous episode](https://watch-learn.com/making-websites-nextjs-and-strapi/generate-content-faker) we generated pretty big list of posts. Now it's time to display those posts in our Nextjs and Strapi app. Of course it's not a very good idea to display all of those posts all at once, you should use pagination, load more or even better Infinite Scroll for that - and that is exactly what we are going to be doing in this episode.

To implement Infinite Scroll we will be using React plugin called `react-infinite-scroll-component`, this plugin is going to make developing this feature a breeze.

Scroll Icon by [Freepik](https://www.freepik.com) from [www.flaticon.com](https://www.flaticon.com/)

In this tutorial I'm going to show you how to quickly build Infinite Scroll in your Strapi and Next.js application.

Video Tutorials For Curious Frontend Developers

Latest tutorials

Directus 9 + NextUpdate Directus And Fix A Bug

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

Frontend TipsLet's Checkout... Directus 9

Making Websites With Next.js And StrapiInternationalization (i18n)

Frontend TipsInfinite Scroll And Filters With React Query

Making Websites With Next.js And StrapiInfinite Scroll

Latest Courses

Directus 9 + Next

Making Websites With Next.js And Strapi

React 2020

Creating Svelte, Sapper and WordPress Website

Get in touch