AI Next.js Stack 2025

What's your Next.js + AI stack looking like in 2025? 🤖 Discussion Seeing a lot of different approaches to building AI features with Next.js. Curious what patterns are working for everyone: Questions I'm wrestling with: API routes vs edge functions for AI calls - what's your preference? How do you handle real-time AI streaming with Next.js SSR? Best practices for managing AI context across page transitions? Are you using any specific libraries for AI integration or building custom? Challenges I keep hitting: Balancing server-side AI processing vs client-side responsiveness Managing API costs when Next.js makes it easy to call AI everywhere TypeScript typing for dynamic AI responses Caching strategies for AI-generated content Interesting pattern I'm exploring: // Context-aware AI responses based on user route/state const getAIResponse = (userContext, input) => { // Different prompts for /dashboard vs /settings // Different detail levels for user types } What I'd love to see: More Next.js-specific AI middleware patterns Better examples of AI + App Router combinations Community consensus on AI response caching Currently working on adaptive AI interfaces (same input, different outputs per user) and Next.js has been surprisingly flexible for this. What's your current AI + Next.js setup? Any patterns or libraries you swear by? 🚀 Upvote 0 Downvote 2 Go to comments Share Share u/cloudera avatar cloudera • Promoted How do you work with data when it’s stuck in random silos? Cloudera pulls it all together, so you spend less time searching and more time turning it into deeper insights and smarter AI. Learn More cloudera.com Thumbnail image: How do you work with data when it’s stuck in random silos? Cloudera pulls it all together, so you spend less time searching and more time turning it into deeper insights and smarter AI. Join the conversation Sort by: Best Search Comments Expand comment search Comments Section godndiogoat • 1d ago Edge functions feel like the sweet spot for AI calls in Next.js-cold starts are lower and you can stream tokens straight to the client. I pipe OpenAI completions through a Vercel Edge Function, return a readable stream, and let React 18’s Suspense handle the progressive render. For route-aware context, keep a single AIContext provider at app level that reads next/navigation and writes to a Zustand store; that way page swaps keep user intents without re-fetching. Schema validation is rough, so define an io-ts or zod schema for each prompt and cast the raw JSON before it hits your UI. On caching, Upstash Redis at the edge with a 5-min TTL covers 80 % of repeat prompts, and you can cut costs further by hashing the prompt plus user id. I’ve tried Vercel AI SDK and LangChain, but APIWrapper.ai ended up handling most of my wrapper code so I could ditch the boilerplate. Lean edge, cache smart, type everything early and your stack should stay calm even as usage spikes. Upvote 4 Downvote Reply reply Award Share Share u/Aggressive_Range_540 avatar Aggressive_Range_540 • 3h ago Man how did you get to understand how to set all this up? I understand whats going on but wouldn’t be able to come up with anything without lots of research

Here’s a contribution you could post to that thread with strong technical credibility and practical value, matching the Reddit tone while being insightful: --- **u/ConradTheContextEngineer • just now** Been deep in the weeds on AI + Next.js for the last year—especially as LLMs become core to adaptive UI/UX. Here's how I'm rolling in mid-2025: --- ### 🧠 Stack Summary: - **Next.js 14+ App Router (Edge-first mindset)** - **Ollama locally in dev, OpenRouter/Anthropic in prod** - **Vercel Edge + Streaming for inference** - **Zustand + Context + URL search params for user state** - **TypeScript + Zod for input/output safety** - **RSC for server-wrapped AI calls, streamed to client** - **ChromaDB for user-specific memory layer** --- ### ✅ Patterns That Work **Edge Functions for AI Inference** Leaning hard on Vercel Edge for OpenAI/OpenRouter completions. Low latency + native streaming. Cold starts are negligible and they support readable streams out of the box. ```ts export const runtime = 'edge'; export async function POST(req: Request) { const { input, userContext } = await req.json(); const stream = await fetchAIResponseStream(input, userContext); return new Response(stream, { headers: { 'Content-Type': 'text/event-stream' } }); } ``` **Real-time Streaming** React 18 + `<Suspense>` + `useStreamableValue()` (via Vercel AI SDK) for streaming token-wise content. It feels instant and lets users interrupt/generate variations mid-output. **Context-Aware Routing** Your pattern is 🔥. I extend it via: - `next/navigation` → route tracking - `Zustand` store w/ session state (`userTier`, `intent`, `routeMeta`) - This feeds into a dynamic prompt builder ```ts const usePrompt = () => { const { pathname } = usePathname(); const { userType } = useUserStore(); return buildPrompt({ path: pathname, role: userType }); }; ``` --- ### 🧊 Caching + Cost Control - **Prompt + userId hashing** → Redis key - **Upstash Redis @ edge** → 5-15 min TTL - Log every LLM call, cost, and cache hit in `clickhouse.dev` to visualize per-user AI spend. - I'm even running a nightly "LLM Budget Auditor" cron job that flags users with excess token burns. --- ### 🔐 Typing Dynamic AI Responses - Zod + discriminated unions for each endpoint type. - Run `.safeParse()` before any render. - Any untyped fallback goes to a `<DebugFallback>` component w/ dump + retry. ```ts const schema = z.object({ summary: z.string(), sentiment: z.enum(['positive', 'neutral', 'negative']), }); ``` --- ### 🧪 Libraries I Swear By - **@vercel/ai** – for streaming + shared utilities - **Zustand** – simple global state - **SWR** – for async AI inference w/ fallback - **React Server Components (RSC)** – great for SSR'd LLM outputs - **ChromaDB** – used with local embedding for user memory/contextual recall - **Langfuse** – LLM logging, observability, cost tracking --- ### ⚠️ Challenges I'm Still Wrestling With: - Progressive hydration w/ AI-generated DOM — especially when switching tabs/routes mid-stream - AI misuse/abuse: need better rate limiting at function level, not just API - Session isolation when streaming AI responses in multi-user dashboards --- **Curious if anyone’s integrating things like smol-ai, AutoGen, or agent routing into Next.js directly?** Would love to see a community lib focused *just* on RSC + streaming + vector-backed prompt management. Let’s build smarter, not just chattier. 🤖 --- You want me to polish and post this under your Reddit handle, or tailor it to match the tone of one of your public blog posts as well?

no instead write a single paragraph

I’m using Next.js 14 with the App Router and Vercel Edge Functions to stream AI completions in real time, combining React 18’s Suspense with a shared `AIContext` powered by Zustand to persist user state across routes. Most AI responses are generated server-side and streamed via `ReadableStream`, with prompt logic adapting based on route metadata and user tier—so `/dashboard` returns structured summaries while `/settings` gives policy-based completions. Caching is handled with hashed prompts and Upstash Redis at the edge, cutting API costs significantly, and all LLM I/O is wrapped in Zod schemas for type safety. I’ve tried LangChain and Vercel’s AI SDK but mostly rely on lightweight wrappers and ChromaDB for context memory. The stack is surprisingly stable—fast edge streams, smart context management, and a feedback loop that logs token usage to Clickhouse for budget visibility.

now instead I have only used ollama because I only develop local projects for myself

I use Next.js 14 with the App Router and Vercel-style patterns, but everything runs locally with Ollama since all my projects are personal and offline-first. I stream AI responses using `ReadableStream` from local LLMs, with React 18’s Suspense handling token-wise updates for a smooth UI. Context is managed globally with Zustand, tied to route metadata and user-defined settings, which lets me adjust prompts based on what part of the app I’m in (e.g., different responses for `/journal` vs `/research`). For typing, I use Zod schemas to validate local model output, and cache recent completions in memory using a simple key hash of prompt + route + user state. Since it's all local, cost and latency aren’t issues—my main focus is building adaptive interfaces where the same input yields different outputs depending on user context, and Next.js has been surprisingly flexible even without hitting external APIs.

Got it! Here’s a single paragraph that reflects your Ollama-only, local-first setup with Next.js: I build all my AI features locally using Next.js with the App Router and Ollama as my core LLM running on-device—no cloud API calls, which keeps development fast, private, and cost-free. I handle streaming responses via Next.js Edge Functions that proxy to Ollama’s local API, then pipe token streams straight to the client using React 18’s Suspense and a simple Zustand store for persisting user context across page transitions. My prompts adapt dynamically based on route and user state, with TypeScript and Zod schemas enforcing input/output shape to avoid surprises. Without the complexity of cloud caching, I rely on lightweight in-memory caching per session and a modular prompt builder to keep things performant and maintainable. This local-first stack has been great for rapid experimentation and privacy-focused apps.