---
date: "2020-01-01"
title: "How to Automate the Backend stuffs with Open Source Headless CMS Strapi and Docker"
category: "docker"
tags: ["strapi", "cms"]
description: "Learn how to get started with Strapi which is an Open Source Headless CMS using Docker."
---

In this tutorial, we'll learn about the problems (related to saving our data) that we face while developing front-end applications. We'll explore an open source headless CMS, [Strapi](https://strapi.io/). We'll also learn about how to install and get started with Strapi using [Docker](https://www.docker.com/).

One of the aspects that always tend to be a blocker to me while developing front-end applications is the need for a ways to save the data from the front-end. In the past, I've use [Firebase](https://firebase.google.com/) for saving my data to the database. However, it becomes difficult to manage this as Firebase has strict [data types](https://firebase.google.com/docs/firestore/manage-data/data-types) as well as issues with [scaling](https://itnext.io/lessons-from-a-long-week-with-firebase-b433ce8ee49e), [pricing](https://crisp.chat/blog/why-you-should-never-use-firebase-realtime-database/), etc. For small apps and projects, Firebase works perfectly fine. However, for bigger apps, it presents its own set of problems. For those who don't know, Firebase is Google's mobile platform that helps you quickly develop high-quality apps and grow your business.

As a result, I was trying to find an alternate tool which would take care of the back-end. Recently, I came across [Strapi](https://strapi.io/) which is an open source Headless CMS. It's very easy to [get started with Strapi](https://strapi.io/documentation/3.0.0-beta.x/getting-started/quick-start.html). Also, it has a nice set of plugins in their [marketplace](https://strapi.io/marketplace).

> I'll also write about [Hasura](https://hasura.io/) which connects to our databases & microservices and instantly gives us a production-ready GraphQL API. It's another tool that I found which takes care of the back-end.

## Table of Contents

## Getting started with Strapi

We'll be using the [Docker version of Strapi](https://github.com/strapi/strapi-docker). This will help us manage the database inside a containerized environment. In case our database gets corrupted, we can remove the container and re-build it again. There are many other advantages of using Docker. Instructions for installing Docker can be obtained from the [Docker documentation](https://docs.docker.com/v17.09/engine/installation/). Once the Docker installation is complete, we can proceed towards installing Strapi. We'll be using Postgres as our database. But, we can also use [SQLite](https://strapi.io/documentation/3.0.0-beta.x/guides/databases.html#sqlite-installation), [MongoDB](https://strapi.io/documentation/3.0.0-beta.x/guides/databases.html#mongodb-installation), MySQL and MariaDB. Example applications using these databases are present in the [Strapi Docker repository](https://github.com/strapi/strapi-docker/tree/master/examples).

## Installing Strapi

First, we need to create a directory named `backend` and then download the [docker-compose.yml](https://github.com/strapi/strapi-docker/blob/master/examples/postgresql/docker-compose.yml) file from the [strapi-docker repository](https://github.com/strapi/strapi-docker). Now, we need to start Docker. Once Docker is up and running, we can go inside the `backend` directory and run our Strapi container:

```bash
cd backend && docker-compose up
```

This will pull **postgres** and **strapi/strapi** images from [Docker Hub](https://hub.docker.com/). So, it might take some time for this operation to complete. Once, everything is done, we'll get the following output:

![Message shown on completing Strapi installation](/images/content/automate-backend-stuffs-with-strapi-and-docker/1.png)

## Creating our first administrator profile

We can now visit [http://localhost:1337/admin](http://localhost:1337/admin) to create our first administrator. On visiting that url, we'll get the following form:

![Form for creating an administrator](/images/content/automate-backend-stuffs-with-strapi-and-docker/2.png)

Once we fill up the form with the required details, we'll be inside the admin panel of Strapi:

![Strapi admin panel](/images/content/automate-backend-stuffs-with-strapi-and-docker/3.png)

Once we're here, it means that our Strapi installation went perfectly fine and everytime Strapi asks us for login credentials, we can login to the admin panel using the credentials we provided while creating the administrator.

## Adding a new content-type

By default, we should have three content-types: **Permission**, **Role** and **User**.

![Default content-types](/images/content/automate-backend-stuffs-with-strapi-and-docker/4.png)

Now, we want to add a **Product** content-type. To do so, we need to click on the

**Create new content-type** link. In the **Display Name** field, we can type **Product**:

![Adding a new content-type](/images/content/automate-backend-stuffs-with-strapi-and-docker/5.png)

Then, we can click on **Continue** to add fields for that content-type:

![Adding fields for a new content-type](/images/content/automate-backend-stuffs-with-strapi-and-docker/6.png)

We'll add a new **Text** field and call it **name** and select **Short text** as its **type**:

![Adding Name text field for Product content-type](/images/content/automate-backend-stuffs-with-strapi-and-docker/7.png)

We'll add another **Text** field and call it **url** and select **Short text** as its **type**:

![Adding URL text field for Product content-type](/images/content/automate-backend-stuffs-with-strapi-and-docker/8.png)

We'll add another **Text** field and call it **description** and select **Long text** as its **type**:

![Adding Description text field for Product content-type](/images/content/automate-backend-stuffs-with-strapi-and-docker/9.png)

We'll add a **Media** field and call it **image** and select **Single media** as its **type**:

![Adding Image media field for Product content-type](/images/content/automate-backend-stuffs-with-strapi-and-docker/10.png)

We can now click on the **Finish** button and then, we need to click on the **Save** button to save our new content-type.

![Saving our Product content-type](/images/content/automate-backend-stuffs-with-strapi-and-docker/11.png)

When we click on the **Save** button, the Strapi server will automatically restart:

![Restarting the Strapi server](/images/content/automate-backend-stuffs-with-strapi-and-docker/12.png)

Once the server restarts completely, we can see our new Product content-type on the sidebar:

![Viewing the entries for Product content-type](/images/content/automate-backend-stuffs-with-strapi-and-docker/13.png)

The Product content-type won't have any entries at the moment as we haven't added any entry yet! We can click on **Add New Product** button to add a new entry to the Product content-type:

![Adding a new entry for Product content-type](/images/content/automate-backend-stuffs-with-strapi-and-docker/14.png)

We can add the details of our product and then click on the **Save** button to save the entry:

![All entries for Product content-type](/images/content/automate-backend-stuffs-with-strapi-and-docker/15.png)

## Viewing entries of a content-type

Strapi generates [routes](https://strapi.io/documentation/3.0.0-beta.x/concepts/routing.html#concept) for our content-types automatically. But, if we visit [http://localhost:1337/products](http://localhost:1337/products), we'd get a **403** response. This happens as our permission isn't set up for that content-type. To resolve this issue, we need to visit **Roles & Permissions** tab and click on the **Public** role:

![Add Public role for Product content-type](/images/content/automate-backend-stuffs-with-strapi-and-docker/16.png)

In the Public role tab, we need to find **Product** inside the **Permissions** tab. We need to allow all operations on the Product content-type. We can do so by selecting all the operations (count, create, delete, find, findone and update) or by clicking on **Select All** checkbox.

![Update permissions for Product content-type](/images/content/automate-backend-stuffs-with-strapi-and-docker/17.png)

Next, we need to click on the **Save** button on the top right. Now, if we visit [http://localhost:1337/products](http://localhost:1337/products), we'd get a proper response:

![Entries for Product content-type](/images/content/automate-backend-stuffs-with-strapi-and-docker/18.png)

## Creating a new entry for a content-type

Based on the permission we've set for the Product content-type, We can also create new entries using the API. We'll be using the [Postman](https://www.getpostman.com/) tool to create a new Product entry.

We just need to do a **POST** request to [http://localhost:1337/products](http://localhost:1337/products) endpoint with the following request body:

![Creating a new entry for Product content-type](/images/content/automate-backend-stuffs-with-strapi-and-docker/19.png)

We would get the following response once the entry is created:

![Response for creating an entry for Product content-type](/images/content/automate-backend-stuffs-with-strapi-and-docker/20.png)

## Conclusion

We've leveraged Strapi, a Headless CMS to design the APIs for our back-end application. In the subsequest tutorials, we'd utlize these APIs to build front-end applications.

I hope that this tutorial helps you in your future projects.


Learn how to get started with Strapi which is an Open Source Headless CMS using Docker.

How to Automate the Backend stuffs with Open Source Headless CMS Strapi and Docker

Learn how to build components and design-systems using TailwindCSS.

What is TailwindCSS and what problems does this new CSS framework solve for us

---
date: "2020-01-15"
title: "Integrating TailwindCSS with Next.js"
category: "javascript"
tags: ["react.js", "next.js", "tailwind"]
description: "Learn how to use TailwindCSS with Next.js to build maintainable front-end applications."
---

In this tutorial, we'll learn how to integrate [TailwindCSS](https://tailwindcss.com/) with [Next.js](https://nextjs.org/).

## Table of Contents

## What is Next.js?

[Next.js](https://nextjs.org/) is a React framework which provides Server-Side Rendering out of box. It's a very popular Node.js framework with [over 43k stars on Github](https://github.com/zeit/next.js). It provides a [several features](https://nextjs.org/#features) like [Server-Side rendering](https://nextjs.org/features/server-side-rendering), [Static Exporting](https://nextjs.org/features/static-exporting), [CSS-in-JS](https://nextjs.org/features/css-in-js), etc.

I've worked with Next.js for more than a year and I liked the overall Developer Experience. It's pretty easy to create new pages, add new plugin, routing, etc. On top of all these, they've a lot of [starter templates (or examples)](https://github.com/zeit/next.js/tree/canary/examples/).

Deploying Next.js applications to production using [Zeit](https://zeit.co/) is also [pretty simple](https://zeit.co/solutions/nextjs).

## What is TailwindCSS?

I've already covered about [TailwindCSS](https://tailwindcss.com/) in one of my [previous posts](https://www.nirmalyaghosh.com/what-is-tailwind-css). In short, TailwindCSS is a utility-first CSS framework which aims to provide us with a set of utlity classes (like flex, block, inline-block, etc.). In addition to that, it also provides us utility classes to create CSS grids, responsive designs as well as style hover, focus and active pseudo-classes.

## Getting started

Let's start by [bootstrapping a Next.js application](https://github.com/zeit/next.js#setup). To do so, we need to run the following command:

```bash
npx create-next-app
```

If everything works fine, you should get an output like the following:

![Bootstrapping a Next.js application](/images/content/integrating-tailwindcss-with-next-js/1.png)

Once the installation is complete, we'll get a new `frontend` directory as that's the name we gave while creating the application. Let's go inside the `frontend` and start the server:

```bash
cd frontend && yarn dev
```

Now,if we visit [http://localhost:3000](http://localhost:3000/), we'll see the following page:

![Sample Next.js application](/images/content/integrating-tailwindcss-with-next-js/2.png)

## Installing TailwindCSS

I've written about how to integrate TailwindCSS with React in one of my [previous posts](https://www.nirmalyaghosh.com/what-is-tailwind-css). The process of integrating TailwindCSS with Next.js will be a similar one.

First, we need to install TailwindCSS:

```bash
yarn add tailwindcss
```

If you prefer npm, you can run the following command instead of the above one:

```bash
npm install tailwindcss
```

Next, we need to use the @tailwind directive to inject Tailwind's base, components, and utilities styles into our CSS. To do that we need to create a new file at `public/assets/styles/vendors.css` add the following code to it:

```scss:public/assets/styles/vendors.css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Next, we need to add the `build:style` script to our `package.json` file:

```json:package.json
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "build:style": "tailwind build public/assets/styles/vendors.css -o public/assets/styles/tailwind.css"
},
```

Now, the `build:style` command will generate a new `public/assets/styles/tailwind.css` file whenever we run it:

![Generating new tailwind.css file](/images/content/integrating-tailwindcss-with-next-js/3.png)

Next, we need to add the generated file to our `pages/index.js` file:

```js
import React from "react";
import Head from "next/head";
import Nav from "../components/nav";
import "../public/assets/styles/tailwind.css";
```

However, if we visit [http://localhost:3000](http://localhost:3000/), we'll get the following error:

![Error while compiling css files on Next.js](/images/content/integrating-tailwindcss-with-next-js/4.png)

This happens because Next.js doesn't know how to process this file as there is no [Webpack loader](https://webpack.js.org/concepts#loaders) installed in our application which can help in processing the `.css` file. To resolve this issue, we'll have to install the [next-css](https://github.com/zeit/next-plugins/tree/master/packages/next-css) plugin:

```bash
yarn add @zeit/next-css
```

Next, we need to configure Next.js to use that loader. To do that, we need to create a [next.config.js](https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config) in the root of our project and add the following code to it:

```js
const withCSS = require("@zeit/next-css");

module.exports = withCSS({});
```

That's all we need to do to make TailwindCSS work with Next.js. To verify whether TailwindCSS is working or not, we can add a TailwindCSS class. We can add the `bg-blue-900 py-8` class to our `pages/index.js` file:

```js
const Home = () => (
  <div>
    <Head>
      <title>Home</title>
      <link rel="icon" href="/favicon.ico" />
    </Head>
    <Nav />
    <div className="hero bg-blue-100 py-8">
      <h1 className="title">Welcome to Next.js!</h1>
      <p className="description">
        To get started, edit <code>pages/index.js</code> and save to reload.
      </p>
```

Now, if we restart our server and visit [http://localhost:3000](http://localhost:3000/), we'll see that TailwindCSS is working as expected:

![Integrating TailwindCSS with Next.js](/images/content/integrating-tailwindcss-with-next-js/5.png)

If you want to know more about configuring Tailwind, you can read it [here](https://www.nirmalyaghosh.com/what-is-tailwind-css).

## Conclusion

In this tutorial, we've learnt how to use TailwindCSS with a Next.js application. In the future, we'll build a [ProductHunt](https://www.producthunt.com/) clone using [React](https://reactjs.org/) and [GraphQL](https://graphql.org/).

I hope that this tutorial helps you in your future projects.


Learn how to use TailwindCSS with Next.js to build maintainable front-end applications.

Integrating TailwindCSS with Next.js

---
date: "2020-01-22"
title: "Understanding Component-Oriented Styling using Styletron"
category: "css"
tags: ["react.js"]
description: "Learn how to style your React components using Styletron."
---

In this tutorial, we'll learn about the problems with styling [React](https://reactjs.org/) applications and how we can solve them using [Styletron](https://www.styletron.org/).

## Table of Contents

## Introduction

I've been using [React](https://reactjs.org/) for quite some time now. In that time, the one thing which I've felt is most difficult while creating React applications is **how to style them in a maintainable manner**. There are various ways in which we can styles applications:

- [Styled components](https://styled-components.com/)
- [Emotion](https://emotion.sh/docs/introduction)
- [CSS Modules](https://github.com/css-modules/css-modules)
- [Glamour](https://github.com/threepointone/glamor)
- [Fela](http://fela.js.org/)
- [Styletron](https://github.com/styletron/styletron)

All of these will generate classes based on how we write the styles for each class.

```jsx
const Button = styled.button`
  background: ${(props) => (props.primary ? "palevioletred" : "white")};
  color: ${(props) => (props.primary ? "white" : "palevioletred")};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;
render(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>
);
```

The above code will generate the following HTML:

```html
<div>
  <button class="sc-fzXfMz bXoZBN">Normal</button>
  <button class="sc-fzXfMz fLZIOt">Primary</button>
</div>
```

It will also generate the following buttons:

![Buttons using Styled Components](/images/content/understanding-component-oriented-styling-using-styletron/1.png)

The generate CSS will be:

```css
.bXoZBN {
  color: palevioletred;
  font-size: 1em;
  background: white;
  margin: 1em;
  padding: 0.25em 1em;
  border-width: 2px;
  border-style: solid;
  border-color: palevioletred;
  border-image: initial;
  border-radius: 3px;
}

.fLZIOt {
  color: white;
  font-size: 1em;
  background: palevioletred;
  margin: 1em;
  padding: 0.25em 1em;
  border-width: 2px;
  border-style: solid;
  border-color: palevioletred;
  border-image: initial;
  border-radius: 3px;
}
```

As we can see here that based on the styles, each component will generate a different class. This is very good when we want to create a component library or we want to create separate styles for everything in our application. The downside is that, as our application grows, the amount of styles also grows. In most cases, these styles are injected inline and are downloaded before the HTML is rendered on the page. Having a large amount of inline-styles will slow down the initial loading of your page. However, once the page is cached, the subsequent page loads will be faster.

What if the [CSS-in-JS](https://cssinjs.org/) adapter we're using could generate classes for each style definition and then re-use them across all our components. For example, if our adapter could generate a class like:

```css
.text-white {
  color: white;
}
```

Then, this could be re-used in our component to generate HTML like:

```html
<div>
  <button class="text-white bg-orange">Normal</button>
  <button class="text-white bg-red">Primary</button>
</div>
```

In this case, the amount of styles will be much lesser as the adapter isn't creating new styles for all the components. Instead, it's creating classes for each style definition and re-using them for all our components.

This is exactly what [Styletron](https://www.styletron.org/) does.

We can just code like:

```jsx
import { useStyletron } from "styletron-react";
export default () => {
  const [css] = useStyletron();
  return (
    <a
      href="/getting-started"
      className={css({
        fontSize: "20px",
        color: "red",
      })}
    >
      Start!
    </a>
  );
};
```

The above code will generate the following HTML:

```html
<html>
  <head>
    <style>
      .foo {
        font-size: 20px;
      }
      .bar {
        color: red;
      }
    </style>
  </head>
  <body>
    <a href="/getting-started" class="foo bar">Start!</a>
  </body>
</html>
```

It will also generate the following link:

![Link using Styletron](/images/content/understanding-component-oriented-styling-using-styletron/2.png)

## Features of Styletron

Styletron has a [host of features](https://www.styletron.org/concepts) like:

1. [Defining our own Media Queries And Pseudo Classes](https://www.styletron.org/concepts/#media-queries-and-pseudo-classes)
2. [Using CSS Selectors](https://www.styletron.org/concepts/#selectors)
3. [Using our own Fonts](https://www.styletron.org/concepts/#fonts)
4. [Using Keyframes](https://www.styletron.org/concepts/#keyframes)
5. [Vendor Prefixes are added by Styletron](https://www.styletron.org/concepts/#vendor-prefixes)
6. [Theming](https://www.styletron.org/react/#themes)
7. [Testing](https://www.styletron.org/react/#testing)
8. [Debugging](https://www.styletron.org/react/#debugging)

## Usages

We can use Styletron [with React](https://www.styletron.org/react/). It already has examples for using with the following:

1. [React](https://www.styletron.org/#with-react)
2. [Gatsby](https://www.styletron.org/#with-gatsby)
3. [Nextjs](https://www.styletron.org/#with-nextjs)

## Conclusion

In this article, we've learnt about Styletron and how it can help us reduce the amount of styles that we ship with our application. I hope that this article helps you in your future projects.


Learn how to style your React components using Styletron.

Understanding Component-Oriented Styling using Styletron

---
date: "2020-01-29"
title: "Using Mirage.js to jumpstart your frontend development"
category: "javascript"
tags: ["api"]
description: "Learn how to build front-end applications without any back-end APIs using Mirage."
---

In this article, we'll learn about how to build a front-end application without back-end APIs using [Mirage](https://miragejs.com/).

## Table of Contents

## Introduction

As a front-end developer, I've faced multiple issues while integrating front-end applications with back-end APIs. Most of the time, the issue that I've faced was that the back-end isn't ready yet and as a result, I had to either wait for it to be completed or work with static mock data. The problem with working with static mock data is that we won't be able to create, update or delete any data as it isn't persistent data. We can only read data from a sample `.json` file and import it to test our front-end application. As a result, we'll never be sure if our application is working as expected until and unless the whole back-end is ready.

Recently, I came across [Mirage](https://miragejs.com/) which is an API mocking library that lets us build, test and share a complete working JavaScript application without having to rely on any backend services. Unlike other mocking libraries, Mirage makes it easy to recreate dynamic scenarios, the kind that are typically only possible when using a real production server.

Let's learn more about how this tool works in details.

## Getting started with Mirage

Let's create a new application from scratch:

```bash
mkdir mirage-mock-api && cd mirage-mock-api
```

Now, let's install Mirage in our application:

```bash
yarn add --dev miragejs
```

Next, we'll create a route to get a list of dog breeds. Let's create a new file called `server.js` inside `src` directory:

```js:src/server.js

const Mirage = require("miragejs");

function makeServer({ environment = "development" } = {}) {
  let server = new Mirage.Server({
    environment,

    models: {
      dog: Mirage.Model,
    },

    seeds(server) {
      server.create("dog", { name: "Labrador Retrievers" });
      server.create("dog", { name: "German Shepherds" });
    },

    routes() {
      this.namespace = "api";

      this.get("/dogs", (schema) => {
        return schema.dogs.all();
      });
    },
  });

  return server;
}

module.exports = {
  makeServer,
};
```

## Adding Mirage to our front-end application

Let's create a [React](https://reactjs.org/) application using [Create React App](https://create-react-app.dev/):

```bash
npx create-react-app mirage-react-app && cd mirage-react-app
```

Now, let's import the Mirage app that we just created:

```js:src/index.js

import React from "react";
import ReactDOM from "react-dom";
import { makeServer } from "mirage-mock-api/src/server";

import App from "./App";

if (process.env.NODE_ENV === "development") {
  makeServer();
}

ReactDOM.render(<App />, document.getElementById("root"));
```

Also, let's test our Mirage API:

```js:src/App.js

import React, { useState, useEffect } from "react";

export default function App() {
  let [dogs, setDogs] = useState([]);

  useEffect(() => {
    fetch("/api/dogs")
      .then((res) => res.json())
      .then((json) => {
        setDogs(json.dogs);
      });
  }, []);

  return (
    <ul data-testid="dogs">
      {dogs.map((dog) => (
        <li key={dog.id} data-testid={`dog-${dog.id}`}>
          {dog.name}
        </li>
      ))}
    </ul>
  );
}
```

Now, if we visit [http://localhost:3000](http://localhost:3000/), we'll see the Mirage API:

![Mirage API](/images/content/using-mirage-js-to-jumpstart-your-frontend-development/1.png)

## Features of Mirage

1. [Database](https://miragejs.com/docs/main-concepts/database)
2. [Models](https://miragejs.com/docs/main-concepts/models)
3. [Relationships](https://miragejs.com/docs/main-concepts/relationships)
4. [Factories](https://miragejs.com/docs/main-concepts/factories)
5. [Fixtures](https://miragejs.com/docs/main-concepts/fixtures)
6. [Serializers](https://miragejs.com/docs/main-concepts/serializers)

## References

The front-end application is available [here](https://github.com/ghoshnirmalya/tutorial-blogs/tree/master/apps/mirage-mock-api) and the back-end application is available [here](https://github.com/ghoshnirmalya/tutorial-blogs/tree/master/apps/mirage-react-app).

## Conclusion

In this article, we've learnt about Mirage and how it can help us develop front-end applications even when the back-end part isn't ready! I hope that this article helps you in your future projects.


Learn how to build front-end applications without any back-end APIs using Mirage.

Using Mirage.js to jumpstart your frontend development

---
date: "2020-03-30"
title: "How to Authenticate your Next.js application using Open Source Headless CMS Strapi"
category: "javascript"
tags: ["react.js"]
description: "Learn how to authenticate a front-end application using Next.js and Strapi."
---

In this tutorial, we'll learn about how to authenticate a front-end application using [Next.js](https://nextjs.org/) and [Strapi](https://strapi.io/).

## Table of Contents

## Introduction

We'll start from where we finished in [How to Automate the Backend stuffs with Open Source Headless CMS Strapi and Docker](/blog/how-to-automate-the-backend-stuffs-with-open-source-headless-cms-strapi-and-docker). The starter code is available on [Github](https://github.com/ghoshnirmalya/product-hunt-clone-using-strapi-react-next-docker/commit/2b9c0b2440b17bb45d2dd0612d70ab6b0c9a863a). The code for Strapi project is available in the [backend](https://github.com/ghoshnirmalya/product-hunt-clone-using-strapi-react-next-docker/tree/master/backend) directory and the code for Next.js is available in the [frontend](https://github.com/ghoshnirmalya/product-hunt-clone-using-strapi-react-next-docker/tree/master/frontend) directory.

## Getting started with authentication

First, we'll build the authentication in our frontend application. To do that, we'll add a new sign up page.

```js:frontend/pages/sign-up.js

import React, { useState } from "react";
import Head from "next/head";
import axios from "axios";

import "../public/assets/styles/tailwind.css";

const SignUp = () => {
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();

    const res = await axios.post("http://localhost:1337/auth/local/register", {
      username,
      email,
      password,
    });

    // res.data contains data for authenticated user
    console.log(res.data);
  };

  return (
    <div>
      <Head>
        <title>Sign Up</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className="flex justify-center items-center h-screen bg-gray-100">
        <div className="w-full max-w-md">
          <form className="bg-white shadow-lg rounded p-8">
            <div className="mb-4">
              <label
                className="block text-gray-700 text-sm font-bold mb-2"
                htmlFor="username"
              >
                Username
              </label>
              <input
                className="appearance-none border rounded w-full p-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                id="username"
                type="text"
                placeholder="John Doe"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
              />
            </div>
            <div className="mb-4">
              <label
                className="block text-gray-700 text-sm font-bold mb-2"
                htmlFor="email"
              >
                Email Address
              </label>
              <input
                className="appearance-none border rounded w-full p-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                id="email"
                type="email"
                placeholder="john@doe.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
            </div>
            <div className="mb-8">
              <label
                className="block text-gray-700 text-sm font-bold mb-2"
                htmlFor="password"
              >
                Password
              </label>
              <input
                className="appearance-none border rounded w-full p-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                id="password"
                type="password"
                placeholder="********"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
            </div>
            <div className="flex items-center justify-between">
              <button
                className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-4 px-12 rounded focus:outline-none focus:shadow-outline"
                type="button"
                onClick={handleSubmit}
              >
                Sign Up
              </button>
              <a
                className="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800"
                href="#"
              >
                Forgot Password?
              </a>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
};

export default SignUp;
```

## Installing necessary dependencies

We need to install the necessary dependencies:

```bash
yarn add axios
```

Now, if we visit [http://localhost:3000/sign-up](http://localhost:3000/sign-up), we should see the following page:

![Register page](/images/content/how-to-authenticate-your-next-js-application-using-open-source-headless-cms-strapi/1.png)

If we fill in the details of the form, we can view the response from the server in the browser's console:

![Create a new user](/images/content/how-to-authenticate-your-next-js-application-using-open-source-headless-cms-strapi/2.png)

In the Strapi Admin Panel, we can see the new user:

![Users list](/images/content/how-to-authenticate-your-next-js-application-using-open-source-headless-cms-strapi/3.png)

## Saving user token in a cookie

Next, we need to save the token in a cookie. We'll be using a plugin [nookies](https://github.com/maticzav/nookies) for handling that. So, let's install that dependency:

```bash
yarn add nookies
```

We need to update our `handleSubmit` method:

```js:frontend/pages/sign-up.js
import React, { useState } from "react";
import Head from "next/head";
import axios from "axios";
import { setCookie } from "nookies";

  ..

const SignUp = () => {

  ..

  const handleSubmit = async e => {
    e.preventDefault();

    const res = await axios.post("http://localhost:1337/auth/local/register", {
      username,
      email,
      password
    });

    setCookie("", "token", res.data.jwt, {
      maxAge: 30 * 24 * 60 * 60,
      path: "/"
    });
  };

  ..

}
```

Now, if we try to register a new user, the token will be stored in the cookie:

![Storing the token in the cookie](/images/content/how-to-authenticate-your-next-js-application-using-open-source-headless-cms-strapi/4.png)

## Setting up permissions for Products API

According to [Strapi's Token Usage](https://strapi.io/documentation/3.0.0-beta.x/plugins/users-permissions.html#token-usage), we need to send the token in the `Authorization` header.

First, we need to allow authenticated users to view all the products. To do that, we need to give all the permissions to [authenticated users](http://localhost:1337/admin/plugins/users-permissions/roles/edit/1):

![Permissions for authenticated users](/images/content/how-to-authenticate-your-next-js-application-using-open-source-headless-cms-strapi/5.png)

If we do `GET http://localhost:1337/products`, we'll get an error:

![Error for non-authenticated users](/images/content/how-to-authenticate-your-next-js-application-using-open-source-headless-cms-strapi/6.png)

We need to send the token in the `Authorization` header to get the proper data:

![Successful response for authenticated users](/images/content/how-to-authenticate-your-next-js-application-using-open-source-headless-cms-strapi/6.png)

## Redirecting users to index page for authenticated users

Next, we'll redirect all the users to the [index](http://localhost:3000/) page if there is a token present and the user visited the [sign up](http://localhost:3000/sign-up) page:

```jsx:frontend/pages/sign-up.js

SignUp.getInitialProps = (ctx) => {
  const isAuthenticated = !!parseCookies(ctx).token;

  // When the user is authenticated, don't let the user visit the
  // sign-in and sign-up routes
  if (isAuthenticated && ["/sign-up", "/sign-in"].indexOf(ctx.asPath) > -1) {
    if (typeof window !== "undefined") {
      Router.push("/");
    } else {
      if (ctx.res) {
        ctx.res.writeHead(301, {
          Location: "/",
        });
        ctx.res.end();
      }
    }
  }

  return {};
};
```

## Adding the option to unauthenticate a user

We just need to add the option to log a user our. We'll add a button on the `Nav` component:

```jsx
  ..

import { destroyCookie } from "nookies";
import Router from "next/router";

  ..

const handleSignOut = () => {
  destroyCookie("", "token");
  Router.push("/sign-up");
};

const Nav = () => (
  <nav>
    <ul>

      ..

      <li>
        <button onClick={handleSignOut}>Log out</button>
      </li>
    </ul>

  ..
```

The `handleSignOut` method will remove the `token` cookie and then redirect the user to the [http://localhost:3000/sign-up](http://localhost:3000/sign-up) route.

## Conclusion

In this tutorial, we've learnt about how to perform authentication using Strapi and Next.js. You can refer to this [commit](https://github.com/ghoshnirmalya/product-hunt-clone-using-strapi-react-next-docker/commit/4eabb5fb317f8d8e58bdf2b91819d5ee8c4d98db) for all the changes in this tutorial. I hope that this article helps you in your future projects.


Learn how to authenticate a front-end application using Next.js and Strapi.

How to Authenticate your Next.js application using Open Source Headless CMS Strapi

---
date: "2020-06-17"
title: "How to Design and Create a Flexible and Theme-able Pagination Component with React and Theme UI"
category: "javascript"
tags: ["react.js"]
description: "This tutorial will explain all the things that is necessary to know how to build a custom pagination component with a good User Experience using React."
---

![Banner](/images/content/how-to-create-an-accessible-pagination-component-with-react/1.png)

In this tutorial, we'll learn all the things that are necessary to build an accessible pagination component with a good User Experience using React. The source code is available on [Github](https://github.com/ghoshnirmalya/react-pagination-component). You can view a demo of the application [here](https://react-pagination-component.vercel.app/).

## Table of Contents

## What is a Pagination component and where is it used?

A Pagination component helps in fetching and showing data in steps. It's mainly useful in the following scenarios:

1. Lists or tables which consists of a large set of data
2. Cases, where we might want to show data in steps
3. Cases, where a long time will be taken to fetch and show the whole data

## Difference between Pagination and Infinite Scrolling

A Pagination component is useful for fetching fragments of data and showing it
to the user. The user can control when they want to view the next set of data.
In a Pagination component, the user can also control the amount of data that
they want to view.

![View with page-size selector](/images/content/how-to-create-an-accessible-pagination-component-with-react/2.png)

In most cases like in [Ant Design](https://ant.design/components/pagination/)
and [Semantic UI](https://react.semantic-ui.com/addons/pagination/), the user
can also view the data for a particular page directly by typing the number of
that page in a small input box.

![View with page-number selector](/images/content/how-to-create-an-accessible-pagination-component-with-react/3.png)

In an Infinite Scrolling component, initially, a subset of the whole data is
shown. However, when the user scrolls to the bottom of the list or table, the
next set of data is fetched from the server and shown on the browser.

For example, initially a set of 5 records out of 100 records will be fetched from the server and rendered on the list or table. When the user scrolls to the bottom of the list or table, the next 5 records are fetched from the server and shown.

It's also possible that the whole data is fetched initially but the records are
shown lazily. This is done in order to [reduce Cognitive Overload](https://www.smashingmagazine.com/2016/09/reducing-cognitive-overload-for-a-better-user-experience/).

## When should we use Pagination instead of Infinite Scrolling?

[This article](https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1)
explains the answer for this question in details. However, if an application
needs to remember the scroll-position of the user during page transition, then
it's always better to use pagination. For example, if we have an e-commerce
application, we'll need to remember the scroll-position of the user in case of a
page transition.

## Types of Pagination

Effectively, there are two types of pagination:

1. Client-side pagination
2. Server-side pagination

We'll be talking about both of these in details.

## Client-side Pagination

![Client-side pagination](/images/content/how-to-create-an-accessible-pagination-component-with-react/4.png)

In this type of pagination, the whole data is fetched from the server but is
shown on the browser in steps. There can be certain cases in which the pagination
can't be implemented on the server. In those cases, the pagination is generally
done on the client-side.

This type of pagination can be achieved in the following ways:

1. Fetch all the records from the server
2. Divide the records into certain parts based on a certain limit per page
3. Show a set of records on each page
4. Show the next set of records when the user clicks on the next page and so on
5. Sorting, searching and filtering of records is done on the client-side

## Server-side Pagination

![Server-side pagination](/images/content/how-to-create-an-accessible-pagination-component-with-react/5.png)

In this type of pagination, the records are fetched from the server in steps.
This is a better way of doing pagination because of the following:

1. Size of API requests are smaller since they are fetched in chunks
2. The load on both the Server and Client is lesser since they've lesser data to
   deal with. On the Server-side, since the number of records is lesser,
   computing time for generating those records will be lesser as compared to
   computing all the records. This might not be noticeable if the total number
   of records aren't much but when we're fetching thousand records vs ten
   records, this will be noticeable. On the Client-side, if the number of
   records are lesser, there will be lesser load on the browser to parse the
   data and show it to the user.

![Server-side pagination view](/images/content/how-to-create-an-accessible-pagination-component-with-react/6.png)

This type of pagination can be achieved in the following ways:

1. Fetch only the necessary records from the server for a particular page
2. Show the fetched records for that particular page
3. Fetch and show the next set of records when the user clicks on the next page and so on
4. Sorting, searching and filtering of records is done on the server-side

## Building a simple Pagination component using React

In this step, we'll build a simple Pagination component using
[React](https://reactjs.org/) and the [Hacker News
API](https://hn.algolia.com/api). We'll be building a server-side paginated
component.

Let's start with creating a new directory for our component:

```bash
mkdir react-pagination-component
```

The above command will create a new directory called
**react-pagination-component**.

We'll be using [Yarn](https://classic.yarnpkg.com/en/) to manage our
dependencies.

> If you don't have Yarn installed on your machine, you can check out their
> [Installation guide](https://classic.yarnpkg.com/en/docs/install)

Let's initialize our package using Yarn inside our
**react-pagination-component** directory:

```bash
cd react-pagination-component && yarn init
```

The above command will show an output similar to the following on our terminal:

```bash
question name (react-pagination-component):
question version (1.0.0): 0.0.1
question description: A simple pagination component for React.js
question entry point (index.js):
question repository url:
question author: Nirmalya Ghosh (nirmalya.email@gmail.com)
question license (MIT):
question private: false
success Saved package.json
✨  Done in 95.33s.
```

It'll also generate the following **package.json** file:

```json:package.json
{
  "name": "react-pagination-component",
  "version": "0.0.1",
  "description": "A simple pagination component for React.js",
  "main": "index.js",
  "author": "Nirmalya Ghosh (nirmalya.email@gmail.com)",
  "license": "MIT",
  "private": false
}
```

Doing the above steps would help us in installing [npm
packages](https://www.npmjs.com/). We'll be installing React and other packages
from npm. npm stands for Node Package Manager and is the world’s largest software registry.

Although it's very easy to [add React to a
website](https://reactjs.org/docs/add-react-to-a-website.html), managing and upgrading
packages would be much easier using npm.

We'd also use [Parcel](https://parceljs.org/) for bundling our application.

```bash
yarn add react
yarn add react-dom
yarn add --dev parcel-bundler @babel/preset-react @babel/preset-env
```

The above command will add **react** and **react-dom** to our list of dependencies.
It'll add **parcel-bundler** to our list of dev-dependencies.

> We've added parcel-bundler, @babel/preset-react and @babel/preset-env to our
> dev-dependencies >since we won't need it on production. Our application code
> will be bundled by Parcel and we'll deploy those assets (HTML, CSS and JavaScript) to our server.

We also need to adding the following script to our **package.json** file:

```json:package.json
"scripts": {
  "start": "parcel index.html"
}
```

Our **package.json** file should now contain these:

```json:package.json
{
  ....

  "scripts": {
    "start": "parcel index.html"
  },
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.10.2",
    "@babel/preset-react": "^7.10.1",
    "parcel-bundler": "^1.12.4"
  }
}

```

We also need to create an **index.html** file in the root of our project and add
a reference to our JavaScript entry point:

```html:index.html
<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
      <div id="app"></div>
      
      <script src="./index.js"></script>
  </body>
</html>
```

Let's also create a new **index.js** which will be our JavaScript entry point:

```js:index.js
console.log("Hello from Parcel!");
```

Now, we can start our application by running the following command:

```bash
yarn start
```

The about application will start running at
[http://localhost:1234/](http://localhost:1234/).

Let's start by fetching a list of news from Hacker News API and show it on our
browser. We need to update our **index.js** file with the following code:

```js:index.js
import React, { useEffect } from "react";
import ReactDOM from "react-dom";

const ReactPaginationComponent = () => {
  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    const response = await fetch(
      "https://hn.algolia.com/api/v1/search?query=javascript&hitsPerPage=5&page=0"
    );

    console.log(response);
  };

  return <>Hello</>;
};

ReactDOM.render(<ReactPaginationComponent />, document.getElementById("app"));
```

Now, if we visit [http://localhost:1234/](http://localhost:1234/), we'll see the following error:

```bash
Uncaught ReferenceError: regeneratorRuntime is not defined
```

To fix that, we need to add a couple of babel plugins:

```bash
yarn add @babel/plugin-transform-runtime @babel/runtime --dev
```

If we visit [http://localhost:1234/](http://localhost:1234/), we should be able
to view the page without any errors.

Let's show the data fetched in a list. To do that, we'll need to modify our
**index.js** file:

```js:index.js
import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";

const ReactPaginationComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    const response = await fetch(
      "https://hn.algolia.com/api/v1/search?query=javascript&hitsPerPage=5&page=0"
    );
    const data = await response.json();

    setData(data.hits);
  };

  const listNode = () => {
    return (
      <ul>
        {data.map((datum, index) => {
          return <li key={index}>{datum.title}</li>;
        })}
      </ul>
    );
  };

  return <div>{listNode()}</div>;
};

ReactDOM.render(<ReactPaginationComponent />, document.getElementById("app"));
```

Here, we're fetching the data from the server and storing it in the `data`
state. In the `listNode` function, we're iterating over this data and showing it
in a list.

If we visit [http://localhost:1234/](http://localhost:1234/), we should be able
to view the following:

![Skeleton of our list component](/images/content/how-to-create-an-accessible-pagination-component-with-react/7.png)

Let's now add the logic to fetch records from the server based on the selected
page.

First, we need to define two states to store the `totalPages` and the
`currentPage`:

```js:index.js
const [totalPages, setTotalPages] = useState(1);
const [currentPage, setCurrentPage] = useState(1);
```

We also need to update the `fetchData` function to use the `currentPage`:

```js:index.js
const fetchData = async () => {
  const response = await fetch(
    `https://hn.algolia.com/api/v1/search?query=javascript&hitsPerPage=5&page=${currentPage}`
  );
  const data = await response.json();

  setData(data.hits);
  setTotalPages(data.nbPages);
};
```

We also need to add a new `paginationNode` function to show the pagination:

```js:index.js
const paginationNode = () => {
  return (
    <ul>
      {[...Array(totalPages)].map((_, index) => {
        return (
          <li key={index + 1}>
            <button onClick={() => handlePageChange(index + 1)}>
              {index + 1}
            </button>
          </li>
        );
      })}
    </ul>
  );
};
```

Finally, let's update our `return` function and add the `paginationNode`
function to it:

```js:index.js
return (
  <div>
    {listNode()}
    {paginationNode()}
  </div>
);
```

![Pagination list](/images/content/how-to-create-an-accessible-pagination-component-with-react/8.gif)

## Adding styles to our Pagination component

In this section, we'll be adding some styles to our pagination component using
[Theme UI](https://theme-ui.com/).

> Theme UI is a library for creating themeable user interfaces based on
> constraint-based design principles. Build custom component libraries, design
> systems, web applications, Gatsby themes, and more with a flexible API for
> best-in-class developer ergonomics.

Let's install the package first:

```bash
yarn add theme-ui
```

Once the package is installed, we need to import `ThemeProvider` and it to our app first:

```js:index.js
import { ThemeProvider } from "theme-ui";

const theme = {
  colors: {
    text,
    background,
    primary,
  },
};

....

return (
  <ThemeProvider theme={theme}>
    {listNode()}
    {paginationNode()}
  </ThemeProvider>
);
```

The values for `text` , `background` and `primary` colors are the props that can
be passed to our component. We can define defaults for those values:

```js:index.js
const ReactPaginationComponent = ({
  text = "#000",
  background = "#fff",
  primary = "#33e",
}) => {

....
```

We need to update our `listNode` and `paginationNode` functions to use `Box`,
`Button` and `Flex` components from Theme UI:

```js:index.js
....

const listNode = () => {
  return (
    <Box
      as="ul"
      sx={{
        listStyleType: "none",
        p: 0,
      }}
    >
      {data.map((datum, index) => {
        return (
          <Box key={index} as="li" mb={2}>
            {datum.title}
          </Box>
        );
      })}
    </Box>
  );
};

const paginationNode = () => {
  return (
    <Flex as="ul" sx={{ listStyleType: "none", p: 0, flexWrap: "wrap" }}>
      {[...Array(totalPages)].map((_, index) => {
        return (
          <Box key={index + 1} as="li" mr={2}>
            <Button onClick={() => handlePageChange(index + 1)}>
              {index + 1}
            </Button>
          </Box>
        );
      })}
    </Flex>
  );
};

....
```

![Styled pagination list](/images/content/how-to-create-an-accessible-pagination-component-with-react/9.png)

Let's update our pagination logic for a better User Experience.

```js:index.js
....

const paginationNode = () => {
  // The logic for generating pagination is taken from
  // https://gist.github.com/kottenator/9d936eb3e4e3c3e02598

  const pageBuffer = 3;
  const startPage = currentPage - pageBuffer;
  const endPage = currentPage + pageBuffer + 1;
  const range = [];
  const rangeWithDots = [];
  let l;

  for (let i = 1; i <= totalPages; i++) {
    if (i == 1 || i == totalPages || (i >= startPage && i < endPage)) {
      range.push(i);
    }
  }

  for (let i of range) {
    if (l) {
      if (i - l === pageBuffer) {
        rangeWithDots.push(l + 1);
      } else if (i - l !== 1) {
        rangeWithDots.push("...");
      }
    }
    rangeWithDots.push(i);

    l = i;
  }

  return (
    <Flex as="ul" sx={{ listStyleType: "none", p: 0, flexWrap: "wrap" }}>
      {rangeWithDots.map((pageNumber, index) => {
        return (
          <Box key={index} as="li" mr={2}>
            <Button
              onClick={() => handlePageChange(pageNumber)}
              disabled={pageNumber === "..."}
            >
              {pageNumber}
            </Button>
          </Box>
        );
      })}
    </Flex>
  );
};

....
```

![Pagination with better User Experience](/images/content/how-to-create-an-accessible-pagination-component-with-react/10.gif)

Now, it looks much better.

## Making our Pagination component theme-able using Theme UI

As we've used the `ThemeProvider` component from Theme UI, our pagination
component supports theming out of the box. We can do so by passing a `primary`
prop to our `ReactPaginationComponent`:

```js:index.js
<ReactPaginationComponent primary="green" />
```

![Adding theme support for our pagination component](/images/content/how-to-create-an-accessible-pagination-component-with-react/11.png)

We can also pass the `text` prop to update the color of the text on the list items.

## Conclusion

In this tutorial, we learnt how to create a basic pagination component using
React.js. We also leant how to make our component themeable using Theme UI. The source code is available on
[Github](https://github.com/ghoshnirmalya/react-pagination-component).

> Please
> note that the code for this tutorial is [till this
> commit](https://github.com/ghoshnirmalya/react-pagination-component/commit/58f51280cc071ed748ce65eb2702bfea6c832843).
> Further changes to this Github repository might make the code different. It's
> recommended that you check the code for this tutorial till [this commit](https://github.com/ghoshnirmalya/react-pagination-component/commit/58f51280cc071ed748ce65eb2702bfea6c832843).

This tutorial will explain all the things that is necessary to know how to build a custom pagination component with a good User Experience using React.

How to Design and Create a Flexible and Theme-able Pagination Component with React and Theme UI

---
date: "2020-06-20"
title: "Create a Package from a React Component and Publish it to NPM"
category: "javascript"
tags: ["react.js"]
description: "This tutorial will explain how you can create a package from a React component and publish it to NPM."
---

In this tutorial, we'll learn how we can create a package from a React component. We'll also learn how to publish it to [NPM](https://www.npmjs.com/) so that other developers can use our package.

## Table of Contents

## Introduction

We'd developed a Pagination component in one of our [previous posts](https://nirmalyaghosh.com/articles/how-to-create-an-accessible-pagination-component-with-react). We'll be taking inspiration from that component and convert it into a NPM package.

> You'll need a [NPM](https://www.npmjs.com/) account before you can publish a package there. Before we get started, it's recommended to create an account on NPM. You can create [unlimited public packages](https://www.npmjs.com/products) on NPM.

## Bootstrapping a React Component Library

We'll be using [create-react-library](https://github.com/transitive-bullshit/create-react-library) to bootstrap our component library. I've used create-react-library to bootstrap one of my previous NPM package, [React Search Box](https://github.com/ghoshnirmalya/react-search-box). It has a bunch of [features](https://github.com/transitive-bullshit/create-react-library#features) and the Developer Experience is really good. It's really easy to get up and running using create-react-library.

We can bootstrap our project in two ways:

1. By installing create-react-library globally and then creating a new module

```bash
npm install -g create-react-library && create-react-library
```

2. By using [**npx**](https://npm.im/npx)

```bash
npx create-react-library
```

![Bootstrapping project using create-react-library](/images/content/create-a-npm-package-from-a-react-component/6.png)

Now, in one tab, we can run the following command to run rollup to watch our `src` directory and automatically recompile it into `dist` whenever we make any change:

```bash
cd reactjs-pagination-component && yarn start
```

In another tab, we can run the `example` [create-react-app](https://create-react-app.dev/) that's linked to the local version of our package:

```bash
cd reactjs-pagination-component/example && yarn start
```

Our example create-react-app application should be up and running on [http://localhost:3001/](http://localhost:3001/).

![Sample create-react-app application](/images/content/create-a-npm-package-from-a-react-component/7.png)

## Modifying our existing Pagination component to convert it to a re-usable package

In this step, we'll extract the logic necessary for our package and move the rest of the stuffs into the create-react-app application for demo purposes.

We need only the logic for our pagination component. Before that, we need to add the necessary dependencies.

```bash
yarn add @emotion/core
```

This will install [Emotion](https://emotion.sh/docs/introduction#react) which we'll be using to style our Pagination component. Our component should look like the following:

```js:src/index.js
/** @jsx jsx */
import { css, jsx } from '@emotion/core'

const ReactPaginationComponent = ({
  onChange,
  currentPage,
  totalPages,
  color,
  isLoading
}) => {
  // The logic for generating pagination is taken from
  // https://gist.github.com/kottenator/9d936eb3e4e3c3e02598

  const pageBuffer = 3
  const startPage = currentPage - pageBuffer
  const endPage = currentPage + pageBuffer + 1
  const range = []
  const rangeWithDots = []
  let l

  for (let i = 1; i <= totalPages; i++) {
    if (i == 1 || i == totalPages || (i >= startPage && i < endPage)) {
      range.push(i)
    }
  }

  for (let i of range) {
    if (l) {
      if (i - l === pageBuffer) {
        rangeWithDots.push(l + 1)
      } else if (i - l !== 1) {
        rangeWithDots.push('...')
      }
    }
    rangeWithDots.push(i)

    l = i
  }

  if (isLoading) {
    return false
  }

  return (
    <ul
      css={css`
        list-style-type: none;
        padding: 0;
        display: flex;
      `}
    >
      {rangeWithDots.map((pageNumber, index) => {
        return (
          <li
            key={index}
            css={css`
              :not(:last-child) {
                margin-right: 10px;
              }
            `}
          >
            <button
              data-page-number={pageNumber}
              onClick={() => onChange(pageNumber)}
              disabled={pageNumber === '...'}
              css={css`
                border: 1px solid ${color};
                border-radius: 2px;
                color: ${currentPage === pageNumber ? '#fff' : color};
                padding: 5px 10px;
                background-color: ${currentPage === pageNumber
                  ? color
                  : 'transparent'};
                font-size: inherit;

                :hover {
                  cursor: pointer;
                }

                :disabled {
                  border: none;
                  cursor: not-allowed;
                }
              `}
            >
              {pageNumber}
            </button>
          </li>
        )
      })}
    </ul>
  )
}

export default ReactPaginationComponent
```

> The explanation for the above logic is already explained [here](/articles/2020-06-17-create-an-accessible-pagination-component-with-react#adding-styles-to-our-pagination-component). You can refer to that tutorial to understand the logic used for creating the pagination component.

Now, we can import our component in our create-react-app application and render it on the browser:

```js:example/src/App.js
....

import ReactPaginationComponent from 'reactjs-pagination-component'

const App = () => {
  const [isLoading, setIsLoading] = useState(true)
  const [data, setData] = useState([])
  const [totalPages, setTotalPages] = useState(1)
  const [currentPage, setCurrentPage] = useState(1)

  const handleChange = (pageNumber) => {
    // Logic for handling async calls
  }

  const listNode = () => {
    return (
      <ul>
        {data.map((datum, index) => {
          return <li key={index}>{datum.title}</li>
        })}
      </ul>
    )
  }

  const paginationNode = () => {
    if (isLoading) {
      return false
    }

    return (
      <div className='pagination-component'>
        <ReactPaginationComponent
          color='#333'
          isLoading={isLoading}
          onChange={handleChange}
          currentPage={currentPage}
          totalPages={totalPages}
        />
      </div>
    )
  }

  return (
    <div className='container'>
      {listNode()}
      {paginationNode()}
    </div>
  )
}

export default App
```

We should be able to view the demo of our application on [http://localhost:3000/](http://localhost:3000/):

![Demo of create-react-app application](/images/content/create-a-npm-package-from-a-react-component/8.png)

> You can refer this [Pull Request](https://github.com/ghoshnirmalya/reactjs-pagination-component/pull/1) for all the changes.

## Adding NPM information to our local environment

First, we need to [add a registry user account](https://docs.npmjs.com/cli/adduser) on our local machine. On our terminal, we need to execute the following command:

```bash
npm adduser
```

The above command will create or verify a user named `<username>` in the specified registry, and save the credentials to the **.npmrc** file. More information regarding the above command can be obtained [from NPM docs](https://docs.npmjs.com/cli/adduser).

![NPM adduser](/images/content/create-a-npm-package-from-a-react-component/1.png)

We'll see a similar output on our terminal.

Now, if we type the command below, we should be able to view our NPM username:

```bash
npm whoami
```

![NPM whoami](/images/content/create-a-npm-package-from-a-react-component/2.png)

## Initializing NPM with our package

We can use the following command to create a **package.json** file which is necessary for publishing a package to NPM:

```bash
npm init
```

More information regarding the above command can be obtained [from NPM docs](https://docs.npmjs.com/cli/init).

> If you already have a **package.json** file with your project, you can skip the above step.

## Publishing our package to NPM

The final step would be publishing our package to NPM.

```bash
npm publish
```

The above command will publish our package to NPM. More information regarding the above command can be obtained [from NPM docs](https://docs.npmjs.com/cli/publish).

![NPM publish error](/images/content/create-a-npm-package-from-a-react-component/3.png)

It's possible that we might see the above error when we're trying to publish our package. This means that there is already a published package named **react-pagination-component** on NPM. So, we'll need to rename our package.

> You can search for packages in NPM using the [`npm search <package-name>`](https://docs.npmjs.com/cli-commands/search.html) command.

In this case, we can rename our package from **react-pagination-component** to **reactjs-pagination-component** in our **package.json** file:

```json:package.json
{
  "name": "reactjs-pagination-component",

....
```

Now, if we try to publish again, everything should work fine:

```bash
npm publish
```

The above command will generate an output similar to the following:

![NPM publish](/images/content/create-a-npm-package-from-a-react-component/4.png)

Now, we can see that our package [has been published to NPM](https://www.npmjs.com/package/reactjs-pagination-component).

![NPM package page](/images/content/create-a-npm-package-from-a-react-component/5.png)

## Conclusion

In this tutorial, we learnt how we can convert an existing React component into a package and publish it to NPM. We'll be learning more about how to publish updates to our package and release them in a separate tutorial.


This tutorial will explain how you can create a package from a React component and publish it to NPM.

Create a Package from a React Component and Publish it to NPM

---
date: "2020-07-12"
title: "Getting started with Next.js and GraphCMS"
category: "javascript"
tags: ["react.js", "next.js", "cms"]
description: "Learn how to get started with GraphCMS with Next.js."
---

In this tutorial, we'll learn how we can create a Next.js project and integrate it with [GraphCMS](https://graphcms.com/).

## Table of Contents

## Introduction

[GraphCMS's](https://graphcms.com/) mission is to remove traditional content management pain points by using the power of GraphQL, and take the idea of a Headless CMS to the next level.

GraphCMS provides a lot of [features](https://graphcms.com/features) out of the box. Some of them are as follows:

1. GraphQL API
2. Content Localization
3. Webhooks
4. Versioning
5. Content API

It also provides a lot of Editorial and Operational features. Some of them are as follows:

1. Rich Content Editing
2. Global Marketing Campaigns
3. SEO Friendly
4. WYSIWYG
5. Built in Localization

A demo of the application that we will be building is available [here](https://nextjs-graphcms.vercel.app/) which is hosted on [Vercel](https://vercel.com/) and the source code is available on [Github](https://github.com/ghoshnirmalya/nextjs-graphcms).

## Getting Started with Next.js

Let's [setup](https://nextjs.org/docs/getting-started#setup) a new Next.js project. To do so, we will have using the following command:

```bash
npx create-next-app
# or
yarn create next-app
```

![Bootstrapping a Next.js project](/images/content/getting-started-with-nextjs-and-graphcms/1.png)

The above command will generate the following files for us:

![Directory structure for Next.js project](/images/content/getting-started-with-nextjs-and-graphcms/2.png)

Now, we can go inside the directory Next.js created for us and start the development server using the following command:

```bash
cd nextjs-graphcms && yarn dev
```

The above command will spin up a development server on [http://localhost:3000/](http://localhost:3000/):

![Development server for Next.js on http://localhost:3000/](/images/content/getting-started-with-nextjs-and-graphcms/3.png)

## Getting started with GraphCMS

First, we need to create an account on [GraphCMS](https://app.graphcms.com/signup) for free. If you already have an account, you can just sign in.

Next, after signing in, we can select from one of the available Project Templates. We will start with the Blog Starter template.

![GraphCMS templates](/images/content/getting-started-with-nextjs-and-graphcms/4.png)

Next, we need to add a name to our Project and click on the "Create Project" button:

![Adding name to our GraphCMS templates](/images/content/getting-started-with-nextjs-and-graphcms/5.png)

Next, we can select the "Personal" plan and click on the "Continue" button:

![Selecting our GraphCMS project plan](/images/content/getting-started-with-nextjs-and-graphcms/6.png)

We can find out the URL endpoint of our project from our project settings:

![GraphCMS project settings](/images/content/getting-started-with-nextjs-and-graphcms/7.png)

Now, if we visit the URL endpoint and start querying data using GraphQL, we won't get any data:

![Fetching data from GraphCMS](/images/content/getting-started-with-nextjs-and-graphcms/8.png)

This is because we haven't updated the API permissions to fetch both **Draft** and **Published** data from GraphCMS:

![Updating project permissions on GraphCMS](/images/content/getting-started-with-nextjs-and-graphcms/9.png)

Now, if we fetching GraphQL from our URL endpoint, we will get proper data:

![Fetching both draft and published data from GraphCMS](/images/content/getting-started-with-nextjs-and-graphcms/10.png)

Let's save the URL endpoint in a **.env** file in our application:

```bash:.env
GRAPHQL_URL_ENDPOINT=https://api-eu-central-1.graphcms.com/v2/something/master
```

## Installing GraphQL client

We will be using [graphql-request](https://github.com/prisma-labs/graphql-request) which is a minimal GraphQL client supporting Node and browsers for scripts or simple apps.

We can install that package using the following command:

```bash
npm add graphql-request
# or
yarn add graphql-request
```

Now, let's restart our Next.js server using `yarn dev`. We can use **graphq-request** to fetch data from our URL endpoint. To do so, we need to modify our `pages/index.js` file:

```js:pages/index.js
import { GraphQLClient } from "graphql-request";

const graphcms = new GraphQLClient(process.env.GRAPHQL_URL_ENDPOINT);

export async function getStaticProps() {
  const { posts } = await graphcms.request(
    `
    query Posts() {
      posts {
        id
        title
        excerpt
        slug
        coverImage {
          id
          url
        }
        author {
          id
          name
        }
        date
      }
    }
  `
  );

  return {
    props: {
      posts,
    },
  };
}

export default ({ posts }) => {
  return (
    <>
      {posts.map((post) => {
        return (
          <div key={post.id}>
            <img src={post.coverImage.url} alt={post.title} />
            <h2>{post.title}</h2>
            <p>{post.date}</p>
            <p>{post.author.name}</p>
            <p>{post.excerpt}</p>
          </div>
        );
      })}
    </>
  );
};
```

Now, if we visit [http://localhost:3000/](http://localhost:3000/), we should be able to see the following screen:

![Showing data from GraphCMS](/images/content/getting-started-with-nextjs-and-graphcms/11.png)

## Adding styles using TailwindCSS

We will be adding [TailwindCSS](https://tailwindcss.com/) using [CDN](https://tailwindcss.com/docs/installation/#using-tailwind-via-cdn). However, that is not the recommended way of installing TailwindCSS. We are using that just for the sake of decreasing the size of this tutorial. More information regarding how to install TailwindCSS can be found [in their official documentation](https://tailwindcss.com/docs/installation/).

We need to create a new file `_app.js` inside our **pages** directory and add the following code:

```js:pages/_app.js
import Head from "next/head";

const App = ({ Component, pageProps }) => {
  return (
    <>
      <Head>
        <link
          href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet"
        />
      </Head>
      <Component {...pageProps} />
    </>
  );
};

export default App;
```

Now, if we restart our server, we should be able to see that TailwindCSS is getting downloaded.

![Integrating TailwindCSS with out project](/images/content/getting-started-with-nextjs-and-graphcms/12.png)

Next, we need to modify our `pages/index.js` file with the following code:

```js:pages/index.js
export default ({ posts }) => {
  return (
    <div className="py-16 bg-gray-100">
      {posts.map((post) => {
        return (
          <div
            key={post.id}
            className="max-w-lg shadow-lg mb-16 rounded-lg mx-auto flex"
          >
            <div
              className="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden"
              style={{ backgroundImage: `url(${post.coverImage.url})` }}
              title={post.title}
            ></div>
            <div className="bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
              <div className="mb-8">
                <div className="text-gray-900 font-bold text-xl mb-2">
                  {post.title}
                </div>
                <p className="text-gray-700 text-base">{post.excerpt}</p>
              </div>
              <div className="flex items-center">
                <div className="text-sm">
                  <p className="text-gray-900 leading-none">
                    {post.author.name}
                  </p>
                  <p className="text-gray-600">{post.date}</p>
                </div>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};
```

Now, if we visit [http://localhost:3000/](http://localhost:3000/), we should be able to see the following:

![Cards design using TailwindCSS for our Next.js project](/images/content/getting-started-with-nextjs-and-graphcms/13.png)

We've successfully fetched data from GraphCMS and rendered them on the browser.

## Creating separate pages for each blog post

We can also show blogs in separate routes. To do that, we will need to modify our `pages/index.js` file:

```js:pages/index.js
import { GraphQLClient } from "graphql-request";
import Link from "next/link";

const graphcms = new GraphQLClient(process.env.GRAPHQL_URL_ENDPOINT);

export async function getStaticProps() {
  const { posts } = await graphcms.request(
    `
    query Posts() {
      posts {
        id
        title
        excerpt
        slug
        coverImage {
          id
          url
        }
        author {
          id
          name
        }
        date
      }
    }
  `
  );

  return {
    props: {
      posts,
    },
  };
}

export default ({ posts }) => {
  return (
    <div className="py-16 bg-gray-100">
      {posts.map((post) => {
        return (
          <Link key={post.id} as={`/post/${post.slug}`} href="/post/[slug]">
            <a className="max-w-lg shadow-lg mb-16 rounded-lg mx-auto flex">
              <div
                className="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden"
                style={{ backgroundImage: `url(${post.coverImage.url})` }}
                title={post.title}
              />
              <div className="bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
                <div className="mb-8">
                  <div className="text-gray-900 font-bold text-xl mb-2">
                    {post.title}
                  </div>
                  <p className="text-gray-700 text-base">{post.excerpt}</p>
                </div>
                <div className="flex items-center">
                  <div className="text-sm">
                    <p className="text-gray-900 leading-none">
                      {post.author.name}
                    </p>
                    <p className="text-gray-600">{post.date}</p>
                  </div>
                </div>
              </div>
            </a>
          </Link>
        );
      })}
    </div>
  );
};
```

We will also need to create a new file `pages/post/[slug].js` with the following content:

```js:pages/post/[slug].js
import { GraphQLClient } from "graphql-request";
import Link from "next/link";

const graphcms = new GraphQLClient(process.env.GRAPHQL_URL_ENDPOINT);

export async function getStaticProps({ params }) {
  const { post } = await graphcms.request(
    `
    query Post($slug: String!) {
      post(where: { slug: $slug }) {
        id
        title
        content{
          text
        }
        slug
        coverImage {
          id
          url
        }
        author {
          id
          name
        }
        date
      }
    }
  `,
    {
      slug: params.slug,
    }
  );

  return {
    props: {
      post,
    },
  };
}

export async function getStaticPaths() {
  const { posts } = await graphcms.request(`
    {
      posts {
        id
        title
        content{
          text
        }
        slug
        coverImage {
          id
          url
        }
        author {
          id
          name
        }
        date
      }
    }
  `);

  return {
    paths: posts.map(({ slug }) => ({
      params: { slug },
    })),
    fallback: false,
  };
}

export default ({ post }) => {
  return (
    <div className="py-16 bg-gray-100 min-h-screen">
      <div className="max-w-lg shadow-lg rounded-lg mx-auto mb-16">
        <div
          className="h-48 rounded-t flex-none bg-cover text-center overflow-hidden"
          style={{ backgroundImage: `url(${post.coverImage.url})` }}
          title={post.title}
        />
        <div className="bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
          <div className="mb-8">
            <div className="text-gray-900 font-bold text-xl mb-2">
              {post.title}
            </div>
            <p className="text-gray-700 text-base">{post.content.text}</p>
          </div>
          <div className="flex items-center">
            <div className="text-sm">
              <p className="text-gray-900 leading-none">{post.author.name}</p>
              <p className="text-gray-600">{post.date}</p>
            </div>
          </div>
        </div>
      </div>
      <div className="max-w-lg mx-auto">
        <Link href="/">
          <a>Back to all posts</a>
        </Link>
      </div>
    </div>
  );
};
```

For more information regarding how the **Link** component works can be found in the official [Next.js documentation](https://nextjs.org/docs/api-reference/next/link).

More information regarding how to add pages in Next.js can be found in the official [Next.js documentation](https://nextjs.org/docs/basic-features/pages).

![Separate pages for blogs using the Link component](/images/content/getting-started-with-nextjs-and-graphcms/14.gif)

## Conclusion

In this tutorial, we learnt how we can integrate GraphCMS with Next.js and create a blogging site. The demo of the application that we built as a part of this tutorial is available [here](https://nextjs-graphcms.vercel.app/) which is hosted on [Vercel](https://vercel.com/) and the source code is available on [Github](https://github.com/ghoshnirmalya/nextjs-graphcms).


Learn how to get started with GraphCMS with Next.js.

Getting started with Next.js and GraphCMS

---
date: "2020-08-20"
title: "How to use Next.js with Strapi and Apollo"
category: "javascript"
tags: ["react.js", "next.js", "cms"]
description: "Learn how to use Next.js with Strapi and Apollo."
---

In this tutorial, we'll learn how we can use Next.js with Strapi and Apollo.

## Table of Contents

## Introduction

In [one of my previous articles](/articles/2020-01-01-how-to-automate-the-backend-stuffs-with-open-source-headless-cms-strapi-and-docker), I've written about how to get started using Strapi. In this post, we'll be building a newsfeed application using Next.js. The APIs necessary for the Next.js front-end application will be powered by Strapi. We'll also use [Apollo](https://www.apollographql.com/) as the GraphQL client.

The whole code for the application that we're going to build is available on [Github](https://github.com/ghoshnirmalya/nextjs-strapi-boilerplate).

Before we proceed, it's better if you have some idea about the following technologies:

1. [Next.js](https://nextjs.org/)
2. [Apollo](https://www.apollographql.com/)
3. [Strapi](http://strapi.io/)
4. [TypeScript](https://www.typescriptlang.org/)

I've been using [Strapi](http://strapi.io/) for quite some time now and it's very easy to get up and running with it within a very short amount of time. It gives us a lot of [features](https://strapi.io/features) out of the box:

1. **Single types**: Create one-off pages that have unique content structure
2. **Customizable API**: With Strapi, you can just hop in your code editor and edit the code to fit your API to your needs.
3. **Integrations**: Strapi supports integrations with Cloudinary, SendGrid, Algolia and others.
4. **Editor interface**: The editor allows you to pull in dynamic blocks of content.
5. **Authentication**: Secure and authorize access to your API with JWT or providers.

[Next.js](https://nextjs.org/) is a very popular [React](https://reactjs.org/) framework. It offers a lot of features like:

1. **Zero config**: Automatic compilation and bundling. Optimized for production from the start.
2. **Hybrid: SSG and SSR**: Pre-render pages at build time (SSG) or request time (SSR) in a single project.
3. **Incremental Static Generation**: Add and update statically pre-rendered pages incrementally after build time.
4. **TypeScript Support**: Automatic TypeScript configuration and compilation.
5. **Fast Refresh**: Automatic TypeScript configuration and compilation.

[Apollo](https://www.apollographql.com/) is the industry-standard GraphQL implementation, providing the data graph layer that connects modern apps to the cloud. It offers a lot of features like:

1. **Declarative data fetching**: Write a query and receive data without manually tracking loading, error, or network states.
2. **Reactive data cache**: Cut down on network traffic and keep data consistent throughout your application with Apollo Client’s normalized reactive data cache.
3. **Excellent dev experience**: Enjoy cross stack type safety, runtime cache inspectors, and full featured editor integrations to keep you writing applications faster.
4. **Compatible and adoptable**: Use any build setup and any GraphQL API. Drop Apollo Client into any app seamlessly without re-architecting your entire data strategy.
5. **Designed for modern UIs**: Take advantage of modern UI architectures in the web, iOS, and Android ecosystems.

I've created a [boilerplate](https://github.com/ghoshnirmalya/nextjs-strapi-boilerplate) so that you can get up and running with [Strapi](http://strapi.io/), [Next.js](https://nextjs.org/) and [Apollo](https://www.apollographql.com/) quickly. Check out the project on [Github](https://github.com/ghoshnirmalya/nextjs-strapi-boilerplate).

<a
  href="https://github.com/ghoshnirmalya/nextjs-strapi-boilerplate"
  target="_blank"
>
  <img
    src="https://user-images.githubusercontent.com/6391763/90599044-ca070300-e211-11ea-8b8a-89354dd30bd5.png"
    alt="Logo"
  />
</a>

## Creating a Strapi application using Docker

**Step 1:** We need to create a directory named `backend` and then download the [docker-compose.yml](https://github.com/strapi/strapi-docker/blob/master/examples/postgresql/docker-compose.yml) file from the [strapi-docker repository](https://github.com/strapi/strapi-docker). Now, we need to start Docker. Once Docker is up and running, we can go inside the `backend` directory and run our Strapi container:

```bash
cd backend && docker-compose up
```

This will pull **postgres** and **strapi/strapi** images from [Docker Hub](https://hub.docker.com/). So, it might take some time for this operation to complete. You can refer to this [article](https://nirmalyaghosh.com/articles/2020-01-01-how-to-automate-the-backend-stuffs-with-open-source-headless-cms-strapi-and-docker#installing-strapi) for more details regarding how to install Strapi using Docker.

**Step 2:** We'll have to [create our first administrator profile](https://nirmalyaghosh.com/articles/2020-01-01-how-to-automate-the-backend-stuffs-with-open-source-headless-cms-strapi-and-docker#creating-our-first-administrator-profile). Once, our administrator profile is setup, we should be able to log into the admin panel of Strapi.

**Step 3:** We'll have to [add a new content-type](https://nirmalyaghosh.com/articles/2020-01-01-how-to-automate-the-backend-stuffs-with-open-source-headless-cms-strapi-and-docker#adding-a-new-content-type).

**Step 4:** Install the [Strapi GraphQL plugin](https://strapi.io/documentation/3.0.0-beta.x/plugins/graphql.html).

> I've already covered most about getting started with Strapi. We're adding links to a previous article in order to keep this tutorial short.

## Creating a Next.js application

We can create a new Next.js app using create-next-app, which sets up everything automatically for us:

```bash
yarn create next-app
```

> The above command will install all the necessary packages as well a create a new directory based on the application name (which you entered during the setup process).

## Integrating the Next.js application with Apollo

In order to integrate Apollo with Next.js, we need to add the required dependencies first:

```bash
yarn add  @apollo/client graphql
```

Next, we need to create a new file `lib/with-graphql.js` with the following content:

```js:lib/with-graphql.js
import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";

const WithGraphQL = ({ children }) => {
  const client = new ApolloClient({
    uri: "http://localhost:1337/graphql",
    cache: new InMemoryCache(),
  });

  return <ApolloProvider client={client}>{children}</ApolloProvider>;
};

export default WithGraphQL;
```

Now, we can import this file and wrap any Next.js page where we want to use GraphQL:

```js:pages/index.js
import React from "react";
import Page from "components/pages/index";
import WithGraphQL from "lib/with-graphql";

const IndexPage = () => {
  return (
    <WithGraphQL>
      <Page />
    </WithGraphQL>
  );
};

export default IndexPage;
```

Now, we can use GraphQL queries and mutations in the `components/pages/index.js` file:

```js:components/pages/index.js
import { gql, useQuery } from "@apollo/client";
import { Box, Stack } from "@chakra-ui/core";
import Feed from "components/pages/index/feed";
import React from "react";

const feedsQuery = gql`
  query fetchFeeds {
    feeds {
      id
      created_at
      body
      author {
        id
        username
      }
    }
  }
`;

const FeedsPageComponent = () => {
  const { loading, error, data } = useQuery(feedsQuery);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return (
    <Stack spacing={8}>
      {data.feeds.map(feed => {
        return (
          <Box key={feed.id}>
            <Feed feed={feed} />
          </Box>
        );
      })}
    </Stack>
  );
};

export default FeedsPageComponent;
```

## Conclusion

In this tutorial, we've learnt how we can integrate Apollo with Next.js and use it with Strapi. I've created a [boilerplate](https://github.com/ghoshnirmalya/nextjs-strapi-boilerplate) so that you can get up and running with Strapi, Next.js and Apollo quickly. Check out the project on [Github](https://github.com/ghoshnirmalya/nextjs-strapi-boilerplate). Documentation of this project is available [here](/guides/nextjs-strapi-boilerplate).

<a
  href="https://github.com/ghoshnirmalya/nextjs-strapi-boilerplate"
  target="_blank"
>
  <img
    src="https://user-images.githubusercontent.com/6391763/90599044-ca070300-e211-11ea-8b8a-89354dd30bd5.png"
    alt="Logo"
  />
</a>


Learn how to use Next.js with Strapi and Apollo.

How to use Next.js with Strapi and Apollo

---
date: "2020-10-06"
title: "How to do authentication in Next.js using Strapi and NextAuth"
category: "javascript"
tags: ["react.js", "next.js", "cms"]
description: "Learn how to build an authentication system in a Next.js application with Strapi and NextAuth."
---

In this tutorial, we'll learn how we can build an authentication system in a
Next.js application using Strapi and NextAuth

## Table of Contents

## Introduction

[Strapi](https://strapi.io/) is the leading open-source headless CMS. It’s 100% Javascript, fully customizable and developer-first. I've been using Strapi for some of my [Open Source projects](https://github.com/ghoshnirmalya) and the developer experience is really good. It has helped me build prototypes and products much faster.

I've created a [boilerplate](https://github.com/ghoshnirmalya/nextjs-strapi-boilerplate) so that you can get up and running with [Strapi](http://strapi.io/), [Next.js](https://nextjs.org/) and [Apollo](https://www.apollographql.com/) quickly. Check out the project on [Github](https://github.com/ghoshnirmalya/nextjs-strapi-boilerplate).

<a
  href="https://github.com/ghoshnirmalya/nextjs-strapi-boilerplate"
  target="_blank"
>
  <img
    src="https://user-images.githubusercontent.com/6391763/90599044-ca070300-e211-11ea-8b8a-89354dd30bd5.png"
    alt="Logo"
  />
</a>

[NextAuth](https://next-auth.js.org/) is a library for building authentication in a [Next.js](https://nextjs.org/) application. It's flexible, secure and easy to use.

The application that we'll be building is hosted on [Vercel](https://nextjs-strapi-boilerplate.vercel.app/) and the code is available on [Github](https://github.com/ghoshnirmalya/nextjs-strapi-boilerplate).

## Pre-requisites

1. [Node.js](https://nodejs.org/)
2. [npm](https://www.npmjs.com/)
3. [Docker](https://www.docker.com/)

## Cloning our repository

Let's get started by cloning the repository that we'll be working on. We can clone our repository using the following command:

```bash
git clone https://github.com/ghoshnirmalya/nextjs-strapi-boilerplate
```

## Installing dependencies for the Next.js application

We can install all the necessary dependencies by running the following command:

```bash
cd frontend && yarn install
```

## Copying the environment variables

We can create a .env file and copy the contents from .env.example which is present in the frontend directory. The following credentials are necessary for authentication:

```yaml:frontend/.env
NEXT_PUBLIC_API_URL=http://localhost:1337
NEXT_PUBLIC_DATABASE_URL=postgres://strapi:strapi@localhost:5432/strapi?synchronize=true
NEXTAUTH_URL=http://localhost:3000
GOOGLE_CLIENT_ID=""
GOOGLE_CLIENT_SECRET=""
```

## Creating and copying the Google client credentials

We can create a new [Google OAuth Client](https://console.developers.google.com/apis/credentials/oauthclient) and copy the credentials (Client ID and Client Secret) in your .env file.

1. Create a new **OAuth client ID**.
2. Choose **Web application** as the **Application Type**.
3. Add the following **Authorized redirect URIs**:

```yaml
http://localhost:3000/api/auth/callback/google
http://localhost:1337/connect/google/callback
```

![Authorized redirect URIs](/images/content/authentication-in-next-js-with-strapi-and-next-auth/1.png)

## Starting the frontend application

From the frontend directory, we can run the following command to start our Next.js application:

```bash
yarn dev
```

## Starting our Strapi application

We can go inside the directory of the backend package on another terminal window and start docker compose:

```bash
cd backend && docker-compose up
```

> We need to start Docker and then run the above command which will change the current directory to the backend package’s directory and then start the backend package. If everything goes well, it’ll be up and running on http://localhost:1337/graphql.

## Configuring the Google provider in the Strapi admin panel

In the Strapi admin panel, we need to add the Google OAuth Client credentials and enable the **Google provider**.

![Google provider configuration in the Strapi admin panel](/images/content/authentication-in-next-js-with-strapi-and-next-auth/2.png)

## Configuring NextAuth with our Next.js application

All the configurations related to NextAuth is present on the [[...nextauth.ts]](https://github.com/ghoshnirmalya/nextjs-strapi-boilerplate/blob/master/frontend/pages/api/auth/%5B...nextauth%5D.ts) file. We can use the following NextAuth options to use NextAuth with Strapi:

```js:frontend/pages/api/auth/[...nextauth].ts
const options = {
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  database: process.env.NEXT_PUBLIC_DATABASE_URL,
  session: {
    jwt: true,
  },
  debug: true,
  callbacks: {
    session: async (session: ISession, user: IUser) => {
      session.jwt = user.jwt;
      session.id = user.id;

      return Promise.resolve(session);
    },
    jwt: async (token: iToken, user: IUser, account: IAccount) => {
      const isSignIn = user ? true : false;

      if (isSignIn) {
        const response = await fetch(
          `${process.env.NEXT_PUBLIC_API_URL}/auth/${account.provider}/callback?access_token=${account?.accessToken}`
        );

        const data = await response.json();

        token.jwt = data.jwt;
        token.id = data.user.id;
      }

      return Promise.resolve(token);
    },
  },
};
```

In the [NextAuth callback](https://next-auth.js.org/configuration/options#callbacks) function, we're calling the [Strapi Authentication](https://strapi.io/documentation/v3.x/plugins/users-permissions.html#authentication) API endpoint. We're storing the `JWT` and `user.id` from data that the Strapi API sends us. In this way, we can understand which user is currently authenticated.

## Getting session details for authenticated users

We can get the details of the authenticated users from the [`getSession`](https://next-auth.js.org/getting-started/client#getsession) function of NextAuth. If the `getSession` function doesn't return us any details, then we can assume that the user is [not authenticated](https://github.com/ghoshnirmalya/nextjs-strapi-boilerplate/blob/master/frontend/pages/feeds.tsx#L12-L14).

## Conclusion

In this tutorial, we understood how we can implement authentication in a Next.js application using Strapi and NextAuth. I've created a [boilerplate](https://github.com/ghoshnirmalya/nextjs-strapi-boilerplate) so that you can get up and running with Strapi, Next.js and Apollo quickly. Check out the project on [Github](https://github.com/ghoshnirmalya/nextjs-strapi-boilerplate). Documentation of this project is available [here](/guides/nextjs-strapi-boilerplate).

<a
  href="https://github.com/ghoshnirmalya/nextjs-strapi-boilerplate"
  target="_blank"
>
  <img
    src="https://user-images.githubusercontent.com/6391763/90599044-ca070300-e211-11ea-8b8a-89354dd30bd5.png"
    alt="Logo"
  />
</a>


Learn how to build an authentication system in a Next.js application with Strapi and NextAuth.

Hi, I'm Nirmalya

Articles

User Authentication in Next.js with Strapi

Difference between SWR and React Query in terms of fetching data

How to do authentication in Next.js using Strapi and NextAuth

Getting started with Mock Service Worker

How to use Next.js with Strapi and Apollo

Functional user interfaces with Moon.js

Getting started with Next.js and GraphCMS

Create a Package from a React Component and Publish it to NPM

How to Design and Create a Flexible and Theme-able Pagination Component with React and Theme UI

JSX-driven components with Crank.js

Projects

Writy

React Search Box

Hasura Next.js Boilerplate

Building Monorepos Using Lerna

Product Hunt Clone Using Next.js and Hasura

Strapi Next.js boilerplate

Screenshot Mockup

Reddit Clone

Hasura Next.js Trello Clone

LinkedIn Clone React Frontend