Next.js for monitoring dashboards

When Next.js App Router and React Server Components fit environmental monitoring UIs versus ProbeHarbor’s Astro edge stack.

Home desk with laptop, external monitor, and keyboard in a living space
Household members check the same dashboard from wherever they already work. Photo: David Wellbeloved / Flickr. CC BY 2.0

Next.js excels at authenticated dashboards with React Server Components, API routes, and a vast component ecosystem. A garage monitor could be built entirely in Next: fetching probes in server components and charting in client charts.

Typical Next layout

  • app/dashboard/page.tsx server-fetches JSON feeds with cached revalidation.
  • Route handlers proxy probes to hide LAN URLs: similar to FastAPI relay.
  • Middleware guards signed-in pages using Supabase auth patterns.

Why this project uses Astro

Documentation-heavy about pages and minimal JS for public visitors fit Astro’s content-first model. Edge deployment on Cloudflare is first-class: Workers deployment.

Further comparison

See comparing full-stack options and Express API patterns.

FAQ

Why is ProbeHarbor not built on Next.js?
Astro on Cloudflare Workers fits edge SSR and light islands for this product. Next.js App Router is a strong alternative for auth-heavy React dashboards — see the comparison notes on this page.

Can I still use ProbeHarbor with a Next.js site?
Yes as a customer: probes POST to ProbeHarbor ingest regardless of your other apps. ProbeHarbor remains the hosted alerts and history layer.