Next.js App Router Patterns We Use in Production

The Next.js App Router introduced a new mental model for building React apps. Here are the patterns we use in every project.

Parallel Routes

Use parallel routes for modals that need their own URL:

app/
  @modal/
    (.)photo/[id]/
      page.tsx
  layout.tsx

Streaming with Suspense

<Suspense fallback={<Skeleton />}>
  <SlowComponent />
</Suspense>

Server Actions

'use server'

export async function createPost(data: FormData) {
  await db.insert(posts).values({ title: data.get('title') })
  revalidatePath('/blog')
}

These patterns have dramatically improved our codebase quality.