DEV Community: Nirmalya Ghosh

How to integrate Next.js with Fauna using React Query

Nirmalya Ghosh — Mon, 08 Feb 2021 03:37:29 +0000

Introduction

In this tutorial, we'll learn about how we can integrate Next.js with Fauna. We'll also learn about how we can fetch GraphQL data on the server using React Query. We'll be building a server-side rendered application which will look similar to the following:

In this application, we’ll be showing a list of customers, products and orders. The data for these will be fetched from Fauna and rendered on the server side. This application won’t make any client side requests to Fauna even during routing.

An online demo of the application that we built is hosted on Vercel and the code is available on GitHub.

Introduction

Fauna is a flexible, developer-friendly, secure database which delivers a web-native API. It has a lot of features and is very easy to get up and running.

Next.js is one of the most popular React frameworks which has a lot of features like file-system routing, built-in CSS support, API routes, fast refresh, etc. I've been building applications using Next.js and it has a good developer experience.

Softwares required for running the application

Technologies used in the application

Creating a new Next.js application

Let’s start by creating a new Next.js application. We can create a new Next.js application by running the following command from our terminal:

yarn create next-app

We'll have to enter the name of our application when the command prompts for it. We can name it anything we want. However, in this case, we'll name it nextjs-faunadb. The above command will create a new Next.js application for us with the following structure:

.
├── README.md
├── package.json
├── pages
│   ├── _app.js
│   ├── api
│   └── index.js
├── public
│   ├── favicon.ico
│   └── vercel.svg
├── styles
│   ├── Home.module.css
│   └── globals.css
└── yarn.lock

We can now go inside the nextjs-faunadb directory and start our Next.js application’s development server using the following command:

cd nextjs-faunadb && yarn dev

Our Next.js application should be up and running on http://localhost:3000 where we should be able to see the following screen:

Adding Chakra UI

Chakra UI is a popular React component library. Personally, I like using it on most of my applications as it's very flexible and easy to understand.

We'll be using Chakra UI for styling the user interface of our application. We can install that package by running the following command from the root of our application:

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

We'll be using TypeScript for our application as well. So, let's rename the _app.js file inside the pages directory to _app.tsx with the following content:

// pages/_app.tsx

import {
  Box,
  ChakraProvider,
  Container,
  HStack,
  Link as ChakraLink,
} from "@chakra-ui/react";
import type { AppProps } from "next/app";
import Link from "next/link";
import React from "react";

const App = ({ Component, pageProps }: AppProps) => {
  return (
    <ChakraProvider>
      <Box bg="gray.100" h="100vh" w="100vw">
        <Box borderWidth={1} rounded="md" bg="white" p={6}>
          <Container maxW="4xl">
            <HStack spacing={16}>
              <Link href="/">
                <ChakraLink>Customers</ChakraLink>
              </Link>
              <Link href="/products">
                <ChakraLink>Products</ChakraLink>
              </Link>
              <Link href="/orders">
                <ChakraLink>Orders</ChakraLink>
              </Link>
            </HStack>
          </Container>
        </Box>
        <Container maxW="4xl" centerContent>
          <Component {...pageProps} />
        </Container>
      </Box>
    </ChakraProvider>
  );
};

export default App;

Since we're using TypeScript, we'll need to restart our Next.js server. Once we restart our server, we'll get the following error:

$ yarn dev

yarn run v1.22.5
$ next dev
ready - started server on <http://localhost:3000>
It looks like you're trying to use TypeScript but do not have the required package(s) installed.

Please install typescript, @types/react, and @types/node by running:

    yarn add --dev typescript @types/react @types/node

If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory).

This is because we added TypeScript to our application but didn't add the necessary dependencies. We can fix that by installing the missing dependencies. From the root of our application, we can execute the following command to install the missing dependencies:

yarn add --dev typescript @types/react @types/node

Now, if we start our Next.js server, our application should compile fine:

$ yarn dev

yarn run v1.22.5
$ next dev
ready - started server on <http://localhost:3000>
We detected TypeScript in your project and created a tsconfig.json file for you.

event - compiled successfully

Adding React Query

React Query is a data-fetching library for React. It helps in fetching, caching, synchronizing and updating server state in React applications. We will use React Query to fetch data in our application. We can install it by running the following command from the root of our application:

yarn add react-query

Next, we'll need to modify our pages/_app.tsx file with the following content:

// pages/_app.tsx

....

import { QueryClient, QueryClientProvider } from "react-query";
import { Hydrate } from "react-query/hydration";

const queryClient = new QueryClient();

const App = ({ Component, pageProps }: AppProps) => {
  return (
    <ChakraProvider>
      <QueryClientProvider client={queryClient}>
        <Hydrate state={pageProps.dehydratedState}>
          <Box bg="gray.100" h="100vh" w="100vw">

              ....

          </Box>
        </Hydrate>
      </QueryClientProvider>
    </ChakraProvider>
  );
};

export default App;

Fetching GraphQL data from Fauna using React Query on the server side

In this step, we'll connect our Next.js application with Fauna and fetch data using the graphql-request plugin. Let's start by adding the plugin to our application. We can do that by running the following command from the root of our application:

yarn add graphql-request graphql

Let's also create a new file graphql-client.ts inside the lib directory with the following content:

// lib/graphql-client.ts

import { GraphQLClient } from "graphql-request";

const endpoint = process.env.FAUNA_GRAPHQL_ENDPOINT;

const graphQLClient = new GraphQLClient(endpoint, {
  headers: {
    authorization: `Basic ${process.env.FAUNA_AUTH_HEADER}`,
  },
});

export default graphQLClient;

This file will be responsible for handling the Fauna authentication using Basic token for our GraphQL client.

Next, let's create a new Fauna database.

You need to visit http://fauna.com and log into your account. If you don't have an account, you'll need to create a new account. Once you log into your account, you'll be redirected to the Fauna dashboard.

Click on the New Database button from the Fauna dashboard.

Create a new database by entering the name of your database. Check the Pre-populate with demo data checkbox so that there is some dummy data in the database and click on the Save button.

The database will be created and we should be able to see a similar screen:

If we click on the customers collection, we can see the pre-populated data. The pre-populated data will help us in getting started with Fauna very easily.

Next, if we visit the GraphQL tab on the Fauna dashboard, we should be able to execute a GraphQL query or mutation.

The HTTP headers will already be pre-populated in the GraphQL Playground:

We can also check out the Schema of our database:

We can also checkout the Docs tab to know about the available GraphQL queries and mutations:

We can run a simple GraphQL query to check out the playground. Let's run the following GraphQL query:

query {
  allCustomers {
    data {
      _id
      firstName
      lastName
      address {
        street
      }
    }
  }
}

If we click on the Execute Query button, we'll get the following output:

{
  "data": {
    "allCustomers": {
      "data": [
        {
          "_id": "287346643083198981",
          "firstName": "Auria",
          "lastName": "Osgardby",
          "address": {
            "street": "87856 Mendota Court"
          }
        },
        {
          "_id": "287346643084247557",
          "firstName": "Skipper",
          "lastName": "Scanes",
          "address": {
            "street": "72 Waxwing Terrace"
          }
        },
        {
          "_id": "287346643084248581",
          "firstName": "Ardith",
          "lastName": "Probert",
          "address": {
            "street": "5 Troy Trail"
          }
        }
      ]
    }
  }
}

Let's try to do a similar query from our Next.js application. To do that, we need to do the following:

Create a new file name .env.local in the root of our application to store all our environment variables.
Copy the value of the authorization key in the HTTP header (without the Basic text) from the GraphQL playground and past it inside the .env.local file. It should look like the following:

// .env.local

FAUNA_AUTH_HEADER=Zm5BRF9OdnBFN0FDQUpxcXF2V3dkRFpQaGFjpxcXF2V3dkRFpQaRGVIbEpxcXF2V3dkRFpQasxa0Yjpu=

Copy the value of the Fauna GraphQL API's endpoint from the playground and paste it inside the .env.local file as well. Our .env.local file should look like the following:

// .env.local
// `FAUNA_AUTH_HEADER` will be different in your case.

FAUNA_AUTH_HEADER=Zm5BRF9OdnBFN0FDQUpxcXF2V3dkRFpQaGFjpxcXF2V3dkRFpQaRGVIbEpxcXF2V3dkRFpQasxa0Yjpu=
FAUNA_GRAPHQL_ENDPOINT=https://graphql.fauna.com/graphql

Create a new file named get-all-customers.ts inside the lib directory with the following content:

// lib/get-all-customers.ts

import { gql } from "graphql-request";
import graphQLClient from "./graphql-client";

const getAllCustomers = async () => {
  const query = gql`
    {
      allCustomers {
        data {
          _id
          firstName
          lastName
        }
      }
    }
  `;

  const response = await graphQLClient.request(query);
  const data = JSON.parse(JSON.stringify(response));

  return data.allCustomers.data;
};

export default getAllCustomers;

The above code will be responsible for fetching all the customer data from our Fauna database.

Rename our pages/index.js file to index.tsx and replace its content with the following:

// pages/index.tsx

import { Box, Grid, Text } from "@chakra-ui/react";
import getAllCustomers from "../lib/get-all-customers";
import { NextPage } from "next";
import React from "react";
import { QueryClient, useQuery } from "react-query";
import { dehydrate } from "react-query/hydration";

const CustomersPage: NextPage = () => {
  const { data } = useQuery("allCustomers", getAllCustomers, {
    staleTime: Infinity,
  });

  return (
    <Grid gap={4} m={4} gridTemplateColumns="1fr" w="100%">
      <Box borderWidth={1} rounded="md" bg="white">
        <Box borderBottomWidth={1} px={8} py={6} bg="gray.200">
          <Text fontWeight="bold" textTransform="uppercase">
            Customers
          </Text>
        </Box>
        <Box>
          {data.map((user) => {
            return (
              <Text key={user._id} p={8} color="gray.700" borderBottomWidth={1}>
                {user.firstName} {user.lastName}
              </Text>
            );
          })}
        </Box>
      </Box>
    </Grid>
  );
};

export const getServerSideProps = async () => {
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery("allCustomers", getAllCustomers, {
    staleTime: Infinity,
  });

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  };
};

export default CustomersPage;

Stop our Next.js server and reload our .env.local file by running the following command from the root of our application:

source .env.local

Start our Next.js server by running the following command from the root of our application:

yarn dev

Now, if we visit http://localhost:3000, we should be able to view the following screen:

If we inspect using our browser's dev-tools, we'll be able to see that the page is rendered on the server and no data-fetching happens on the client:

Next, let's create a similar page for Products so that we can demonstrate that the fetching of data while routing also happens on the server.

First, we need to create a new file named get-all-products.ts inside the lib directory with the following content:

// lib/get-all-products.ts

import { gql } from "graphql-request";
import graphQLClient from "./graphql-client";

const getAllProducts = async () => {
  const query = gql`
    {
      allProducts {
        data {
          _id
          name
          description
          price
        }
      }
    }
  `;

  const response = await graphQLClient.request(query);
  const data = JSON.parse(JSON.stringify(response));

  return data.allProducts.data;
};

export default getAllProducts;

Next, we'll need to create a new file named products.tsx inside the pages directory with the following content:

// pages/products.tsx

import { Badge, Box, Grid, HStack, Text } from "@chakra-ui/react";
import getAllProducts from "../lib/get-all-products";
import { NextPage } from "next";
import React from "react";
import { QueryClient, useQuery } from "react-query";
import { dehydrate } from "react-query/hydration";

const ProductsPage: NextPage = () => {
  const { data } = useQuery("allProducts", getAllProducts, {
    staleTime: Infinity,
  });

  return (
    <Grid gap={4} m={4} gridTemplateColumns="1fr" w="100%">
      <Box borderWidth={1} rounded="md" bg="white">
        <Box borderBottomWidth={1} px={8} py={6} bg="gray.200">
          <Text fontWeight="bold" textTransform="uppercase">
            Products
          </Text>
        </Box>
        <Box>
          {data.map((product) => {
            return (
              <Box
                key={product._id}
                p={8}
                color="gray.700"
                borderBottomWidth={1}
              >
                <HStack spacing={8} justifyContent="space-between">
                  <Text>{product.name}</Text>
                  <Badge colorScheme="green">{product.description}</Badge>
                </HStack>
              </Box>
            );
          })}
        </Box>
      </Box>
    </Grid>
  );
};

export const getServerSideProps = async () => {
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery("allProducts", getAllProducts, {
    staleTime: Infinity,
  });

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  };
};

export default ProductsPage;

getServerSideProps is a function through which we can fetch data on the server in Next.js.

Now, if we visit http://localhost:3000 and click on the Products tab, we'll be able to view the products listing page:

If we inspect the request, we can see that the fetching of data happens on the server. No external API request to the Fauna GraphQL servers happens on the client-side of the Next.js application:

Next, we'll push our code to GitHub and deploy to Vercel.

Pushing our code to GitHub

In this section, we’ll commit our code and push it to GitHub. We'll need to do the following steps:

Log into your GitHub Account.** **You’ll need a GitHub account to store our code. This is required because we want to deploy our application on Vercel.
Commit our code using Git. You’ll need to have Git installed on your computer for this step.

From the root of our application, we can run the following command to stage all our files:

git add --all

Next, we can commit all our files by running the following command from the root of our application:

git commit -m "Adds all files"

Create a new GitHub repository by visiting https://github.com/new. We'll need to enter the name of our repository and click on the Create Repository button.

Push our code to GitHub by running the following command from the root of our application.

git remote add origin <https://github.com/><your-github-username>/<your-repository-name>b.git
git branch -M main
git push -u origin main

Now, our code should be available on GitHub.

Deploying the application to Vercel

In this step, we'll deploy our code using Vercel. We'll need to do the following steps:

Log into your Vercel account

We’ll need a Vercel account to deploy our code. You can create one if you don't already have one.

Importing our repository to Vercel

We can import our repository to Vercel by visiting https://vercel.com/new and searching for our GitHub repository.

We might need to grant Vercel access to the Git repositories that we want to import.

We can configure the GitHub app by clicking on the Configure GitHub App button. Once we give the necessary access to Vercel, we should be able to view our repository and click on the Import button next to it.

In the next step, we can select the scope of Vercel. For this application, we'll select our personal account by clicking on the Select button next to it.

In the next step, we'll be able to view the details of our project. We'll need to enter the environment variables from our .env.local file and click on the Deploy button to deploy our application.

Once the application is deployed, we should be able to view the following screen:

If we click on the Visit button, we should be able to view our application deployed on Vercel.

Conclusion

In this tutorial, we learned about how we can integrate Next.js with Fauna, as well as how we can fetch GraphQL data on the server using React Query.

An online demo of the application that we built is hosted on Vercel and the code is available on GitHub.

Integrating TailwindCSS with Next.js

Nirmalya Ghosh — Sat, 02 Jan 2021 06:02:16 +0000

In this tutorial, we'll learn the simplest way to integrate TailwindCSS with Next.js.

What is Next.js?

Next.js is a React framework which provides Server-Side Rendering out of box. It's a very popular Node.js framework with over 59k stars on Github. It provides a several features like Server-Side rendering, Static Exporting, 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).

Deploying Next.js applications to production using Zeit is also pretty simple.

What is TailwindCSS?

I've already covered about TailwindCSS in one of my previous posts. 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. To do so, we need to run the following command:

npx create-next-app

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

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:

cd frontend && yarn dev

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

Installing TailwindCSS

I've written about how to integrate TailwindCSS with React in one of my previous posts. The process of integrating TailwindCSS with Next.js will be a similar one.

First, we need to install TailwindCSS:

yarn add tailwindcss

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

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:

@tailwind base;
@tailwind components;
@tailwind utilities;

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

"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:

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

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

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:

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, we'll see that TailwindCSS is working as expected:

If you want to know more about configuring Tailwind, you can read it here.

Conclusion

In this tutorial, we've learnt how to use TailwindCSS with a Next.js application. In the future, we'll build a ProductHunt clone using React and GraphQL.

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

Getting started with Next.js and GraphCMS

Nirmalya Ghosh — Sun, 12 Jul 2020 05:50:11 +0000

In this tutorial, we'll learn how we can create a Next.js project and integrate it with GraphCMS.

Introduction

GraphCMS's 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 out of the box. Some of them are as follows:

GraphQL API
Content Localization
Webhooks
Versioning
Content API

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

Rich Content Editing
Global Marketing Campaigns
SEO Friendly
WYSIWYG
Built in Localization

A demo of the application that we will be building is available here which is hosted on Vercel and the source code is available on Github.

Getting Started with Next.js

Let's setup a new Next.js project. To do so, we will have using the following command:

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

The above command will generate the following files for us:

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

cd nextjs-graphcms && yarn dev

The above command will spin up a development server on http://localhost:3000/:

Getting started with GraphCMS

First, we need to create an account on GraphCMS 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.

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

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

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

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

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

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

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

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

Installing GraphQL client

We will be using 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:

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:

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/, we should be able to see the following screen:

Adding styles using TailwindCSS

We will be adding TailwindCSS using 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.

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

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.

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

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/, we should be able to see the following:

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:

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:

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.

More information regarding how to add pages in Next.js can be found in the official Next.js documentation.

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 which is hosted on Vercel and the source code is available on Github.

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

Nirmalya Ghosh — Mon, 06 Jul 2020 03:47:36 +0000

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. We'll also learn about how to install and get started with Strapi using Docker.

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 for saving my data to the database. However, it becomes difficult to manage this as Firebase has strict data types as well as issues with scaling, pricing, 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 which is an open source Headless CMS. It's very easy to get started with Strapi. Also, it has a nice set of plugins in their marketplace.

I'll also write about Hasura 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.

Getting started with Strapi

We'll be using the Docker version of Strapi. 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. 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, MongoDB, MySQL and MariaDB. Example applications using these databases are present in the Strapi Docker repository.

Installing Strapi

First, we need to create a directory named backend and then download the docker-compose.yml file from the strapi-docker repository. Now, we need to start Docker. Once Docker is up and running, we can go inside the backend directory and run our Strapi container:

cd backend && docker-compose up

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

Creating our first administrator profile

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

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

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.

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:

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

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

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

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

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

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

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

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

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:

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

Viewing entries of a content-type

Strapi generates routes for our content-types automatically. But, if we visit 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:

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.

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

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 tool to create a new Product entry.

We just need to do a POST request to http://localhost:1337/products endpoint with the following request body:

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

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.