Building a Serverless Job Board with Next.js and Contentful

This week I built from scratch a Job Board.

It focuses primarily on React Native jobs in Israel.

I’ve used NextJS and Contentful, and it took me 5 hours only. I’ll teach you how to do so too.

When I started, I checked for no-code tools to help me build it quickly. Everything seems so pricey for just building a job board.

Web Flow will cost something around 30 bucks and with Airtable or something similar, it might even cost more.

Then I started to build a custom database for that, using MongoDB.

But it seems like so much job (pun intended) for such a simple website.

With Contentful free tier and Vercel free for developers deployments, life’s amazing.

What the hack is NextJS and Contentful?

According to its website, Contentful is an API-first Content Management Platform. Exactly what we need.

Built by Vercel, Next.js is a production-ready framework that helps you create fast React apps.

Prerequisites

• I assume you have basic Javascript or React Knowledge.
• You should have Node installed on your computer.
• Contentful User
• Vercel CLI Installed (or just npm install -g vercel)

Step 1: Contentful JobPost Entity

The most important entity on our website is a Job Post.

Go to Cotnenful dashboard, and first create a new space.

Then, from your Space Home, navigate to Content Model, and click on Add Content Type A form should appear. Enter JobPost for the name, and jobPost for the API Identifier.

Click on Create.

Now, add the following fields to your content model with the correct types:

Your JobPost Content Model should look like this:

Now we’ll need to grab our API Keys in order to request the JobPosts from Contentful. Click the Settings tab and choose the API Keys option, then click the Add API Key button.

Good to go! We made everything we need in Contentful. Look how easy is that to create content.

Step 2: Creating the NextJS App

At your projects folder, create a new folder and navigate inside it:

Now let’s initialize the project and install the dependencies we need.

Create the required folders and files to work with next.js:

Good job so far.

Now open your favorite code editor, and in package.json, add this 2 scripts, which tells NPM how to run our code:

Amazing! Now let’s hack a website.

Step 3: Contentful JS Client

For interacting with our Headless CMS through the API, we’ll need to create a Contentful client in our code.

First, we’ll need to let Contentful know who we are. Because it’s a secret to the outer world (we don’t want people to use our Contentful credentials), Let’s add Environment Variables to our project.

Grab your Contentful space id from Settings -> General Settings -> Space ID from your Contentful dashboard.

Now let’s tell Vercel to use the variables in build time. Create a vercel.json file in the root folder, and inside it paste this.

Don’t forget to change your contentful space id and API access token we grab earlier!

And update vercel CLI:

Great. Now we also want to use these in development.

Create a file named .env.local, and enter this inside it:

Amazing! We can finally write the code.

At your index.js file, Create the contentful client to use their amazing API.

In the next step, we’ll fetch the jobs and create the UI and fetch them jobs.

Step 4: Home Page Component

Under our client, let’s add the Home Page Component. Paste this code, and we’ll explain it right away.

What’s going on here?

We creating a function that returns our JobPost items, called fetchJobPosts. Our job (again, pun) is to send a request through the contentful client we created earlier, and parse the items to return only their fields.

Then we define the HomePage component by creating a new function with the same name. At the component 1 line, we defined a react state for our jobs. It will start as an empty array.

Later, we define an effect which will run on the component mount (thanks to the empty array as the second argument). Inside it, we are calling to getPosts, which is an asynchronous function who call to fetchJobPosts, and set the jobs in the state.

At the JSX part of our component, we go over each job, and render it to the screen, while linking to the actual job post.

Step 5: Deploy

Thanks to the giants at Vercel, we can use their amazing tool to deploy our job board to production.

All we need is to run this command in our terminal, and our site will be live on the internet.

$ now --prod

That’s it — You just created a NextJS job board.

Next, you probably want to style the job posts, connect it to a mail subscription service, and allowing sending you job posts. You can do so with GetForm.io.

Feel free to send me a DM on Twitter, or visit my website for more content like this.

Originally published at coheneyal.com