"You have a Server Component that imports next/router. Use next/navigation instead" in pages folder
Answered
American black bear posted this in #help-forum
American black bearOP
I'm been developing with the pages router and tried creating a new folder "app" folder under my src directory and adding an endpoint (I want to slowly migrate), but now it seems to think that components in my pages directory are all meant to be server-components, so it's giving me an error. Do I have to add 'use client' to everything, or does someone know why this is happening?
├── src
│ ├── app (new)
│ │  └── api
│  │  └── trpc
│  │  └── [trpc]
│  │  └── route.ts
│  ├── components
│  ├── env.mjs
│  ├── fixtures
│  ├── pages
│  ├── server
│  ├── styles
│  ├── trpc
│  └── utils
├── src
│ ├── app (new)
│ │  └── api
│  │  └── trpc
│  │  └── [trpc]
│  │  └── route.ts
│  ├── components
│  ├── env.mjs
│  ├── fixtures
│  ├── pages
│  ├── server
│  ├── styles
│  ├── trpc
│  └── utils
Answered by American black bear
I just tried installing and upgrading my project packages again and it worked somehow, thanks for answering!
16 Replies
@American black bear I'm been developing with the pages router and tried creating a new folder "app" folder under my src directory and adding an endpoint (I want to slowly migrate), but now it seems to think that components in my pages directory are all meant to be server-components, so it's giving me an error. Do I have to add 'use client' to everything, or does someone know why this is happening?
├── src
│ ├── app (new)
│ │  └── api
│  │  └── trpc
│  │  └── [trpc]
│  │  └── route.ts
│  ├── components
│  ├── env.mjs
│  ├── fixtures
│  ├── pages
│  ├── server
│  ├── styles
│  ├── trpc
│  └── utils
Since Components under Pages router are all "use client" components, yes. But only for now. Your next step would be slowly delegating some prerendered stuff into the server component so that your client-side js would be reduced into what is only needed in the browser.
American black bearOP
@Masai Lion okay, It is quite a bit of files that I have to refactor with 'use client' at the top in my production repo. I tried to create a new project using "create-next-app@latest" with both a "pages" and an "app" folder, and then I did not need 'use client' at the top of "pages" files, it builds just fine.
im just saying that the components in the
in
/pages folder are all already converted to "use client". They are all client componentsin
/app folder, the default in server component. Your step one would be to create a "use client" file and put everything from /pages in that file for nowI did not need 'use client' at the top of "pages" files, it builds just fine.I didnt tell you to add "use client" at the top of "pages" files
American black bearOP
When i build the project, it says I still need 'use client' at the top of files under /pages, that's the problem.
@American black bear When i build the project, it says I still need 'use client' at the top of files under /pages, that's the problem.
maybe thats because you imported them in /app folder?
you use "use client" to create server-to-client boundaries in the app dir.
But not in pages dir.
So if you want to start mgirating, then you can just add it for now in your components
But not in pages dir.
So if you want to start mgirating, then you can just add it for now in your components
American black bearOP
I just thought this error shouldn't appear unless it's under the /app folder
@American black bear I just thought this error shouldn't appear unless it's under the /app folder
yeah in app router they use a different router
its
import { useRtouer } from 'next/navigation' and the methods are a bit differentso you have to extract that logic for now
American black bearOP
yeah I thought so too, but I thought that I could still use the old router in my pages directory (the error above is from a file under /src/pages/...)
but i hope i answered half of your question, yeah to migrate from pages to app dir, you may need to write 'use client' everywhere at first.
American black bearOP
I just tried installing and upgrading my project packages again and it worked somehow, thanks for answering!
Answer