I updated our website to use React with Next.js and DatoCMS... here is what I learned!
Tags: react, nextjs, javascript
Published: 2020-02-19 08:03:14

I was tasked with updating our website from the static HTML-pages we've had to something that would be easier to maintain and update. I was asked to re-do the entire site using DatoCMS and the React framework "Next.js".

I was tasked with updating our website from the static HTML-pages we've had to something that would be easier to maintain and update. I was asked to re-do the entire site using **DatoCMS** and the **React framework "Next.js"**.

## React with Next.js
I have dabbled in React a couple of times, gone through a couple of courses and even though the **"create-react-app"** is extremely handy... I still find it **a bit cumbersome** with the setup to get it up and running. **That was until** I got the tip to **check out [Next.js](https://nextjs.org/)** which, on top of giving you a **"Zero Setup"-setup**, gives you **server-side-rendered pages** and a whole lot more.

##"Zero Setup"-Setup
If you have some experience at all with React, getting started with Next.js is a breeze! You'll find their **["Getting started" tutorial here.](https://nextjs.org/learn/)**

**Going through the Next.js tutorial** you will quickly realise that **not much is different** form the plain old **React** we've come to love, **apart from some imports** to use Next's own components. It **definitely easier** to get going and you **get some great things like server-side-rendering of your pages for free**. 


##What do we want? Deployment! When do we want it? NOW!
Server-side rendering is great and all... but **what I personally LOVE** about using **Next.js** if how easy it is to deploy your entire React-site to their hosting service **Zeit**.

![](https://media.giphy.com/media/l3V0tsH8p70c29ZSw/giphy.gif)

Deploying with Next.js is almost absurdly easy, is so easy I just did it by accident right **now**... For real! **Just type the word "now"**, sit back and watch the **magic** unfold before your eyes! 

![](https://www.datocms-assets.com/15879/1574788397-untitled-1.gif)


**Remembering commands can be tough... here you can copy my code:**  
`now`

## That's literally it!

![](https://media.giphy.com/media/LpLd2NGvpaiys/giphy.gif)

## So why did we switch over to React with Next.js?

Our website has up until now been static HTML pages and **we needed a faster and easier way to quickly make changes and updates**. First of all, we needed something modular to quickly add new content to our site, this was covered by **React**, then we needed some way to easily and quickly update the content... we needed a **CMS**! So which one did we go for? **We love Dango** and use it a lot, therefore it has come naturally to use **DjangoCMS**. But fot this project we opted for something else... we went with **DatoCMS**

# DATO CMS

**So what is DatoCMS really?** On their website they claim themselves to be **"The API-based CMS your editors will love"**... which actually seems pretty much like a great description of what it is.

With Dato you **define models** to use with their **web based GUI**, you **populate your models with data** and then you **access the data** though **their API** using **GraphQL**.

## GraphQL... You want PK´s with that? 🍟
We've all used **REST-API's** but what's the deal with **GraphQL**?

I'we heard about GraphQL several times and I had understood that it gives more flexibility over queries. So it was time to put it to the test! **What I hadn't realised** with **GraphQL** was the fact that you now can use **one single API-Endpoint** for **several completely different queries**. This in combination with the fact that you **"Custom Order"** what results you want and how you want it.

So instead of getting the result of some specific API-endpoint which might return way more data than we actually need, you just declare what results you actually want and care about.

For example we want to **display the logotypes of the technologies we use at Will & Skill**. So with **DatoCMS** we define a **model** called **Technology**. It has a **name**, an image-field called **logotype** and an **ID**.

![](https://www.datocms-assets.com/15879/1574788447-screenshot-2018-10-29-at-11-06-02.png)


So **what might a GraphQL request look like** to get a **list of all the technologies** we have entered to **DatoCMS**?

First of all we get a list of all the technologies with their respective ID:

**GraphQL Query**

We simply write out what we want:
```
{
    allTechnologys{
        id
    }
}
```
**API Response**

And this is what we get back:
```
 "allTechnologys": [
      {
        "id": "438377",
      },
      {
        "id": "438412",
      },
      {
        "id": "438376",
      },
      {
        "id": "438427",
      },
      {
        "id": "438365",
      }
    ],
```
But what if we also want the **names** of the technologies? Easy, **just add the name field to the query** and **voilà**!

**GraphQL Query**
```
{
    allTechnologys{
        id
        name
    }
}
```
**API Response**
```
 "allTechnologys": [
      {
        "id": "438377",
        "name": "React"
      },
      {
        "id": "438412",
        "name": "React Native"
      },
      {
        "id": "438376",
        "name": "Angular"
      },
      {
        "id": "438427",
        "name": "Swift"
      },
      {
        "id": "438365",
        "name": "Django"
      }
    ],
```

**Let's say we also want** to display the corresponding **logotypes fo the technologies**... just **add the logotype field** and the **parameters you want** (in this case we are just interested in the url of the logotype)

**GraphQL Query**
```
{
    allTechnologys{
        id
        name
        logotype{
            url
        }
    }
}
```
**API Response**
```
"allTechnologys": [
      {
        "id": "438377",
        "name": "React",
        "logotype": {
          "url": "https://www.datocms-assets.com/7863/1540395724-logoreactredux.png"
        }
      },
      {
        "id": "438412",
        "name": "React Native",
        "logotype": {
          "url": "https://www.datocms-assets.com/7863/1540394206-logoreactnative.png"
        }
      },
      {
        "id": "438376",
        "name": "Angular",
        "logotype": {
          "url": "https://www.datocms-assets.com/7863/1540394191-logoangular.png"
        }
      },
      {
        "id": "438427",
        "name": "Swift",
        "logotype": {
          "url": "https://www.datocms-assets.com/7863/1540394129-logoswift.png"
        }
      },
      {
        "id": "438365",
        "name": "Django",
        "logotype": {
          "url": "https://www.datocms-assets.com/7863/1540393940-logodjango.png"
        }
      }
    ],
```
As you can see, now you can go all **Burger King™** up on your API calls and **"Have it your way"**... SUCCESS! 🍔🍔🍔

![](https://media.giphy.com/media/26uflHoMuKMUInB5K/giphy.gif)


Stay tuned for part 2! 

This post was originally posted on our Blog: [Will & Skill, A Digital Agency based in Stockholm - I updated our website using React and Next.js](https://www.willandskill.se/en/i-updated-our-website-to-use-react-with-next-js-and-datocms-here-is-what-i-learne/)