This is a Next.js project bootstrapped with create-next-app and developed using Webflow and DevLink.

Webflow Cloneable

You can clone the Webflow project used with this Next JS project at:

https://webflow.com/made-in-webflow/website/job-board-dl

Set up your local environment

Note

To preview the app locally, run npm install and npm run dev. You do not need the Webflow CLI unless you you make changes to the DevLink components from the cloned Webflow site. If you do make changes, follow the steps below to update the components in the webflow/ directory.

Job listings stay empty until you configure the Airtable-backed API keys in .env—follow Backend and environment variables below.

Install Webflow CLI (global install is optional; you can also run the CLI without npx in the export step below).

npm install -g @webflow/webflow-cli

Log in to Webflow and select your desired workspace from the opened browser window. You can append --force to reset any existing authentication.

npx webflow auth login

Then, install the needed dependencies.

npm install

Sync all the Webflow components into your local filesystem. Answer the prompts to generate and configure your webflow.json.

npx webflow devlink export

Select the cloned "DevLink: Job Board" site from the sites listed.

You can also view our DevLink documentation to learn more about all the options, features, and supported elements.

Getting Started

To get started, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Live site

Open http://localhost:3000 with your browser to view the site.

You should see an error in the console:

Warning

installHook.js:1 Server Missing JOBS_KEY or AIRTABLE_BASE_ID — job data unavailable

This is because we have not set up the backend yet.

Backend and environment variables

We created a light weight backend to serve up the content from Airtable. In order for this to work, you'll need to get a copy of the Airtable, generate a personal access token in Airtable (I used the scopes data.records:read and schema.bases.read) and then in the root of your project look for the .env file and add the following lines:

JOBS_KEY=YOURPERSONALACCESSTOKENHERE
AIRTABLE_BASE_ID=YOURPERSONALAIRTABLEBASID

Here you can add:

• Your Airtable API key
• The ID of your Airtable base - this ID can be extracted from the URL when you open your base in Airtable. It will look something like this:

    https://airtable.com/appXXXXXXXXXXXXXXX/123455678abcdefghi/...
                         ^^^^^^^^^^^^^^^^^^
                         This is your Base ID

Once you've added these to your .env file, you should be able to run the development server and see the job data populate the site.