Next.js App Router in Production: Lessons From Shipping Real Apps

I've used the App Router on production apps, including AI products at dmclounge.ai and this portfolio. These are the lessons I'd hand to any team starting out.

1. Push "use client" down, not up

"use client" marks a boundary: everything imported below it ships to the browser. Put it on the smallest interactive leaf, not the page.

// page.tsx: server component
import { getProject } from "@/lib/data";
import { LikeButton } from "./like-button"; // "use client" lives here

export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const project = await getProject(id);
  return (
    <article>
      <h1>{project.title}</h1>
      <p>{project.description}</p>
      <LikeButton projectId={project.id} />
    </article>
  );
}

2. Fetch on the server, close to where data is used

Fetch in the server component that needs the data. Parallelise independent requests:

const [user, projects] = await Promise.all([getUser(), getProjects()]);

Avoid client-side waterfalls for data you could have fetched on the server.

3. Understand caching before you ship

Caching defaults changed across Next.js versions, and that's been the single biggest source of "why is this stale?" bugs on teams I've worked with. Read Next.js Caching in 2027 and decide your strategy explicitly for each route.

4. Put auth checks in the data layer

Middleware is useful for redirects, but don't rely on it as your only auth check. Verify the session where data is read or mutated, i.e. in server functions and route handlers.

5. Use loading and error boundaries

loading.tsx and error.tsx per route segment make slow and failing data visible instead of blank. Streaming with Suspense lets fast parts render first.

6. Watch your client bundle

• Check the build output for large client chunks.
• Dynamically import heavy client-only libraries (maps, editors, charts).
• Keep secrets and server-only code out of client imports with the server-only package.

7. Migrate incrementally

pages/ and app/ can coexist. Migrate route by route, starting with simple, high-traffic pages.

Related

• 10 Next.js Performance Optimization Tips
• Building AI Chat Interfaces in React
• Type-Safe API Contracts Between NestJS and Next.js