Next.js App Router Best Practices

Chapter 1 · Practice 3 of 5

Pass only the fields a Client Component needs

From Server and Client Components

Why it matters

Props are the easiest place to leak data by accident. Everything you pass from a Server Component to a Client Component is serialized into the page and visible in the browser. Passing a whole database record can leak emails, password hashes or internal flags even if the component never displays them.

  1. Shape the data on the server into a small object with only the fields the UI uses.
  2. Type the Client Component props narrowly, not as your database model.
  3. Do this in one place: the Next.js data security guide recommends a Data Access Layer that returns minimal Data Transfer Objects, so every page gets the rule for free.
tsx
// Instead of <Profile user={userRow} />
<Profile user={{ name: userRow.name, avatarUrl: userRow.avatarUrl }} />

Do

  • Return plain objects with named fields from your data functions
  • Type Client Component props narrowly, not as your full database model

Avoid

  • <Profile user={userRow} /> with the raw database row