Home
ArticlesProjectsGuides

Hasura Next.js Boilerplate

Logo

As the name suggests, Hasura Next.js Boilerplate is a boilerplate for building applications using Hasura and Next.js. This boilerplate will let you up and running with a Next.js front-end and Hasura back-end application easily.

Learn more about why this boilerplate was created or check out how to create a real-time application.

Table of Contents

Motivation

I wanted to built an application which will have Next.js serving the front-end while the back-end will be powered by Hasura. However, doing a quick search on Google, I realized that there isn't any good solution or boilerplate from where I can start coding.

As a result, I created this repository from where anyone can start building an application which combines the flexibility of Next.js and the simplicity of Hasura.

I realized that many people have faced a similar hurdle while developing such application. Both Next.js and Hasura are great softwares and it shouldn't be difficult to build an application with them.

Next, you can take a look at all the features that this boilerplate offers or check out how to create a real-time application.

A special mention to this boilerplate which helped in simplifying a lot of code generation.

Features

This boilerplate is built on top of Next.js and Hasura. So, you get all the benefits and features that these two softwares provide. However, the following features are the most important ones:

  1. Automatic compilation and bundling of Next.js which ensures optimized code during production builds.
  2. Pre-rendering of pages at build time (SSG) or request time (SSR).
  3. Support for TypeScript.
  4. File-system routing which helps in adding new routes to your application.
  5. Support for optimized images out of the box.
  6. Instant real-time GraphQL APIs.
  7. Built-in authorization and authentication.

Next, you can check out how to get started with this boilerplate.

Getting started

Hasura Next.js Boilerplate is a boilerplate for building applications using Hasura and Next.js. This boilerplate consists of the following:

  1. Frontend: Next.js application
  2. Backend: Dockerized Hasura application

Overview

This boilerplate is built using the following technologies:

  1. Chakra UI
  2. Emotion
  3. GraphQL
  4. Apollo
  5. NextAuth
  6. TypeScript

It supports GraphQL Query, Mutation and Subscription out of the box.

Requirements

  1. Node.js
  2. npm
  3. Docker

Packages

Frontend: Next.js application

This application is the primary user-facing application. Once it’s up and running (see Development section), it’s available on http://localhost:3000.

Backend: Dockerized Hasura application

Hasura is an open source engine that connects to our databases & micro-services and auto-generates a production-ready GraphQL backend. It’s very easy to get Hasura up and running on our local system. All the migrations are set up in the migrations directory.

Installation

  1. Clone the application.
git clone git@github.com:ghoshnirmalya/nextjs-hasura-boilerplate.git
  1. Run the bootstrap script by running the following command from the root of your project:
cd nextjs-hasura-boilerplate && yarn bootstrap
  1. Create a Google OAuth Client from https://console.developers.google.com/apis/credentials/oauthclient and copy the credentials to GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET in your .env file inside the frontend directory.

  2. Start Docker and run both the applications by running the following command from the root of your project:

yarn dev

We need to start Docker and then run the above command. The Hasura console will be available at http://localhost:8080/console. The Hasura GraphQL endpoint will be up and running on http://localhost:8080/v1/graphql. The Next.js application will be available at http://localhost:3000/.

Deployments

Frontend

Click on the button below to deploy the frontend application on Vercel. You'll need to sign up for a free Vercel account.

Deploy with Vercel

Backend

Click on the button below to deploy the backend application on Heroku. You'll need to sign up for a free Heroku account.

Deploy to
Heroku