Fetching Data from CrackedDevs API with Next.js

This tutorial will guide you through the process of using the CrackedDevs API with a Next.js application.

Step 1: Create a new Next.js application

First, you need to create a new Next.js application. You can do this by running the following command in your terminal:


npx create-next-app@latest --ts

Step 2: Create a new file in api folder.

Add API Key to .env file Create a new file src/app/api/crackeddevs/route.ts and add the following code:

route.ts

import { NextResponse } from 'next/server';

export async function GET() {
  const API_KEY = process.env.API_KEY; // your api key
  const LIMIT = 2;
  const ACTIVE = true;
  const response = await fetch(
    `https://api.crackeddevs.com/v1/get-jobs?limit=${LIMIT}&active=${ACTIVE}`,
    {
      headers: {
        'api-key': `${API_KEY}`,
      },
    }
  );
  const data = await response.json();
  console.log(data); // get the data from the response
  return NextResponse.json(data);
}

Step 3: Run the application

Finally, you can run your application by executing the following command

npm run dev

Step 4: Fetch data from the API

You can now fetch data from the CrackedDevs API.

Request

GET

/api/crackeddevs

curl -G http://localhost:3000/api/crackeddevs

Use can also use API clients like Postman or Insomnia to make the request.

Step 5: Fetching data Client Side

Create a new file src/app/crackeddevs/page.tsx and add the following code:

page.tsx

'use client';
import { useState, useEffect, FC } from 'react';
import Link from 'next/link';

type jobType = {
  id: string;
  title: string;
  description: string;
  company: string;
  technologies: string[];
  main_technology: string;
  job_type: string;
  max_payment_usd: number;
  country_iso: string;
  applications: number;
  views: number;
  apply_url: string;
};

const Page: FC = () => {
  const [data, setData] = useState<jobType[] | null>(null);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    fetch('http://localhost:3000/api/crackeddevs')
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => {
        console.error('Error fetching data: ', error);
        setLoading(false);
      });
  }, []);

  return (
    <div className="p-4">
      {loading && <p className="text-blue-500">Loading...</p>}
      {data && (
        <div className="p-4 rounded-md mt-4">
          <h1 className="mb-5 text-4xl">Jobs</h1>
          {data.map((job: jobType) => (
            <div
              key={job.id}
              className="m-5 rounded-md border border-gray-300 p-5"
            >
              <h2 className="mb-2 text-2xl">{job.title}</h2>
              <p className="mb-2">{job.description}</p>
              <p className="mb-2">Company: {job.company}</p>
              <p className="mb-2">
                Technologies: {job.technologies.join(', ')}
              </p>
              <p className="mb-2">Main Technology: {job.main_technology}</p>
              <p className="mb-2">Job Type: {job.job_type}</p>
              <p className="mb-2">Salary: {job.max_payment_usd} USD</p>
              <p className="mb-2">Location: {job.country_iso || 'Remote'}</p>
              <p className="mb-2">Applications: {job.applications}</p>
              <p className="mb-2">Views: {job.views}</p>
              <Link
                href={job.apply_url}
                className="text-blue-500 hover:underline"
              >
                Apply Here
              </Link>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};
export default Page;

Step 6: Visit the page

Finally, you can visit the page by navigating to http://localhost:3000/crackeddevs

Step 7: If any issues, you can check out the code

Visit https://github.com/CrackedDevs/examples