You mean current my navtar.tsx is server component even if I define 'use client'?

Navbarbar.client.tsx is a client component even if you don't put 'use client'

I've learned it will cause error in next.js doc.

They upgrade it?

will it? if you don't use any server function, it will work fine as a client component

what do you mean server function?

fetch data?

like headers(), awaits, cookies(),

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?

yes you are correct

unless server component is imported into a client component, then that former component will be a client component

Can you please explain me in detail?

this <ExampleServerComponent /> will be regarded as Client components

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?

well slightly, but thats just based on my experience

you might want to confirm with another, more experienced person haha

yes

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?

can you learn to use codeblocks as it makes it easier to read xD

How can I use that?

```js
paste code here
```

I did. Cool.

you cant import navbarpages as server components

what do I have to do if I want to import navbarpages as server component?
Do I have to make that in another file?

you have to remove hooks and callbacks

If I do like that, navbaruser compoent will not be working.

then import navbarpages as client components

how about if I create that in another file?

yes you could that

probably i should tell you that "use client" will affect all components inside that file haha

Oh I see...

i thought thats 2 separate file already

How do you do in this situation?

create another file...

one for server/ssr another for client

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?

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

Okay. Thanks.

Thanks for your help.