Not to break out of the most common web-development cliche of using animals as a subject of a fun side-project, we will build a simple dog shelter website. For now, it will consist of three routes: the homepage, the general /dogs view and the details view of a singular dog.

The general goal is to present a neat foundation for an SSR React application that you can later use for some bigger projects. We will use Next.js + TypeScript as the UI framework and our data will be stored in a service called Hasura, from which we will fetch it through automatically generated GraphQL API.

1. Set up Next.js + TypeScript application

I decided to boot up the entire project from scratch. Let’s start with:

npm init
npm install react react-dom next

The structure of Next.js application revolves around the usage of pages directory for defining the routes.

2. Hasura

Nothing translates the spirit of JamStack better than Hasura. We are about to create a full backend with GraphQL API in a matter of minutes.

Hasura does wonders with exposing to you as little as it is needed to maintain a database, API and even some back-end logic.

3. Next.js + Hasura

Next.js shines the most when you properly leverage its capabilities on the data-fetching side. The framework offers you a bunch of methods that you can run on pages/ route components that define in what way this piece of application will be built and served.

For Apollo configuration:

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: `https://${process.env.NEXT_PUBLIC_API_HOST}`,
  cache: new InMemoryCache(),
});

The useQuery hook returns three things: loading, error and data.

4. Fetch data on the server-side

For server-side data fetching, we use getInitialProps:

Dogs.getInitialProps = async ({ apolloClient }) => {
  const response = await apolloClient.query({
    query: GET_DOGS,
  });

  return {
    dogs: response.data.dogs,
  };
};

5. Deploy

For deployment, we will grab Vercel:

npm i -g vercel
vercel

Boom! That’s really it. You just created a full stack-JamStack application with routes, TypeScript, CI/CD, GraphQL API and SSR!