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

Namely if somebody gets a hold of the Admin Role ID he or she can easily then signup as an administrator to our app, and the do as they please in the admin area.

In this quick episode we are going to fix that.

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

Protect Signup Form From Hackers

Remix is a React framework similar to Next.js and I would say that it’s the only real competitor to Next.

It is focused on web standards and modern web app UX. Although Remix is pretty new to Open Source, it has been around for about two years now, but as a payed software that was recently Open Sourced.

The main selling point of Remix is that it embraces web standards and tries to leverage them to provide great user and developer experience. 

Remix is trying to bring old school web development practices and patterns to the modern JS world. So if you are and old school developer like me these things are going to be pretty familiar to you.

### Philosophy

Remix philosophy consists of few parts:

Embracing Server/Client model - which means that if you are doing things Remix way, most of your data is going to be coming from the server - there is no Static Site Generation or Incremental Static Generation in Remix, only server side rendering, for which Remix provides very nice APIs to make your life as a developer easier. 

If you wanna make your site faster this may sound a bit counter intuitive, but since you can transform your data on the server this means that you are sending only the data that the user needs on every request, so your payloads can be pretty small. 

If you are using modern web infrastructure combined with native web features like `prefetch` this can make your site very fast even without serving mostly static content.

Remix is very easy to deploy and plays nicely with [Vercel](https://vercel.com/), [Cloudflare Pages](https://pages.cloudflare.com/), [Cloudflare workers](https://workers.cloudflare.com/), [Fly.io](http://Fly.io) and many others, so you can easily serve your Remix site from the servers that are closest to your users using CDNs.

Another core philosophy is that it embraces native web standards like HTML, HTTP, Web Fetch API, Request, Response, URLSearchParams and others that already live in your browser. 

Progressive Enhancement is another big thing for Remix, and because of it, data layer of Remix can function with or without JS. It uses JS to provide nicer User Experience but you can add or remove data from your data source without using JS at all, because Remix knows how to work with the lowly `<form>` tag that has been around for 20+ years, and it can send the data to server without JS. Of course as you will see in this video Remix augmented the `<Form>` tag for 21 century, but it can also function like it’s 1999. 

### Setup

So now that you have general idea what Remix is, let’s get our feet wet and let me show you how I remade the site from Directus and Next series in Remix.

Installation of Remix was breeze, I managed to get most of the functionality that we have in that app in just four to five hours. 

Keep in mind that I already had a lot of code that I could reuse from that app, and I skipped the mini cart and sign in functionality because i didn’t wanna learn another library for authentication. Since we used Next Auth in Directus Next series, and it can only be used with Next.js. 

However there is a library called [Remix Auth](https://github.com/sergiodxa/remix-auth) that you can use for that, and it seems pretty similar to Next Auth. So if you need authentication in your app you can check that out. 

The only thing I installed when remaking this app was Tailwind, so that I can have the same design that we had in DIrectus Next app. 

To install Tailwind you can just follow a quick guide on [Tailwinds website](https://tailwindcss.com/docs/guides/remix), and you’ll be good to go in no time.

When you open the app in your editor you will see a folder structure that is similar to Next.js except all the important stuff is in the `app` folder. And in `app` folder you only have routes directory. Which is very similar to the pages directory in Next.js, because just like Next - Remix uses page based routing. So whatever you add in there will automatically get its own route. 

This is the folder structure that I ended up with when the app was finished.

Styles directory is generated by Tailwind, and all the other folders are pretty much just copy and paste from the Next.js site, except I needed to save them into `app` folder as opposed to the root folder of Next.js app. 

If you wanna see all the code there will be a link in the description to the [GitHub repo](https://github.com/ivandoric/remix-directus) that you can browse through.

### Products, categories, and Filters.

First thing I wanted to do was setup the homepage. And on the homepage we have few interesting functionalities. One is getting all of our products from Directus, getting all the categories for the Filter and also filtering functionality itself.

Homepage is of course `index.jsx` file in the `routes` folder. Now, my Next app uses React Query to get the data and to filter it. However this is not the Remix way, because, remember Remix respects the Server/Client philosophy, so it would be nice to embrace that and get the data from the server instead from the client.

So I removed the React Query part of the code, and leaned in to the server. 

And this is not anything new, because Next.js does the similar thing with `getServerSideProps` just here it works a bit differently.

First you create `models` directory and in it I created a file called `index.server.js` here I added all of the getter functions for my data. 

And if you have been following my Directus Next series you can see that here I’m pretty much using the same functions for getting the data. And also the same GraphQL queries that I have been using on the Directus Next site. 

You can return whatever you need from those functions. I’m exporting functions for getting all of my products, categories, and a function for getting my filtered products that accepts an array of category IDs to filter those products.

Now back in `index.jsx` you need to export a `loader` function that will talk to the server and get your actual data. 

For categories it’s easy, you can just use `useLoderData` Remix hook and get it from there. Products are a bit more complicated because we need to filter them. 

So for that I’m using the `useFetcher` Remix hook which will allow me to first of all display all the products. But when user selects a category it will send the category IDs to the loader function which will run a different different getter function to get my filtered data. 

Our fetcher is called products in this case, and the fetcher has a submit method on it. So whenever the state of the selected categories change it will submit it to the loader. 

And loader will receive a `get` request which we can parse, and then call the `getFilteredProducts` function with an array of IDs as a parameter to get the filtered products. 

This Workflow is very similar to the Directus Next app, except here all the data fetching is happening on the server and without the need for ReactQuery. 

And if we check our front page everything is working as expected.

### Meta

There is also a difference how Remix handles meta tags compared to Next.js. In Next you would import `Head` component, add it to the beginning of the layout on your page and then add the actual tags there, like `<title>` , `<description>` and whatever else you need. 

In Remix you would export `meta` function for every page, and that would overwrite all the default tags that you can define in `root.jsx`. `root.jsx` is similar to `_app.jsx` in Next.

Also you can add dynamic data to it, by passing in the `data` variable which will then have access to all the data that you get from the `loader` function on that page.

I’m doing that on the single product page to set the title of that page to be the name of the product.

### Dynamic routes

Now, to Link the product to the product page you first need to define that page. You can do that almost identically to Next.js, except you would use dollar sign notation for defining dynamic parts of your route instead of square brackets. 

In Next you would get the page by slug by writing `[slug].jsx` but in Remix that page would be called `$slug.jsx`.

Now, my case is a bit more complicated because I don’t just wanna display the name of product in the URL but I also wanna display a category. So I would have: `/products/product-category/product-name` . 

In Next and in Remix you could create a folder called products, and in it you would create another folder called `$category` or `[catgegory]` and in it you would add a file called `$slug.jsx` or `[slug].jsx` for Next.js. So this is almost the same in both frameworks. 

But, in Remix you could also just create a file with the name: `products.$category.$slug.jsx` and you would get the same thing, which is cool. So I decided to go with that for my single product page.

Also I suggest to read up about Nested Routing in Remix which is really cool. You can do that on this address. [https://remix.run/docs/en/v1/guides/routing](https://remix.run/docs/en/v1/guides/routing#what-is-nested-routing)

### Link

To link my products to the single product page, I used the `Link` component, which is also similar to the `Link` component in Next. Except in remix you don’t have `href` property but instead you use `to` property. And also you don’t need to wrap `Link` component around anchor tag like you need to do it Next.js.

You can see the link to my products in the `ProductCard.jsx` and you can see the difference between Next and Remix. It’s very similar for the most part. The only difference is the `href` property and the missing anchor tag.

### Header

In Next.js I added the Header component which holds the Logo of the shop and navigation in `_app.jsx` . As mentioned before Remix has a file called `root.jsx` that serves the same purpose. So we can add `Header` component that is visible throughout the site there.

### Sign up

And there is just one more thing that I wanna show you, and that is the `Form` component. Which I already talked a bit about at the beginning, and said how it embraces web standards and old school way of dealing with forms. 

On Sign up page you can register and create a new user in Directus. To do that in Next we used `useMutation` hook from React Query, and we would get the data from the form by creating `handleSubmit` function, for which we would prevent default functionality of the form and then send the data to the server from there. 

This is the usual React pattern.

But since Remix embraces the `form` we can do things a bit differently. So first of all I changed `form` to be `Form` with capital F. Fun fact here is that you could leave it as just `form` with lower case F, and it would also work, it would just reload the page on sending the data, because that is what forms do, and that is the reason we need to use `preventDefault` in the Next version. 

In Remix I just added the method of `post` to the form, and I want it to do an action that is defined on the page it is on. But you could also add an action that will get instructions from another page. 

Then you need to define the action by exporting `action` function to which you pass a `request` object. And then you can easily access the data from the form by using `formData.get` function. 

When the data is defined I just send it to the server with `createUser` function, which I defined in the `user.server.js` file in `models` folder. Function for sending the data is the same as in Next.js version of the site. 

Now I’m waiting for the response from the server, and if I get `create_users_item` to be equal to `null` I can return an error. Since I’m using Directus this means that the user already exists. 

If the user does not exist then I can just redirect the user to the thank you page after it’s created on Directus API. 

Now if we get an error we can get that information by using *`useActionData`* Remix hook. And then we can display an error in our layout like this.

### Conclusion

Of course there are a lot more things to cover about Remix but I cant do that in one video. This video is just for you to get a taste of what is possible in Remix and how it works.

My time with the framework was for the most part very enjoyable.

I think it’s an all around great framework that is just going to get better with time, and is a real competitor to Nextjs. And competition is going to be great for us developers.

If you wanna take a look at the code I used in this video you can check it out on Github.

Frontend Tips

In this video we are going to checkout Remix. I’ve been playing around with Remix for the last couple of days. This video is mostly going to be about that journey and how Remix compares to Next.js.

Let's Checkout Remix ... And Compare It To Next.js

We are also going to add user area page that will only be accessible to authenticated users.  NextAuth is going to make this pretty simple for us to implement as you will see. 

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

User Authentication With NextAuth

We are going to use special endpoint that Directus provides us, and send new user information using Next.js frontend. 

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

User Sign Up

But we are going to have to change some things that we created in the previous episode to make this work because I miscalculated a bit how this is supposed to work. But those are going to be just small changes.

And you know... these things happen in software development, sometimes you have to change your approach mid way if your assumptions were incorrect or you haven’t thought things through, which I obviously did not.

We are also going to introduce a bit of state management to our app, which I’m not very happy about because I thought we would be able to rely solely on React Query for that, but turns out that we can’t, or maybe I’m missing something and that is why it’s not working properly.

I will show you what I mean during this episode.

But this is not all bad, because I got to play with Zustand -  a very light weight state management library, which as you will see is a joy to use.

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

Mini Cart And Zustand

In this first part we are going to create add to cart button, and instead of using something like Redux we are actually going to try to use Directus and React Query for our state management. 

Directus is going to be used to persist the data in the user session collection that we are going to create. There we will temporarily save the users order and persist the data that way.

So we are going to start adding our products to temporary order object in this episode. 

And in the next episode we are going to finish this functionality by implementing user cart. And display current order that way. 



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.

Video Tutorials For Curious Frontend Developers

Latest tutorials

Directus 9 + NextProtect Signup Form From Hackers

Frontend TipsLet's Checkout Remix ... And Compare It To Next.js

Directus 9 + NextUser Authentication With NextAuth

Directus 9 + NextUser Sign Up

Directus 9 + NextMini Cart And Zustand

Directus 9 + NextAdd To Cart

Latest Courses

Directus 9 + Next

Making Websites With Next.js And Strapi

React 2020

Creating Svelte, Sapper and WordPress Website

Get in touch