Build a Scalable Job Board with Next.js and Appwrite

Building a Job Hosting Website with Next.js and Appwrite: A Step-by-Step Guide

In today’s digital landscape, creating a job hosting website that is both efficient and scalable is crucial for businesses and individuals alike. This article will walk you through the process of building a job hosting website using Next.js and Appwrite, two powerful tools that can help you achieve your goals.

What is Next.js?

Next.js is a popular React framework that enables developers to create server-side rendered web applications with ease. Its built-in features, such as automatic code splitting, optimized image loading, and automatic routing, make it an ideal choice for building fast and SEO-friendly websites.

What is Appwrite?

Appwrite is an open-source backend server that provides developers with a set of easy-to-use tools to build and manage serverless web and mobile applications. With Appwrite, you can focus on building your frontend application without worrying about the backend infrastructure. Its features, such as authentication, database, storage, and functions, can be used individually or combined to build powerful serverless applications.

Setting Up Next.js and Appwrite

To get started, you’ll need to set up a new Next.js project and install Appwrite. You can do this by running the following command in your terminal:

npx create-next-app my-app

Next, change the directory to your project and start your development server on port 3000:

cd my-app
npm run dev

To see if it works, open http://localhost:3000 in your browser.

Initializing Your SDK

The next step is to add a web platform to your project to initialize your SDK and interact with Appwrite services. To do this, navigate to the Appwrite console, click on the “Create project” button, and enter its name. Then, add a new platform by clicking on the “Add platform” button and selecting “Web App”.

Installing Appwrite and Integrating it with Next.js

After adding the platform, you’ll need to select your preferred installation method. You can choose between npm and CDN. For this example, we’ll use npm. Run the following command to add the Appwrite SDK to your project:

npm install @appwrite/sdk

Create a new file in your project directory called .env.local. This file will contain your Appwrite API endpoint and project ID. Add the following lines to the file and replace <your_appwrite_endpoint> with your API endpoint and <your_appwrite_project_id> with your Appwrite project ID:

APPWRITE_ENDPOINT=<your_appwrite_endpoint>
APPWRITE_PROJECT_ID=<your_appwrite_project_id>

Creating a Database in Your Appwrite Console

To display data in your application, you’ll need to create a database in the Appwrite console. To do this, navigate to the left side of the Appwrite dashboard, select “Databases”, click the “Create Database” button, and enter the name of your database. You can create a collection in Appwrite by providing a name and adding attributes with various data types, including strings, integers, booleans, and more.

Reading and Writing Data to the Database

To read the data, you’ll need to fetch them first. To do this, modify your getServerSideProps function to become an async function with a try…catch block:

import { Databases } from '@appwrite/sdk';</p>

<p>const db = new Databases(client);</p>

<p>export async function getServerSideProps() {
  try {
    const data = await db.listDocuments('[DATABASE<em>ID]', '[COLLECTION</em>ID]');
    return { props: { data } };
  } catch (error) {
    console.error(error);
    return { props: { data: null } };
  }
}

Displaying the Job Details Page

To display a details page for each listing, you’ll need a function that can load server-side data based on the id parameter from the URL query and pass it as props to a React component. You can use the getDocument method provided by Appwrite to retrieve a document by its unique ID:

import { Databases } from '@appwrite/sdk';</p>

<p>const db = new Databases(client);</p>

<p>export async function getServerSideProps({ params }) {
  const id = params.id;
  try {
    const data = await db.getDocument('[DATABASE<em>ID]', '[COLLECTION</em>ID]', id);
    return { props: { data } };
  } catch (error) {
    console.error(error);
    return { props: { data: null } };
  }
}

Adding New Jobs

To add new jobs to your database using a form, you’ll need the createDocument function provided by Appwrite:

import { Databases } from '@appwrite/sdk';</p>

<p>const db = new Databases(client);</p>

<p>const AddNewJob = () => {
  const [object, setObject] = useState({});</p>

<p>useEffect(() => {
    if (object!== undefined) {
      addNewElementToDatabase(object);
    }
  }, [object]);</p>

<p>const addNewElementToDatabase = async (object) => {
    try {
      await db.createDocument('[DATABASE<em>ID]', '[COLLECTION</em>ID]', object);
      console.log('Job added successfully!');
    } catch (error) {
      console.error(error);
    }
  };</p>

<p>return (
    <form>
      {/* Form fields */}
      <button onClick={() => addNewElementToDatabase(object)}>Add Job</button>
    </form>
  );
};

By following these steps, you’ll have a fully functional job hosting website using Next.js and Appwrite. You can find the complete source code for this project in this GitHub repo.