The Payload admin dashboard is now fully customizable using a widget system. Developers can add, remove, and arrange components on the dashboard — data visualizations, quick-action panels, custom summaries, whatever the project needs. Each widget is a standard React component, making this straightforward to build and maintain.

1// payload.config.ts
2export default buildConfig({
admin: {
  dashboard: {
    widgets: [
      {
        slug: "recent-orders",
        Component: "@/components/widgets/RecentOrdersWidget",
        label: "Recent Orders",
        minWidth: "medium",
        maxWidth: "full",
      },
      {
        slug: "revenue-chart",
        Component: "@/components/widgets/RevenueChartWidget",
        label: "Revenue (30 days)",
        minWidth: "large",
        maxWidth: "full",
      },
    ],
    defaultLayout: [
      { widgetSlug: "revenue-chart", width: "full" },
      { widgetSlug: "recent-orders", width: "large" },
    ],
  },
},
27});

1// components/widgets/RecentOrdersWidget.tsx
2"use client";
3
4export default function RecentOrdersWidget() {
5  return (
6    <div>
7      <h3>Recent Orders</h3>
8      {/* your widget UI */}
9    </div>
10  );
11}

Job queue concurrency controls — v3.71

You can now configure how many jobs run simultaneously and define "supersedes" relationships between tasks — ensuring a newer job cancels an older pending one of the same type. This is especially useful for user-triggered workflows where only the most recent request should execute.

1// payload.config.ts
2export default buildConfig({
jobs: {
  enableConcurrencyControl: true,
  workflows: [
    {
      slug: "exportUserData",
      concurrency: {
        // One active export per user at a time
        key: ({ input }) => `export-${input.userId}`,
        // New export request supersedes any queued ones
        supersedes: true,
      },
      handler: async ({ job, tasks }) => {
        await tasks.buildExport({ input: { userId: job.input.userId } });
      },
    },
  ],
},
20});

Next.js 16 support — v3.73

Payload is now fully compatible with Next.js 16, including support for the latest routing and rendering changes. You can upgrade your Next.js version without waiting on Payload to catch up.

beforeNav and afterNav component slots — v3.75

Two new component slots have been added to the admin layout: one before the navigation sidebar and one after. This gives developers a clean, supported way to inject custom UI into the admin — environment indicators, announcements, custom navigation items, or anything else that belongs in the shell.

1// payload.config.ts
2export default buildConfig({
admin: {
  components: {
    beforeNav: ["@/components/admin/EnvironmentBadge"],
    afterNav: ["@/components/admin/SupportLink"],
  },
},
9});
10// components/admin/EnvironmentBadge.tsx
11export default function EnvironmentBadge() {
const env = process.env.NEXT_PUBLIC_ENV ?? "development";
13
return (
  <div
    style={{
      padding: "8px 16px",
      background: env === "production" ? "#ff4444" : "#44aa44",
    }}
  >
    {env.toUpperCase()}
  </div>
);
24}

See what others are building with Payload.

"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."

Get the resources you need to start building today

Microsoft chose Payload to tell the world about AI.

New in Payload: Dashboards, Developer Control, and Next.js 16

v3.66 through v3.75 introduced one of Payload's most-requested admin features — a fully customizable dashboard — alongside meaningful controls for background jobs, Next.js 16 compatibility, and new extension points in the admin UI.

Modular dashboards— v3.69

Job queue concurrency controls — v3.71

Next.js 16 support — v3.73

beforeNav and afterNav component slots — v3.75

Related Posts

New in Payload: Jobs, Content Modeling, and Lexical Improvements