Combine Next.js with CleanJobData to build a fast, SEO-optimized job board.
Fetch job listings in a Next.js server component.
const res = await fetch('https://api.cleanjobdata.com/jobs', {
headers: { 'X-API-Key': process.env.CLEANJOBDATA_API_KEY }
});
const { data: jobs } = await res.json();Add ISR with hourly revalidation for fast page loads with fresh data.
export const revalidate = 3600;Generate unique title and description for every page.
export async function generateMetadata() {
return { title: 'Software Engineer Jobs | My Board', description: '...' };
}Yes. Call the API directly from a Server Component or Route Handler so your key never reaches the client: `const res = await fetch('https://api.cleanjobdata.com/jobs?title=engineer&remote=true', { headers: { 'X-API-Key': process.env.CLEANJOBDATA_API_KEY }, next: { revalidate: 3600 } })`. Pages Router works the same way from getServerSideProps or an API route — the API is plain REST, so nothing here is App Router-specific.
Yes, and it's the standard pattern for a job board built on this API. Set `revalidate` on the fetch call (or `export const revalidate = 3600` on the route segment) to control how stale a page can get. An hour matches how often most listings actually change; drop it to a few hundred seconds for pages that need near-live data, and watch the `X-RateLimit-Remaining` response header if you tighten it further.