server-only ▲ Next.js

Next.js: You're importing a component that needs "server-only". That only works in a Server Component

A Client Component (or a file it imports) pulls in server-only code — database clients, secrets, next/headers or a module marked import "server-only".

Seen on: Next.js

Meaning

Everything imported by a "use client" file is bundled for the browser. Server code must stay in Server Components, route handlers or server actions, and pass data down as props.

Common causes

  • "use client" component importing a db/util module
  • Shared barrel file (index.ts) mixing server and client exports
  • Using next/headers or cookies in a client component

⚡ Quick fix

  1. Fetch data in a Server Component and pass props
  2. Move server logic into a server action
  3. Split barrel files into client-safe and server-only modules

Detailed fix by platform

TypeScript

  1. tsx
    // lib/db.ts
import "server-only";
// app/page.tsx (Server Component)
const posts = await getPosts();
return <PostList posts={posts} />;   // PostList can be "use client"

How to diagnose

  1. Import chain — Shown in the error trace
  2. Barrels — Mixed exports?

🔧 Still not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.