Next.js 15 App Router: 3 Production Architecture Patterns for AI Apps

import { createGroq } from "@ai-sdk/groq";
import { convertToModelMessages, streamText, type UIMessage } from "ai";

const groq = createGroq({ apiKey: process.env.GROQ_API_KEY });

export async function POST(req: Request) {
  const { messages }: { messages: UIMessage[] } = await req.json();

  const result = streamText({
    model: groq(process.env.GROQ_MODEL ?? "openai/gpt-oss-120b"),
    system: "You are an expert full-stack systems engineering assistant.",
    messages: await convertToModelMessages(messages),
  });

  return result.toUIMessageStreamResponse();
}

"use client";

import { useChat } from "@ai-sdk/react";
import { DefaultChatTransport } from "ai";
import { type FormEvent } from "react";

export default function AssistantPage() {
  const { messages, sendMessage, status } = useChat({
    transport: new DefaultChatTransport({ api: "/api/chat" }),
  });

  const busy = status === "submitted" || status === "streaming";
  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const text = String(new FormData(e.currentTarget).get("message") ?? "").trim();
    if (text) void sendMessage({ text });
  };

  return (
    <div>
      {messages.map((message) => (
        <p key={message.id}>
          {message.role}: {message.parts.map((part) => (part.type === "text" ? part.text : "")).join("")}
        </p>
      ))}
      <form onSubmit={onSubmit}>
        <input name="message" /> <button type="submit" disabled={busy}>Send</button>
      </form>
    </div>
  );
}

"use server";

import { revalidatePath } from "next/cache";
import { z } from "zod";

const briefSchema = z.object({
  email: z.string().email(),
  message: z.string().min(20).max(2000),
});

export type BriefState = {
  ok: boolean;
  errors?: Record<string, string[] | undefined>;
};

async function saveBrief(_data: z.infer<typeof briefSchema>) {
  // Replace with your database or email call.
}

export async function submitBrief(
  _previous: BriefState,
  formData: FormData
): Promise<BriefState> {
  const parsed = briefSchema.safeParse({
    email: formData.get("email"),
    message: formData.get("message"),
  });

  if (!parsed.success) {
    return { ok: false, errors: parsed.error.flatten().fieldErrors };
  }

  await saveBrief(parsed.data);
  revalidatePath("/contact");
  return { ok: true };
}

"use client";

import { useActionState } from "react";
import { submitBrief, type BriefState } from "./actions";

const initialState: BriefState = { ok: false };

export function BriefForm() {
  const [state, formAction, pending] = useActionState(submitBrief, initialState);

  return (
    <form action={formAction}>
      <label>
        Email
        <input name="email" type="email" required />
      </label>
      {state.errors?.email?.map((error) => (
        <p key={error} role="alert">
          {error}
        </p>
      ))}

      <label>
        Brief
        <textarea name="message" minLength={20} maxLength={2000} required />
      </label>
      {state.errors?.message?.map((error) => (
        <p key={error} role="alert">
          {error}
        </p>
      ))}

      <button type="submit" disabled={pending}>
        {pending ? "Sending..." : "Send brief"}
      </button>
    </form>
  );
}

interface PageProps {
  params: Promise<{ slug: string }>;
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}

export default async function BlogPostPage({ params }: PageProps) {
  // In Next.js 15, params and searchParams are Promises
  const { slug } = await params;
  const post = getPostBySlug(slug);
  if (!post) notFound();
  return <article>{/* Render Post */}</article>;
}