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:


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(
      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.


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:


'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(() => {
      .then((response) => response.json())
      .then((data) => {
      .catch((error) => {
        console.error('Error fetching data: ', error);
  }, []);

  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) => (
              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 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>
                className="text-blue-500 hover:underline"
                Apply Here
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

Was this page helpful?