Next.js Discord

Discord Forum

No error when I try to Import Server component into Client component.

Answered
darknight12345 posted this in #help-forum
Open in Discord
Avatar
This is my Navbar.tsx
'use client' import { NavbarBrand } from './Navbar.client' const Navbar = () => { return ( <div className='sticky top-0 z-40 flex w-full items-center justify-between border-y border-borderColor bg-spaceBg px-3 py-2'> <NavbarBrand /> </div> </div> ) }

export default Navbar

And this is my Navbarbar.client.tsx


import { TbQuestionMark, } from 'react-icons/tb' export const NavbarBrand = () => { return ( <div className='mr-4 flex cursor-default items-center space-x-2 rounded border border-borderColor px-3 py-1.5'> <span className='text-neutral-600'> <TbQuestionMark /> </span> </div> ) }

As you know, when we don't put 'use client', next js knows it is server component.
So now I import server component into client component but it gives me no error.
Answered by Alfonsus Ardani
server comps that are imported to client comps are automatically considered as client comps without any error
View full answer

44 Replies

Avatar
server comps that are imported to client comps are automatically considered as client comps without any error
Answer
Avatar
You mean current my navtar.tsx is server component even if I define 'use client'?
Avatar
Navbarbar.client.tsx is a client component even if you don't put 'use client'
Avatar
I've learned it will cause error in next.js doc.
They upgrade it?
Avatar
will it? if you don't use any server function, it will work fine as a client component
Avatar
what do you mean server function?
fetch data?
Avatar
like headers(), awaits, cookies(),
Avatar
Next will automatically understand all components as server component and if we use 'use client',
It will treat it as a client compoent.
is it wrong?
Avatar
yes you are correct
unless server component is imported into a client component, then that former component will be a client component
Avatar
Can you please explain me in detail?
Avatar
Image
this <ExampleServerComponent /> will be regarded as Client components
Avatar
So it's different from the docs?
Or the doc means, it will not cause an error but don't treat exampleservercomponent as server component?
Avatar
well slightly, but thats just based on my experience
you might want to confirm with another, more experienced person haha
yes
Avatar
Ok. Can you please help me just one more thing?
This is navbar.client.tsx
'use client'

export const NavbarPages = () => {
  const pathname = usePathname()

  return (
    <ul className='flex items-center space-x-4 text-lg text-neutral-500'>
      {pages.map((page) => {
        const active = pathname === page.href

        return (
          <li
            key={page.href}
            className={classNames('rounded p-1.5 transition-colors', {
              'bg-sky-500 text-sky-200 hover:bg-sky-400':
                active,
              'text-neutral-600 hover:bg-sky-700':
                !active,
            })}
          >
            <Link href={page.href}>
              { active ? page.selectedIcon : page.icon}
            </Link>
          </li>
        )
      })}
    </ul>
  )
}

export const NavbarUser = () => {
  const { zero, user, dispatch } = useZero()

  const handleSignout = useCallback(() => {
    dispatch({
      category: 'AUTH',
      type: 'LOGOUT_START',
    })
  }, [user])

  if (!zero.auth?.access_token) {
    return (
      <AuthModal>
        <span className='flex cursor-pointer items-center space-x-2 rounded transition-colors hover:text-neutral-300'>
          <TbLogin />
          <span className='text-sm'>Login</span>
        </span>
      </AuthModal>
    )
  }
}


As you can see, in one tsx file, I defined two components.
One is used hook and one is not.
So for navbarpages component, it would be good if we import it as a server component.
When we import navbarpages in other component, will it be considered as a server component even if we use 'use client' in tsx file?
Avatar
can you learn to use codeblocks as it makes it easier to read xD
Avatar
How can I use that?
Avatar
```js
paste code here
```
Avatar
I did. Cool.
Avatar
you cant import navbarpages as server components
Avatar
what do I have to do if I want to import navbarpages as server component?
Do I have to make that in another file?
Avatar
you have to remove hooks and callbacks
Avatar
If I do like that, navbaruser compoent will not be working.
Avatar
then import navbarpages as client components
Avatar
how about if I create that in another file?
Avatar
yes you could that
probably i should tell you that "use client" will affect all components inside that file haha
Avatar
Oh I see...
Avatar
i thought thats 2 separate file already
Avatar
How do you do in this situation?
Avatar
create another file...
one for server/ssr another for client
Avatar
in navbar.tsx
If I create navbar.server.tsx, navbar.client.tsx
And if we define server components in server.tsx and define client components in client.tsx,
do you think it is well structured?
Avatar
i dont think it matters what i think
i think what matters is if it does the job and if it works well for you
Avatar
Okay. Thanks.
Thanks for your help.