Next.js Architecture for AI Dashboards: SWR, Streaming, and Auth

An AI dashboard is a different animal from a CRUD app. Data changes underneath the user constantly — sync workers land new records every few minutes, agents finish jobs, chat responses stream in token by token. The frontend's job is to make a system that's perpetually in motion feel stable. We build these on Next.js with an Express backend on Railway; here are the patterns that stuck.

Frontend Renders, Backend Thinks

Our first architectural call: Next.js does no AI work. All LLM calls, retrieval, and orchestration live in the Express backend. Next.js API routes exist only as a thin proxy layer that attaches auth and forwards. Serverless function timeouts and multi-minute agent runs don't mix, and keeping the AI logic in one long-running service means the mobile app and internal scripts hit the same brain. The frontend's only jobs: fetch, render, stream.

Polling Tiers with SWR

Real-time-everything is a trap. WebSockets for every widget means connection management, reconnect logic, and server fan-out for data that changes hourly. We tier refresh rates by how fast each dataset actually moves and let SWR do the work:

SWR's cache-then-revalidate model gives instant paints on navigation, deduped requests across components, and free refetch-on-focus. We shipped a year of product on polling before any WebSocket work — and when we finally add sockets, it'll be for chat only, because that's the one tier where 5 seconds is perceptible.

Match your polling interval to your sync cadence. Refreshing the UI every second against data that updates every 10 minutes is pure waste.

Streaming Is a UX Requirement, Not a Nicety

Agent responses take 5–30 seconds. Unstreamed, that's a dead spinner and users assume a hang. We stream over SSE from Express through the proxy route and render three distinct phases: status ("searching 9 sources…", "found 12 documents"), then tokens, then structured extras (citations, action proposals) as a final JSON frame. The status phase is the underrated one — perceived latency drops enormously when the user can see the agent working. Two hard-won details: buffer token flushes to ~30ms intervals so React isn't re-rendering per token, and persist partial output server-side so a refresh mid-stream doesn't lose the answer.

Auth: Supabase Session, Bearer Everywhere

Auth is Supabase magic links. The client holds the session; every request to the backend carries the JWT as a Bearer token; Express verifies it and derives permissions server-side. Next.js middleware handles route gating for pages, but the data security lives entirely in the backend — including inside retrieval queries, so the agent can never surface a document the user couldn't open directly. Never let the frontend pass "which user am I" as a parameter; derive it from the token, always.

Small Things That Paid Off

• URL as state — ?channel=, ?thread=, filter params. Deep-linking into an AI dashboard is how teams actually share findings.
• Optimistic sends with reconciliation — chat messages append locally with a client ID, then reconcile against the server record. Kills the "my message disappeared" class of bugs.
• Skeletons over spinners — with tiered polling, layout-stable skeletons make constant revalidation invisible.
• A single typed API client — one fetcher that attaches the token, parses errors, and types responses. Every SWR hook goes through it.

None of this is exotic. That's the point — the AI complexity lives in the backend, and the dashboard wins by being boring, fast, and honest about what's loading. Spend your novelty budget on the agent, not the frontend architecture.