The latest Strapi-related news and major events happening for Strapi – including announcements, remote-work, organization and tips on running a start-up. 

Company

Engineering

The Tutorials section covers an introduction to Strapi, some advanced technical content, product updates and releases. From basic workaround to in-depth development guides. 

Tutorials

The Ecosystem section covers everything related to the world of Headless CMS and Strapi's place in it. 

Ecosystem

Get all the latest updates, news and events.

Subscribe to the newsletter 📣

Bootstrap vs. Tailwind CSS: A Comparison of Top CSS Frameworks

large_Bootstrap vs. Tailwind CSS_ A Comparison of Top CSS Frameworks.png

medium_Bootstrap vs. Tailwind CSS_ A Comparison of Top CSS Frameworks.png

small_Bootstrap vs. Tailwind CSS_ A Comparison of Top CSS Frameworks.png

thumbnail_Bootstrap vs. Tailwind CSS_ A Comparison of Top CSS Frameworks.png

Bootstrap vs. Tailwind CSS_ A Comparison of Top CSS Frameworks.png

Do you ever ask yourself, “What can I build today?"" You don’t have to worry about that anymore, especially if this is your first Next.js project. In this tutorial, we will learn how to build a job board with Next.js and Tailwind CSS. Below is a list of what this tutorial covers.

- A brief introduction to Next.js and Strapi
- Setting up Strapi
- Build the architecture of your content
- Creating your content with Strapi’s content manager
- Setting up your front end
- Connecting the backend to the frontend
- Dynamic API routes
- Conclusion

## An Introduction to Next.js and Strapi

[Next.js is a React framework](https://nextjs.org/) that allows you to build supercharged single-page Javascript apps, SEO-friendly and extremely user-facing static websites and web applications using the React framework. Its advantages include hybrid static and server rendering, TypeScript support, smart bundling, route prefetching, and more, with no extra configuration needed.

[Strapi is a JavaScript-built headless CMS](https://strapi.io/wordpress-alternative) that helps you build and manage the backend of your project with ease while allowing you to use any [frontend framework](https://strapi.io/integrations) of your choice. Let’s see how we can use these powerful tools together to create our job board application.

## Setting up Strapi
Make sure you have [Node.js](https://nodejs.org/en/download/) and [NPM](https://docs.npmjs.com/cli/v6/commands/npm-install) installed on your machine before continuing.

1. In your code editor, create your project folder and inside it, create a folder called backend.  I used VSCode, and my project folder is named `job board`.

```bash
    mkdir backend && cd backend
```
2. Proceed to install Strapi on your machine by running this command.
```bash
    npx create-strapi-app@latest <app-name> --quickstart
```
Strapi will then install all the necessary dependencies in the backend folder. 

3. After the installation, run the command below:
```bash
     npm run develop
```
This starts the Strapi server at [localhost:1337](http://localhost:1337) and automatically opens up the sign-up form in your browser. 

4. Fill in your details and sign in. Welcome to your admin dashboard.

![Strapi Admin Dashboard](https://www.dropbox.com/paper/ep/redirect/image?url=https%3A%2F%2Fpaper-attachments.dropbox.com%2Fs_691E5F0E2CB69A54A99A39FE1428B0BCC77A89C64F3A0D04D17720BA9FB2E890_1662047539149_Strapi%2BAdmin%2BDashboard.png&hmac=pQ1GxlHlOhndMSUZ%2BSdleCMEmU8rcDNN121bN7eWgMs%3D&width=1490)

## Build Your Content Architecture
Go to the 'Content-Type Builder'. This is where you’ll create your data structure. Click on the 'create new collection'. This modal below should appear. The display name will be "job”. This name will be displayed for your URL link ([http://localhost:1337/api/job](http://localhost:1337/api/job)).

![content type builder](https://paper-attachments.dropbox.com/s_A2C467E6FD17F8ED9799C07C3B4922088C398A223A32EB37D94B5B7D08F501E1_1661774626336_Screenshot+2022-08-10+at+13.48.58.png)

Click 'continue’. This will take you to the next modal. In this modal, you can select the fields for our collection types. In our case, we will select:

1. **Text**: The name will be “vacancy”.
2. **Text**: The name will be “recruiter”.
3. **Rich Text**: The name will be “description.”
4. **Email:** The name will be “email”.
5. **Number:** The name will be “salary” and we will choose the integer number format.
6. **Media:** The name will be "image." Set the type to “single media”. Proceed to click on advanced settings and select “allowed types of media” and check only “images”.

Save everything. After that, go back and click “create new collection” again. This time, the display name should be "Category.” Click “continue” and select “relation”. This is to enable us relate this collection type to our job type. You will see how as we proceed. Add another field and select the name field. For the name, we will name it "name.” Then, save.

![Edit Jobs Modal](https://paper-attachments.dropbox.com/s_A2C467E6FD17F8ED9799C07C3B4922088C398A223A32EB37D94B5B7D08F501E1_1661774653529_Screenshot+2022-08-10+at+14.11.37.png)

Once you’ve completed the actions above, your collection type should look like the screenshot below. Let’s add some content.

![Collection Type](https://paper-attachments.dropbox.com/s_A2C467E6FD17F8ED9799C07C3B4922088C398A223A32EB37D94B5B7D08F501E1_1661774665426_Screenshot+2022-08-10+at+14.18.14.png)

## Creating Your Content
We are now ready to add some content. Go to category and click on the “create new entry” button. There, we will enter the type of category the job belongs to. For our first entry, we will add “entry”, then proceed to add intermediate, junior, and senior.

Don’t forget to save each entry and publish them. You should have something similar to the image below:

!["Create New Entry" page](https://paper-attachments.dropbox.com/s_A2C467E6FD17F8ED9799C07C3B4922088C398A223A32EB37D94B5B7D08F501E1_1661774689540_Screenshot+2022-08-10+at+14.46.25.png)

Go to job, click “create new entry,” and fill in your data. When completed, it should look like the screenshot below. Don’t forget to relate your categories to your job type. For this one, I selected “entry”. Create multiple entries, save and publish.

![Collection Summary](https://paper-attachments.dropbox.com/s_A2C467E6FD17F8ED9799C07C3B4922088C398A223A32EB37D94B5B7D08F501E1_1661774705431_Screenshot+2022-08-10+at+14.45.34.png)

Make sure you’ve saved and published your content. Next, we will go to **Settings > Users and Permissions Plug-In > Roles > Public**. What we are doing here is to make sure that the data is accessible from the frontend. If you don’t do that, you will get this error:

![Not Public Error](https://paper-attachments.dropbox.com/s_A2C467E6FD17F8ED9799C07C3B4922088C398A223A32EB37D94B5B7D08F501E1_1661774732206_Screenshot+2022-08-10+at+15.12.45.png)

I am using the [RapidAPI extension on VSCode](https://marketplace.visualstudio.com/items?itemName=RapidAPI.vscode-rapidapi-client) to make a request to the API. Check the boxes for “find” for each of your content types: job and category. You can go back again and check if the API call returns JSON data. 

You will notice that the JSON data returned does not contain everything, including the image. To enable the API to return all the JSON data, make sure your API endpoint includes the query string with [the populate parameter](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest/populating-fields.html) like this: [http://localhost:1337/api/jobs?populate=*](http://localhost:1337/api/jobs?populate=*) . The API is ready for use in the frontend.

## Setting up the Frontend
Before we install Tailwind CSS and Next.js, create a folder named frontend. You will find the full documentation on [how to install Tailwind CSS with Next.js](https://tailwindcss.com/docs/guides/nextjs), as styling is not the main priority of this tutorial.

```bash
    mkdir frontend && cd frontend
```

Install Next.js in the frontend folder and then run the command to launch the Next.js [localhost:3000](http://localhost:3000) server in the browser.

```bash
    npx create-next-app <app-name>
    npm run dev
```

Your job board will contain a basic card component that will display the title, description, image, email, and recruiter’s name that will lead to the full detailed page of the job post. You will then create a page that displays each of the job posts using dynamic routing.

In the root folder of the pages folder “frontend/pages”, create a new folder called “jobs” and inside it, create a file called index.js (frontend/pages/jobs/index.js). Write up an async function to fetch the jobs from the backend.

```js
    // to fetch data
    export const getStaticProps = async () => {
         const res = await fetch("<http://localhost:1337/api/jobs?populate=*>")
         const data = await res.json()
         
         return {
              props: {
                   getJobs: data.data
              }
         }
    }
```

## Connecting the Backend to the Frontend
In the same file (frontend/pages/jobs/index.js), beneath the function we wrote above, write up the JobPage component. This component will take the “getJob” object as an argument and display whatever we’ve specified.

```js
    import Link from 'next/link'
    
    const JobPage = ({getJobs}) => {
        // Minimising the paragrahps on the card component
        const MAX_LENGTH = 250
    
        return ( 
         <>
              <section className="w-full px-4 py-24 mx-auto max-w-7xl md:w-4/5">
                   <div className="grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3">
                        {getJobs.map( job => (
                            <Link key={job.key} href={'/jobs/' + job.id}>
                              <div>
                                 <h2 className="mb-2 text-xl font-bold leading-snug text-gray-900">
                                     <a href="#" className="text-gray-900 hover:text-purple-700">{job.attributes.vacancy}</a>
                                 </h2>
                                     <p className="mb-4 text-sm font-normal text-gray-600">
                                                   {job.attributes.description.substring(0, MAX_LENGTH) + " ..."}
                                      </p>
                                 <a className="flex items-center text-gray-700" href="#">
                                   <div className="avatar">
                                      <img
                                        className="flex-shrink-0 object-cover object-center w-12 h-12 rounded-full"
                                        src={`http://localhost:1337${job.attributes.image.data.attributes.url}`}
                                        alt={"Photo of " + job.attributes.recruiter} 
                                       />
                                    </div>
                                   <div className="ml-2">
                                       <p className="text-sm font-semibold text-gray-900">{job.attributes.recruiter}</p>
                                       <p className="text-sm text-gray-600">{job.attributes.email}</p>
                                   </div>
                                 </a>
                               </div>
                            </Link>
                        ))}   
                   </div>
         
                 {/* btns */}
                 <div className="flex flex-col items-center justify-center mt-20 space-x-0 space-y-2 md:space-x-2 md:space-y-0 md:flex-row">
                     <Link href="/"><a href="#" className="px-3 py-2 text-indigo-500 border border-indigo-500 border-solid hover:text-black md:w-auto">Home</a>
                     </Link>
                 </div>
             </section>     
         </>
         )
    }
     
    export default JobPage;
```

Then go to your browser and type in: [http://localhost:3000/jobs](http://localhost:3000/jobs). Your application should look like this:

![Sample Application Screenshot](https://paper-attachments.dropbox.com/s_A2C467E6FD17F8ED9799C07C3B4922088C398A223A32EB37D94B5B7D08F501E1_1661774762176_Screenshot+2022-08-09+at+15.58.39.png)

## Dynamic API Routes
We want to see the full details of each job post on our board. How can we do that? With Next.js, we will use dynamic routes to create a single page based on its Id.

Create a new file inside the page folder, name it [id].js (frontend/pages/jobs/[id].js). Proceed with this code below.

```js
    export const getStaticPaths = async () => {
        const res = await fetch("<http://localhost:1337/api/jobs?populate=*>")
        const { data: jobs } = await res.json()
    
                    const paths = jobs.map( (job) => {
            return  {
                params: { 
                    id: job.id.toString(),
                }
         }})
    
        return {
            paths,
            fallback: false
        }
    }
    
    export const getStaticProps = async ({params}) => {
        const {id} = params
        const res = await fetch(`http://localhost:1337/api/jobs/${id}?populate=*`)
        const {data: job } = await res.json()
    
              return {
            props: {job},
            revalidate: 1,
        }
    
    }
```

The getStaticPaths function gets called during build time and pre-renders paths for you, which are based on the job Id from each individual object returned from the API. Make sure that the Id is converted from integer to string for it to properly work.

The getStaticProps function now only fetches a single job post based on its Id in the URL. The data fetched will now look like this: [http://localhost:3000/jobs/1](http://localhost:3000/jobs/1) and return the contents for Id 1.

To style your full detailed job post page, you can copy and paste this code for the DetailedJobs component.

```js
    const DetailedJobs = ({job}) => {
        const Max_DATE_LENGHT = 10
        const Max_TIME_LENGHT = 11
        
        return ( 
            <>
            {/* {JSON.stringify(job, null, 2)} */}
            <article className="px-4 py-5 mx-auto max-w-7xl">
                <div className="w-full mx-auto mb-12 text-left md:w-3/4 lg:w-1/2">
                    <p className="mt-6 mb-2 text-xs font-semibold tracking-wider uppercase text-primary">{job.attributes.categories.data[0].attributes.type + " LEVEL"}</p>
                    <h1 className="mb-3 text-3xl font-bold leading-tight text-gray-900 md:text-4xl">
                    {job.attributes.vacancy}
                    </h1>
                    <div className="flex mb-6 space-x-2 text-sm">
                    <a className="p-1 bg-indigo-500 rounded-full text-gray-50 badge hover:bg-gray-200" href="#">CSS</a>
                    <a className="p-1 bg-indigo-500 rounded-full text-gray-50 badge hover:bg-gray-200" href="#">Tailwind</a>
                    <a className="p-1 bg-indigo-500 rounded-full text-gray-50 badge hover:bg-gray-200" href="#">AlpineJS</a>
                    </div>
                    <a className="flex items-center text-gray-700" href="#">
                    <div className="avatar">
                        <img 
                        className="flex-shrink-0 object-cover object-center w-24 h-24 rounded-full"
                        src={`http://localhost:1337${job.attributes.image.data.attributes.url}`}
                        alt={"Photo of " + job.attributes.recruiter} />
                    </div>
                    <div className="ml-4">
                        <p className="font-semibold text-gray-800 text-md">{job.attributes.recruiter}</p>
                        <p className="text-sm text-gray-500">{job.attributes.publishedAt.substring(0, Max_DATE_LENGHT)}</p>
                        <p className="text-sm text-gray-500">{job.attributes.createdAt.substring(16, Max_TIME_LENGHT)}</p>
                    </div>
                    </a>
                </div>
    
                <div className="w-full mx-auto prose md:w-3/4 lg:w-1/2">
                    <p>
                    {job.attributes.description}
                    </p>
                </div>
                
                <div className="flex flex-col items-center justify-center mt-10 space-x-0 space-y-2 md:space-x-2 md:space-y-0 md:flex-row">
                     <Link href="/jobs"><a href="" className="px-3 py-2 text-indigo-500 border border-indigo-500 border-solid hover:text-black md:w-auto">Back</a>
                     </Link>
                 </div>
            </article>
            </>
         )
    }
     
    export default DetailedJobs;
```

Your final application should look like this:

![The Job Application](https://paper-attachments.dropbox.com/s_A2C467E6FD17F8ED9799C07C3B4922088C398A223A32EB37D94B5B7D08F501E1_1661774819005_Screenshot+2022-08-12+at+13.26.54.png)

## Conclusion
I hope you’ve enjoyed this tutorial and are looking forward to building additional projects with Strapi and Next.js.

When deploying your application on Vercel, make sure you change Strapi’s URL link to the one you’ve hosted your Strapi app to avoid deployment issues. In my case, I hosted my Strapi application on Heroku.

![Code Sample](https://paper-attachments.dropbox.com/s_A2C467E6FD17F8ED9799C07C3B4922088C398A223A32EB37D94B5B7D08F501E1_1661774867417_Screenshot+2022-08-29+at+13.53.05.png)

[This project in the tutorial](https://github.com/TreciaKS/secure-job) is absolutely open source and if you want to add a feature or edit something, feel free clone it and make it your own or to fork and make your pull requests.

Looking for more things to build with Strapi? Here’s [how you can build a podcast application with Strapi and Next.js.](https://strapi.io/blog/how-to-build-a-podcast-app-using-strapi-and-nextjs) 



How to Build a Job Board with Next.js, Tailwind CSS, and Strapi

How to Build a Blog with Astro, Strapi, and Tailwind CSS

In this tutorial we shall yet see the power of Strapi in building a Task Tracker Chrome extension using ReactJs, Strapi, and Tailwind CSS.

How to Create a Task Time Tracker Chrome Extension With Strapi and ReactJs

Check out the following related blog posts.