In [Part 1](https://strapi.io/blog/build-a-cron-job-manager-with-strapi5-and-nextjs-part-1), we laid the foundation by extending Strapi 5’s built-in [cron jobs](https://docs.strapi.io/cms/configurations/cron) into a persistent, database-backed, and fully manageable background job system. We created custom content types for cron jobs and their logs, built an execution and error handling mechanism, exposed APIs for triggering jobs, and for viewing their status. With the backend in place, it’s time to build the frontend to manage the Strapi cron jobs. In this part, we’ll focus on building a [Next.js](https://strapi.io/integrations/nextjs-cms) Dashboard that connects to the Strapi APIs we implemented, to control cron jobs. ## Tutorial Roadmap This tutorial is divided into two sections. * [Part 1: Setting up Strapi and Extending Strapi Cron Jobs](https://strapi.io/blog/build-a-cron-job-manager-with-strapi5-and-nextjs-part-1) * **Part 2: Building the Next.js Dashboard for Managing Cron Jobs** ## Tutorial Objectives By the end of this tutorial, you will learn to: * Fetch and display cron jobs and their status in a Next.js application. * View cron job execution history with [pagination](https://docs.strapi.io/cms/api/rest/sort-pagination). * Trigger cron jobs and reschedule them from the UI. * Update cron job settings and toggle their enabled state. * Build a clean, approachable, and maintainable cron job management interface. ## Install Next.js Create a new Next.js app with App Router and [TypeScript](https://docs.strapi.io/dev-docs/typescript) enabled: ```bash npx create-next-app@latest strapi-cron-job-front --use-npm # or --use-yarn ``` ## Create a Next.js API Route For Cron Job List Let's create an API route that fetches cron jobs from Strapi and makes them available to our Next.js app. Create a new file named `./app/api/jobs/route.ts` and add the following: ```typescript // Path: ./app/api/jobs/route.ts import { NextResponse } from "next/server"; export async function GET() { const res = await fetch("http://localhost:1337/api/cron-jobs"); const json = await res.json(); const jobs = json.map((job: any) => ({ ...job, id: job.documentId, isRunning: job.job_logs?.length > 0, })); return NextResponse.json(jobs); } ``` We define a `GET` request handler API route that fetches a list of cron jobs from the Strapi backend `http://localhost:1337/api/cron-jobs`, which then processes the results to make them more usable for the frontend application. For each cron job, it adds an `id`, taken from its `documentId`, and an `isRunning` status that is set to `true` if the job has any associated `job_logs` with status set to `running`. Finally, it returns the transformed list of jobs as a `JSON` response. ## Define Typescript Interfaces for Cron Job and Logs Let's define the type structures for the job and log data we’ll be working with, to give us reliable typing, improved code readability, and helpful autocomplete support. Create a file at: `./app/components/types.ts`, and add the following: ```typescript // Path: ./app/components/types.ts export interface JobSummary { id: string; documentId: string; name: string; displayName: string; description: string; schedule: string; enabled: boolean; isRunning: boolean; runCount: number; lastRunAt: string; nextRunAt: string; } export interface JobDetail extends JobSummary { timeZone?: string; tags?: string[]; options: any; } export interface JobLog { id: string; documentId: string; startedAt: string; endedAt?: string; durationMs: number; message: string; manualTrigger: boolean; jobStatus: string; executionId: string; errorStack?: string; } ``` Each of these interfaces gives structure and clarity to the data used in our frontend app: * `JobSummary`: Describes the basic information we show in job listings, like the cron job name, schedule, status flags, and key timestamps, like lastRunAt and nextRunAt. * `JobDetail`: Extends `JobSummary` to include additional details such as the job time zone, tags, and full configuration options. * `JobLog`: Represents a single job execution record, including when it started and ended, how long it ran, its status, any error message, and whether it was manually triggered. ## List Cron Jobs in Next.js Dashboard ### Create `JobList` Component To display jobs on the Next.js frontend, we’ll create a `JobList` component and hook it into our main page. This component will fetch the job summary data from our Strapi backend, update itself on a timer, and render a card for each job with its key details and status. Create a new file at `./app/components/JobList.tsx` and add the code: ```jsx // Path: ./app/components/JobList.tsx "use client"; import { useEffect, useState } from "react"; import { useRouter } from "next/navigation"; import { JobSummary } from "./types"; async function fetchJobs(): Promise { const res = await fetch("/api/jobs"); if (!res.ok) throw new Error("Failed to fetch jobs"); return res.json(); } export function JobList() { const [jobs, setJobs] = useState([]); const [loading, setLoading] = useState(true); const router = useRouter(); useEffect(() => { let interval: NodeJS.Timeout; async function loadJobs() { try { const jobData = await fetchJobs(); setJobs(jobData); } catch (error) { console.error("Error loading jobs:", error); } finally { setLoading(false); } } loadJobs(); interval = setInterval(loadJobs, 10000); return () => clearInterval(interval); }, []); if (loading) return

Loading jobs...

; return (

{jobs.map((job) => (

{job.displayName}

{job.description}

Name: {job.name}

Schedule: {job.schedule}

Status:{" "} {job.enabled ? "Enabled" : "Disabled"}

Run Count: {job.runCount}

Last Run:{" "} {job.lastRunAt ? new Date(job.lastRunAt).toLocaleString() : "Never"}

Next Run:{" "} {job.nextRunAt ? new Date(job.nextRunAt).toLocaleString() : "Never"}

Running:{" "} {job.isRunning ? "Yes" : "No"}

))}

); } ``` Here is what the code above does: * The `JobList` component fetches cron jobs from the `/api/jobs` endpoint and displays them as cards. * After fetching the cron jobs, it refreshes every 10 seconds, so we always see the latest status, including which jobs are currently running. * Each card shows key details like the job’s name, schedule, run count, next and last run times, and status. We can also click **View Details** to open the job detail page, which we'll add later in this article. ### Add `JobList` Component to the Homepage Next, let's modify the home page `./app/page.tsx` to render the job list with the following code: ```jsx // Path: ./app/page.tsx import { JobList } from "./components/JobList"; export default function JobsPage() { return (

Jobs List

); } ``` Running the application, the job listing page should look like this: ![Job list page.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Job_list_page_74d9d2ae7c.png) ## View and Manage Cron Jobs and Logs In this section, we'll build a fully-functional page that allows us to view job details, manage jobs, enable/disable, reschedule, edit, delete, and review the logs generated for a job. We'll also build a set of reusable components (`JobHeader`, `JobInfo`, `JobActions`, and `JobLogs`) that work together to make jobs manageable and give a quick view of their status and history. We’ll create the following components: * `JobHeader`: A Header component with navigation and a refresh button. * `JobInfo`: An Info component to display details like the job’s name, schedule, status, and statistics. * `JobActions`: An Actions component that provides buttons for running, toggling, editing, rescheduling, and deleting jobs. * `JobLogs`: A Logs component that displays execution history, including status, timestamps, and error messages. A page that brings all of these together. ### Create the `JobHeader` Component Create a new file `./app/components/JobHeader.tsx` and add the following code: ```typescript // Path: ./app/components/JobHeader.tsx import Link from "next/link"; export default function JobHeader({ onRefresh, refreshing, }: { onRefresh: () => void; refreshing: boolean; }) { return ( <>

Job Detail

Back to Jobs

); } ``` The `JobHeader ` component provides an easy way to navigate back to the listing page or refresh the page data. ### Create the `JobInfo` Component Create a new file `./app/components/JobInfo.tsx` and add the following code: ```typescript // Path ./app/components/JobInfo.tsx import { JobDetail } from "./types"; export default function JobInfo({ job }: { job: JobDetail }) { return (

{job?.displayName}

{job.description}

Name: {job.name}

Schedule: {job.schedule}

Time Zone: {job.timeZone}

Tags: {job.tags?.join(", ")}

Status:{" "} {job.enabled ? "Enabled" : "Disabled"}

Running:{" "} {job.isRunning ? "Yes" : "No"}

Run Count: {job.runCount}

Last Run:{" "} {job.lastRunAt ? new Date(job.lastRunAt).toLocaleString() : "Never"}

Next Run:{" "} {job.nextRunAt ? new Date(job.nextRunAt).toLocaleString() : "Not scheduled"}

); } ``` The `JobInfo` component above displays key information about the job, such as name, status, run counts, and scheduling details. ### Create the `JobActions` Component Create a new file `./app/components/JobActions.tsx` and add the following code: ```jsx // Path: ./app/components/JobActions.tsx import { useState } from "react"; import type { JobDetail } from "./types"; type JobActionsProps = { job: JobDetail; onRun: () => void; onToggle: () => void; onDelete: () => void; onReschedule: (newSchedule: string) => void; onEdit: (updates: { displayName?: string; description?: string }) => void; }; export default function JobActions({ job, onRun, onToggle, onDelete, onReschedule, onEdit, }: JobActionsProps) { const [showRescheduleInput, setShowRescheduleInput] = useState(false); const [newSchedule, setNewSchedule] = useState(job?.schedule || ""); const [showEditInput, setShowEditInput] = useState(false); const [newDisplayName, setNewDisplayName] = useState(job?.displayName || ""); const [newDescription, setNewDescription] = useState(job?.description || ""); const handleReschedule = () => { if (newSchedule.trim()) { onReschedule(newSchedule); setNewSchedule(""); setShowRescheduleInput(false); } }; const handleEdit = () => { onEdit({ displayName: newDisplayName.trim(), description: newDescription.trim(), }); setShowEditInput(false); }; return (

{showRescheduleInput && (

setNewSchedule(e.target.value)} placeholder="Enter new CRON schedule" className="border rounded p-2 w-full" />

)} {showEditInput && (

setNewDisplayName(e.target.value)} placeholder="Display name" className="border rounded p-2" /> setNewDescription(e.target.value)} placeholder="Job description" className="border rounded p-2" />

)}

); } ``` The `JobActions` component provides the actual cron job controls: * Triggers a cron job * Toggles its enabled state * Reschedules a cron job * Edits the name and description of a cron job * Deletes a cron job ### Create the `JobLogs` Component Create a new file `./app/components/JobLogs.tsx` and add the following code: ```jsx // Path: ./app/components/JobLogs.tsx import type { JobLog } from "./types"; type Props = { logs: JobLog[]; loading: boolean; page: number; setPage: (page: number) => void; }; export default function JobLogs({ logs, loading, page, setPage }: Props) { return (

Job Logs

{loading ? (

Loading logs...

) : logs.length === 0 ? (

No logs available.

) : (

{logs.map((log) => { const startedAt = new Date(log.startedAt).toLocaleString(); const endedAt = log.endedAt ? new Date(log.endedAt).toLocaleString() : "—"; const statusColor = log.jobStatus === "success" ? "text-green-700 bg-green-100" : log.jobStatus === "failed" ? "text-red-700 bg-red-100" : "text-gray-700 bg-gray-100"; return (

Started: {startedAt}

{log.jobStatus}

Ended: {endedAt}

Duration:{" "} {log.durationMs}ms

{log.message || "No message provided."}

{log.errorStack && (

View Error Stack

                      {log.errorStack}

)}

Triggered: {log.manualTrigger ? "Manually" : "Automatically"}{" "} | Execution ID:{" "} {log.executionId}

); })}

)} {/* Pagination Controls */}

Page {page}

); } ``` The `JobLogs` component displays a list of execution logs for a specific job. It gives us a quick, clean view of when the job started and ended, how long it took, its status, any messages, and error details, if any. It also allows us to move between pages of logs with pagination controls. ## Putting It All Together: The Job Detail Page In this final code section of the article, we’ll combine all the components we’ve built so far, the Header, Info, Actions, and Logs, into a single cohesive page. This dynamic route page `./app/jobs/[id]/page.tsx` is the core of the job manager. It lets us view detailed information about a specific job, manage its status and settings, and track its execution logs. Create a new file: `./app/jobs/[id]/page.tsx`. Here’s the complete page: ```jsx // Path: ./app/jobs/[id]/page.tsx "use client"; import { useEffect, useState } from "react"; import { useParams, useRouter } from "next/navigation"; import JobHeader from "@/app/components/JobHeader"; import JobInfo from "@/app/components/JobInfo"; import JobActions from "@/app/components/JobActions"; import JobLogs from "@/app/components/JobLogs"; import type { JobDetail, JobLog } from "@/app/components/types"; const endpoint = "http://localhost:1337/api"; export default function JobDetailPage() { const { id: jobId } = useParams(); const [job, setJob] = useState(null); const [logs, setLogs] = useState([]); const [page, setPage] = useState(1); const [pageSize] = useState(10); const [loadingJob, setLoadingJob] = useState(true); const [loadingLogs, setLoadingLogs] = useState(true); const [refreshing, setRefreshing] = useState(false); const router = useRouter(); const fetchJob = async () => { setLoadingJob(true); const res = await fetch(`${endpoint}/cron-jobs/${jobId}`); const data = await res.json(); setJob(data); setLoadingJob(false); }; const fetchLogs = async (pg = 1) => { setLoadingLogs(true); const res = await fetch( `${endpoint}/job-logs/by-job?jobId=${jobId}&page=${pg}&pageSize=${pageSize}` ); const data = await res.json(); setLogs(data); setLoadingLogs(false); }; const refreshAll = async () => { setRefreshing(true); await fetchJob(); await fetchLogs(page); setRefreshing(false); }; useEffect(() => { refreshAll(); }, [page]); const handleRun = async () => { const res = await fetch(`${endpoint}/cron-jobs/trigger/${job?.name}`, { method: "POST", headers: { "Content-Type": "application/json", }, }); if (!res.ok) { throw new Error(`Failed to run job: ${res.statusText}`); } const result = await res.json(); // console.log("Job triggered:", result); await refreshAll(); }; const handleReschedule = async (newSchedule: string) => { await fetch(`${endpoint}/cron-jobs/reschedule`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ schedule: newSchedule, name: job?.name }), }); await refreshAll(); }; const handleEdit = async (payload: any) => { await fetch(`${endpoint}/cron-jobs/update`, { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ ...payload, name: job?.name }), }); await refreshAll(); }; const handleToggleEnabled = async () => { await fetch(`${endpoint}/cron-jobs/toggle-enabled/${job?.name}`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ enabled: !job!.enabled }), }); await refreshAll(); }; const handleDelete = async () => { console.log("job", job); const res = await fetch(`${endpoint}/cron-jobs/${job?.documentId}`, { method: "DELETE", headers: { "Content-Type": "application/json" }, }); console.log("res", await res.status); if (res.ok) await router.push("/"); }; return (

{loadingJob ? (

Loading job details...

) : job ? ( <> ) : (

Job not found.

)}

); } ``` When the page loads, it fetches both the job details and its execution logs from the backend. It displays important info like the job’s schedule, whether it’s enabled, and when it last ran. We get buttons to manually run the job, toggle its enabled state, reschedule it, edit its details, or delete it. The logs section shows the history of job runs with pagination controls, so we can browse through past executions and see success or failure details. After performing any action, the page refreshes automatically to keep the information up to date without needing a manual reload. Here's what the final result of the job page is: ![Job detail page.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Job_detail_page_b2b4279e20.png) ## Github Source Code The complete code for this tutorial can be found on GitHub: * [Backend source code on GitHub](https://github.com/emekaemego/strapi-cron-job-back) * [Frontend source code on GitHub](https://github.com/emekaemego/strapi-cron-job-front) ## Conclusion In this article, we built a persistent and fully manageable background job system, combining a Strapi backend with a Next.js frontend for a complete solution. On the backend, we: * Created custom content types to save job definitions and execution logs in the database. * Added utility services and lifecycle hooks to automatically register or clean up jobs when the server starts, ensuring job state stays in sync. * Implemented error logging so failures are tracked with clear messages and stack traces. * Built APIs that let external apps or dashboards trigger, enable/disable, reschedule, or delete jobs. On the frontend, we: * Built a simple, user-friendly dashboard that shows job statuses, schedules, and run history. * Added controls to trigger jobs manually, edit settings, toggle status, reschedule, or delete jobs, all from the UI. * Included pagination, polling, and status indicators for real-time job visibility. Together, this system gives us full control over our background jobs, persistent, and easy to manage.

Backend Development

Bun vs Node.js in 2026: Performance Benchmarks, Features, & Migration Guide

Join our Newsletter