Type-safe prop passing in Next.js server components
Recently I have relied quite heavily on a Next.js app directory architecture, where data is fetched from a database in the server component and then passed to client for further clientside processing or display.
app/products/[id]/ - page.tsx (server component) - Product.tsx (client component with clientside-enriched visualization)
As nice as this is to move some processing and rendering to serverside and thus achieve more SEO- and slow-connection-friendly HTML output, it doesn’t directly offer any solutions for passing type-safe data to client.
Here I describe the pattern I’ve found simple and straightforward for type-safely passing data to client and separating data fetching and usage concerns.
Data pattern
The pattern involves adding a new data.ts
file, which is responsible for 1. serverside data fetching and 2. providing types for fetched data.
app/products/[id]/ - page.tsx - data.ts (serverside data loading utility and shared type for data result) - Product.tsx
data.ts
import "server-only";import { supaClient } from "@/app/supaClient";export function load(productId: string) { return supaClient() .from("products") .select("name, price") .eq("id", productId);}export type Data = Awaited<ReturnType<typeof load>>;
page.tsx
import { Product } from "./Product";import { load } from "./data";export default async function Page({ params: { id } }) { const data = await load(id); return ( <div className="page-panel"> <p>This page contains visualization for {data.name}</p> <Product id={id} data={data} /> </div> );}
Product.tsx
"use client";import type { Data } from "./data";export function Product({ id, data }: { id: string; data: Data }) { const formattedPrice = new Intl.NumberFormat( undefined, { style: 'currency', currency: 'USD' } ).format(data.price); return ( <section> <h2>{data.name}</h2> <p>price: {formattedPrice}</p> </section> );}
This pattern both simplifies implementation of page.tsx
and makes the app more type-safe with up-to-date and non-duplicated type definitions for page data. Additionally, it works well with Next.js’ own data preload pattern.