Next.js Discord

Discord Forum

Isn't components set to server component by default?

Answered
Havana posted this in #help-forum
Open in Discord
HavanaOP
I have a problem where the app giving me a run time error that says:
Failed to compile
./src/components/ToDos/ToDosSection.tsx
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. Read more: https://nextjs.org/docs/getting-started/
  │ react-essentials#server-components
  │ 
  │ 
   ╭─[/Users/omarafet/Desktop/Personal/VSCode/Github/supabase-test-0/src/components/ToDos/ToDosSection.tsx:1:1]
 1 │ import { createClient } from "@/utils/supabase/server";
 2 │ import { cookies } from "next/headers";
   · ───────────────────────────────────────
 3 │ 
 4 │ export default async function Notes() {
 5 │     const cookieStore = cookies();
   ╰────
This error occurred during the build process and can only be dismissed by fixing the error.

it requires me to set the ToDos component to server component.

code
import { createClient } from "@/utils/supabase/server";
import { cookies } from "next/headers";

export default async function ToDosSection() {
    const cookieStore = cookies();
    const supabase = createClient(cookieStore);
    const { data: todos } = await supabase.from("todos").select();

    return <pre>{JSON.stringify(todos, null, 2)}</pre>;
}
Answered by Arinji
and make anything which requires the "use client" its own function in a different page with the "use client" on the top, and call those inside the page component
View full answer

33 Replies

Arinji
cookies() is the issue
a component is default to be server rendered, yes. But cookies() can only be used in pages or server actions
if it isnt inside a page.tsx, you need to add the "use server" to the top of the page
@Havana ^^
HavanaOP
ooh
I did
that's weird because that's from the supabase docs
but.. now the page is white screen with the "use server"; at the top of the file
with this error in the console:
⨯ Internal error: Error: Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead.
Arinji
well yes, you wouldnt do that in a server action, where are you calling this code from?
HavanaOP
from here src/app/todos/page.tsx
export default function ToDos() {
    // ...

  return (
    <div className="grid grid-cols-[300px_min-content_1fr] gap-8">
      // Form Card
      <Separator orientation="vertical" />
      <ToDosSection />
    </div>
  );
}
Arinji
supported in the pages/ directory

are you incrementally adopting nextjs app router?
HavanaOP
I don't get it
@Havana I don't get it
Arinji
are you using the pages and the app directory together?
@Arinji are you using the pages and the app directory together?
HavanaOP
nope, I have never used the pages router
@Arinji change this to export default async function Page()
HavanaOP
didn't work
Arinji
are you calling ToDosSection in the return statement?
HavanaOP
yea
Arinji
can you show your updated page code
HavanaOP
which one? the ToDos or the ToDosSection?
HavanaOP
## src/app/todos/page.tsx
@Havana ## `src/app/todos/page.tsx`
Arinji
Are you sure this is the correct code, if so its wrong.
You made your page client by the "use client" and you cant access cookies() in a client component
HavanaOP
They're in separated files, this page is client and the ToDosSection is a server component
@Havana They're in separated files, this page is client and the `ToDosSection` is a server component
Arinji
thats not how it works, the children of a client component, becomes client components
you making the page a client component, makes anything else being called inside it, also client
Arinji
and make anything which requires the "use client" its own function in a different page with the "use client" on the top, and call those inside the page component
Answer
HavanaOP
Yea that's what I was thinking
It works, Thanks