Sign up for Hasura Newsletter

Create Next.js project

We're usings the - at time of writing - new app router from Next.js. App Router is a new feature that allows you to utilize React's newest features like Suspense and Concurrent Mode. However, our application will only be a single page, comprised of a few different components.

Init the project

Let's start by creating a new Next.js project.

npx create-next-app@latest hrtool .

Follow the steps and choose TypeScript, Tailwind CSS, and App Router when prompted.

Fire up the development server and make sure everything is working.

cd hrtool
npm run dev

If you see the Next.js welcome page, you're good to go!

Next.js landing page


Let's clean up the project a bit. First, let's clear out everything inside the /app/page.tsx file. You can replace it with the following:

export default function Home() {
return <main className="p4"></main>;

Next, let's reset the default stylings by removing everything inside /styles/globals.css. You can replace it with the following:

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

Finally, as we all forget to do these things, let's update the metadata object in /app/layout.tsx:

export const metadata = {
title: "People Pleasers | The most pleasing HR service in the world",
description: "Ask your AI assistant to find the perfect candidate and save you time and money",

Install dependencies

We're going to use Apollo Client to communicate with our GraphQL API. Apollo has an experimental package that's built for Next.js and the App Router paradigm:

npm install @apollo/client@beta @apollo/experimental-nextjs-app-support

With our application gutted and our dependencies installed, we're ready to start building!

Did you find this page helpful?
Start with GraphQL on Hasura for Free
  • ArrowBuild apps and APIs 10x faster
  • ArrowBuilt-in authorization and caching
  • Arrow8x more performant than hand-rolled APIs
footer illustration
Brand logo
© 2024 Hasura Inc. All rights reserved