Next.js Discord

Discord Forum

Cannot import header from next/header in pages/. even if i am using an app router and there page DIR

Unanswered
American black bear posted this in #help-forum
Open in Discord
American black bearOP
This header component is outside of the app directory. This component is used by some page inside of the app directory where the I have the file path such as the following.

src/app/(static)/introduction/page.jsx ---> The file rendering header
src/components/homecomponents/header.jsx ---> file being imported

NOTE: I intend to keep header as a server component.

All i am trying is to get the pathname inside a server component in order to highlight the currently open page name on header .

I am using app router only as far as i know, i do not know why this happens

18 Replies

Anay-208 | Ping in replies
The file you're importing into, make that a server component
@Anay-208 | Ping in replies The file you're importing into, make that a server component
American black bearOP
That is also a server component. Did not use 'use client' declarative
It will Be Client Component
Then U Use PathName There
Also What Is the Problem Making The Header A Client COmpo
You Can Always Pass User Data To It
@Jack Russell Terrier Make The Links Another COmponent
American black bearOP
The Problem is, client components takes time to load, it will look very weird to the user if ih comes on page and links are missing from the static page for fraction of second
@American black bear That is also a server component. Did not use 'use client' declarative
Anay-208 | Ping in replies
one of its parent component is a client component maybe
@Jack Russell Terrier Really?
American black bearOP
Yeah, my actual problem is. Why the heck is it showing that the file must be in a pages/ directory. neither my stucture is like that, nor my folderstructure
@Anay-208 | Ping in replies one of its parent component is a client component maybe
American black bearOP
checked again,
All of the parents are server
Jack Russell Terrier
Why Do You Want Cookies
Just Do The Cookies SomeWhere Else
Pass it
@Jack Russell Terrier Why Do You Want Cookies
American black bearOP
thanks guys i think i got the core of the problem
Problem is fixed
this is the actual thing i guess, so i am doing accessing headers from somewhere inside the app dir and then passing it to the component which is outide the app dir