Next.js Functions


Building a Job Board with NEXT.js and Hasura GraphQL

In today’s digital age, job hunting has become easier and more efficient, thanks to job boards. These platforms connect job seekers with employers and streamline the hiring process. If you’re interested in creating your own job board, you’re in the right place. In this blog post, we’ll guide you through the process of building a job board using NEXT.js and Hasura GraphQL. We’ll cover everything from setting up your development environment to deploying your job board for the world to see.

Building a Job Board with NEXT.js and Hasura GraphQL

1. Prerequisites

Before we dive into the development process, make sure you have the following prerequisites in place:

  • Node.js: Ensure you have Node.js installed on your computer. You can download it from the official website.
  • npm or Yarn: npm is the default package manager for Node.js, but you can also use Yarn if you prefer. You can install Yarn globally using npm with the command npm install -g yarn.
  • Git: You’ll need Git for version control. You can download it from Git’s official website.
  • Hasura GraphQL Engine: Install Hasura GraphQL Engine by following the instructions in the official documentation.
  • A Text Editor: Choose a text editor or integrated development environment (IDE) of your preference. Some popular choices include Visual Studio Code, Sublime Text, and WebStorm.

2. Setting Up Your Project

Now that you’ve got your prerequisites sorted, let’s set up the project.

2.1. Create a New NEXT.js App

Open your terminal and run the following commands to create a new NEXT.js app:

npx create-next-app job-board
cd job-board

This will create a new directory called job-board and scaffold a basic NEXT.js application within it.

2.2. Initialize a Git Repository

Next, initialize a Git repository to track your project’s changes:

git init

2.3. Install Dependencies

To work with Hasura GraphQL and other required packages, you need to install some dependencies. Run the following command:

npm install graphql apollo-client apollo-link apollo-link-http

These packages will help you interact with GraphQL from your NEXT.js application.

2.4. Set Up Hasura GraphQL

Before proceeding, make sure you have Hasura GraphQL Engine running locally or on a server. You’ll need the GraphQL endpoint URL for your Hasura instance.

2.5. Create Configuration

Create a configuration file (e.g., config.js) in your project root to store environment-specific variables, such as the Hasura GraphQL endpoint:

// config.js

Replace ‘YOUR_HASURA_GRAPHQL_ENDPOINT’ with the actual URL of your Hasura GraphQL instance.

3. Designing the Data Model

Now that you’ve set up your project and configured the Hasura GraphQL endpoint, it’s time to design the data model for your job board.

3.1. Define the Database Schema

Use Hasura’s built-in GraphQL schema editor to define your data model. You can create tables for job listings, user accounts, and any other relevant entities. Here’s an example schema for job listings:

type JobListing {
  id: ID!
  title: String!
  description: String!
  company: String!
  location: String!
  salary: Float
  postedAt: Timestamp!

This schema defines a JobListing type with fields like title, description, company, and location. Adjust the schema to match your specific requirements.

3.2. Set Up Authentication

Depending on your use case, you may want to implement user authentication. Hasura makes this relatively easy with its authentication system. You can choose from various authentication providers like email/password, JWT, or third-party OAuth providers.

3.3. Apply Migrations

Once you’ve defined your schema and configured authentication, apply the migrations to create the necessary database tables. Hasura will generate SQL migration files for you to run:

hasura migrate create initial_migration -d "Initial migration"
hasura migrate apply --database-name default

This will create the database tables based on your schema definition.

4. Creating GraphQL Queries

With your data model in place, you can start writing GraphQL queries to fetch and manipulate data.

4.1. Query Job Listings

Create a GraphQL query to retrieve a list of job listings:

query GetJobListings {
  job_listings {

This query fetches job listings with fields like id, title, and description. You can customize this query based on your requirements.

4.2. Implement Authentication

If you’ve set up authentication, create GraphQL mutations for user registration, login, and any other relevant operations. Here’s a simplified example of a registration mutation:

mutation RegisterUser($email: String!, $password: String!) {
  register_user(email: $email, password: $password) {

Make sure to secure these mutations and only allow authorized users to access them.

5. Building the NEXT.js Frontend

Now that your GraphQL queries and mutations are ready, it’s time to build the frontend of your job board using NEXT.js.

5.1. Create Pages

In the pages directory of your NEXT.js app, create pages for your job board, such as the homepage, job listings page, and user authentication pages. Here’s an example directory structure:


5.2. Fetch Data with Apollo Client

To fetch data from your Hasura GraphQL backend, use Apollo Client. Create a custom Apollo Client instance and configure it with your Hasura GraphQL endpoint:

// lib/apollo.js
import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';
import { HASURA_GRAPHQL_URL } from '../config';

const client = new ApolloClient({
  link: new HttpLink({ uri: HASURA_GRAPHQL_URL }),
  cache: new InMemoryCache(),

export default client;

5.3. Query Data in Components

In your NEXT.js components, use Apollo Client to query data from your Hasura GraphQL backend. For example, in your jobs.js page:

// pages/jobs.js
import { useQuery } from '@apollo/client';
import { GET_JOB_LISTINGS } from '../queries';

const JobsPage = () => {
  const { loading, error, data } = useQuery(GET_JOB_LISTINGS);

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

  const jobListings = data.job_listings;

  return (
      <h1>Job Listings</h1>
        { => (
          <li key={}>
            {/* Add more job details here */}

export default JobsPage;

5.4. Implement User Authentication

If you’ve set up user authentication, create login and registration forms using your preferred UI library or framework. Use GraphQL mutations to interact with your Hasura backend and handle user authentication.

6. Styling Your Job Board

To make your job board visually appealing, consider using a CSS framework like Bootstrap or Tailwind CSS. You can also create custom CSS styles to match your brand’s identity. Remember to keep the user experience (UX) in mind and ensure that your job board is responsive and easy to navigate.

7. Testing Your Job Board

Testing is a crucial part of the development process. Make sure to write unit tests for your components and integration tests for your GraphQL queries and mutations. Tools like Jest and Testing Library can help you with this.

8. Deploying Your Job Board

Once you’ve built and tested your job board locally, it’s time to deploy it for the world to see. There are several hosting options available, including Vercel, Netlify, and AWS Amplify. Here, we’ll provide a general overview of the deployment process using Vercel:

8.1. Create a Vercel Account

If you don’t have one already, sign up for a Vercel account at

8.2. Install the Vercel CLI

Install the Vercel CLI globally using npm or Yarn:

npm install -g vercel

8.3. Deploy Your App

Run the following command to deploy your NEXT.js app to Vercel:


Follow the prompts to link your project to Vercel, and your app will be deployed in minutes.


Congratulations! You’ve successfully built a job board using NEXT.js and Hasura GraphQL. You’ve learned how to set up your project, design a data model, create GraphQL queries and mutations, build a frontend, style your app, and deploy it to the web. This project can serve as a foundation for further customization and expansion, such as adding job application features or integrating with additional services.

Remember that the job board industry is highly competitive, so continuous improvement and innovation are key to success. Keep refining your job board to provide the best experience for both job seekers and employers. Good luck with your project, and happy coding!

Previously at
Flag Argentina
time icon
Accomplished Senior Software Engineer with Next.js expertise. 8 years of total experience. Proficient in React, Python, Node.js, MySQL, React Hooks, and more.