Build a job board with Next.js

# .env.local — server-side only. Never prefix with NEXT_PUBLIC_:
# that would inline the key into the client bundle and leak it.
JLA_API_KEY=jla_live_your_key_here

// lib/jobs.ts — the only place that talks to the API.
// The key is read on the server; it never reaches the browser.

const API_BASE = "https://api.joblistingsapi.com/v1";

export type Job = {
  id: number;
  title: string;
  company: string;
  location: { raw: string; city: string | null; country_code: string | null };
  is_remote: boolean;
  role_category: string | null;
  seniority: string | null;
  listed_at: string | null;
  description_html: string | null;
  url: string;
  source: string;
};

type JobsResponse = { jobs: Job[]; next_cursor: string | null; total?: number };

function apiKey(): string {
  const key = process.env.JLA_API_KEY;
  if (!key) throw new Error("JLA_API_KEY is not set");
  return key;
}

// One typed fetch. revalidate: 1800 lets Next cache the response for 30 minutes
// — the same cadence the dataset refreshes on, so you never serve staler data
// than the source has, and you never hammer the API on every request.
async function getJobs(params: Record<string, string>): Promise<JobsResponse> {
  const qs = new URLSearchParams(params).toString();
  const res = await fetch(`${API_BASE}/jobs?${qs}`, {
    headers: { "X-API-Key": apiKey() },
    next: { revalidate: 1800 },
  });
  if (!res.ok) {
    throw new Error(`API ${res.status}: ${await res.text()}`);
  }
  return res.json();
}

// Our board: senior-ish engineering roles in the UK.
//
// role_category is a normalized-taxonomy filter and needs Growth or higher.
// On the free tier, drop role_category and use ?title=engineer instead — a
// case-insensitive substring match on the title, available on every plan. It is
// coarser (it will not catch "Backend Developer"), but it costs nothing.
export async function listJobs(): Promise<Job[]> {
  const { jobs } = await getJobs({
    role_category: "engineering", // free tier: replace with title: "engineer"
    country: "GB",
    limit: "50",
  });
  return jobs;
}

// One job by id, for the detail page.
export async function getJob(id: string): Promise<Job | null> {
  const res = await fetch(`${API_BASE}/jobs/${id}`, {
    headers: { "X-API-Key": apiKey() },
    next: { revalidate: 1800 },
  });
  if (res.status === 404) return null;
  if (!res.ok) throw new Error(`API ${res.status}: ${await res.text()}`);
  return res.json();
}

// app/jobs/page.tsx — the board. A server component, so the API call and the
// key stay on the server; the browser only receives rendered HTML.
import Link from "next/link";
import { listJobs } from "@/lib/jobs";

export const metadata = { title: "Engineering jobs" };

export default async function JobsPage() {
  const jobs = await listJobs();

  return (
    <main style={{ maxWidth: 720, margin: "0 auto", padding: "2rem 1rem" }}>
      <h1>Engineering jobs in the UK</h1>
      <p>{jobs.length} open roles, refreshed every 30 minutes.</p>

      <ul style={{ listStyle: "none", padding: 0 }}>
        {jobs.map((job) => (
          <li
            key={job.id}
            style={{ borderBottom: "1px solid #eee", padding: "1rem 0" }}
          >
            <Link href={`/jobs/${job.id}`} style={{ fontWeight: 600 }}>
              {job.title}
            </Link>
            <div style={{ color: "#555" }}>
              {job.company} · {job.is_remote ? "Remote" : job.location.raw}
            </div>
            {job.listed_at && (
              <div style={{ color: "#999", fontSize: 13 }}>
                Posted {new Date(job.listed_at).toLocaleDateString()}
              </div>
            )}
          </li>
        ))}
      </ul>
    </main>
  );
}

// app/jobs/[id]/page.tsx — one posting, with the full description.
// npm install sanitize-html  (and @types/sanitize-html)
import { notFound } from "next/navigation";
import sanitize from "sanitize-html";
import { getJob } from "@/lib/jobs";

export default async function JobDetail({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const job = await getJob(id);
  if (!job) notFound();

  return (
    <main style={{ maxWidth: 720, margin: "0 auto", padding: "2rem 1rem" }}>
      <h1>{job.title}</h1>
      <p style={{ color: "#555" }}>
        {job.company} · {job.is_remote ? "Remote" : job.location.raw}
      </p>

      {/* description_html arrives as published by the employer's ATS. Treat it
          as untrusted input: run it through a sanitizer (DOMPurify,
          sanitize-html) before rendering. */}
      {job.description_html && (
        <div
          dangerouslySetInnerHTML={{ __html: sanitize(job.description_html) }}
        />
      )}

      {/* The apply path: link out to the original posting on the source ATS.
          rel="nofollow" keeps your board from passing link equity to every
          employer, and noopener is the safe default for target=_blank. */}
      <a
        href={job.url}
        rel="nofollow noopener"
        target="_blank"
        style={{ display: "inline-block", marginTop: "1.5rem", fontWeight: 600 }}
      >
        Apply on {job.company}&rsquo;s site →
      </a>
    </main>
  );
}

// app/api/refresh/route.ts — optional. ISR already revalidates on a timer,
// but a cron hit lets you pull deltas and warm specific pages on your schedule.
import { NextResponse } from "next/server";

const API_BASE = "https://api.joblistingsapi.com/v1";

export async function GET(request: Request) {
  // Protect the route so only your scheduler can call it.
  const auth = request.headers.get("authorization");
  if (auth !== `Bearer ${process.env.CRON_SECRET}`) {
    return NextResponse.json({ error: "unauthorized" }, { status: 401 });
  }

  // Ask only for what changed since an hour ago — updated_since is on every
  // plan, so delta sync costs you nothing extra.
  const since = new Date(Date.now() - 60 * 60 * 1000).toISOString();
  const res = await fetch(
    `${API_BASE}/jobs?updated_since=${since}&limit=100`,
    { headers: { "X-API-Key": process.env.JLA_API_KEY! }, cache: "no-store" },
  );
  const { jobs } = await res.json();

  // Persist or re-index the changed jobs here, then report how many moved.
  return NextResponse.json({ changed: jobs.length });
}