I’m encountering a build failure when deploying my project on Vercel. The deployment log indicates that I’m importing next/headers in a file located in the lib/ directory, which is used in a page under the pages/ directory. This causes the following error:
Error: You're importing a component that needs "next/headers". That only works in a Server Component which is not supported in the pages/ directory.
./lib/supabase/server.ts
import { cookies } from "next/headers"
Project details:
• Repo: GitHub - nicholas357/E-commerce-fullstack-2.0
• Framework: Next.js 15.2.4
• Package involved: @supabase/ssr for server-side Supabase client
• I’m using pnpm@10.x
• Deployment just doesn’t work.
I understand that next/headers is only compatible with the App Router, and I’m currently using the Pages Router.
Could you please guide me on:
1. The best practice to implement server-side Supabase authentication in this context?
2. Whether there’s a workaround (e.g. dynamic import or API route) that would be compatible with the pages/ directory?
3. If migrating to the App Router is required, what’s the minimal set of changes to fix this?
Did you know about these other v0 resources? A human should be here soon to help, but the answer may already be available even faster in one of these other posts.
This guide is a great place to start.
And these recordings can give you a look at v0 features and strategies in action: Topics tagged v0