Why cant i use next js app router directory function or is their a way to change from the pages router directory

Describe your feature request

What problem(s) would this feature solve?

Explain what you were trying to do when you came across the problem leading to this feature request

Replit Profile: https://replit.com/@EmmanuelAnucha

It doesn’t matter if you use the NextJS app or pages router in your project. There is no difference in deploying them on Replit. Set the build command as npm run build, yarn build, bun run build or pnpm run build (depending on the package manager you’re using) and then the start command as npm run start, yarn start, bun run start or pnpm run start.

This will not work on static deployments - only autoscale or reserved.
If you want to use static deployments, see this guide on the NextJS docs:

I dont know how to write next using the pages router only app router so is there a way i can use replit next in app router pattern

Yes?
If I remember correctly the default NextJS template uses the pages router. But if it doesn’t just delete the app folder and make a pages one and code as usual. I’d highly recommend learning & switching to the app router though. (Better performance, better DX after you’ve learnt it, more features)

i keep getting this error on all my react component when i try to switch to app router directory
Error: The default export is not a React Component in page: “/TicketPage”

That’s because the export needs to be called Page

ok should i name it page to eg function TicketPage(){} to function page(){}

i got his error

It needs to be capitalised, so export default Page

Error: Page is not defined

I feel the problem is not the code cause i am following an online tutorial and it is not working can u please just try to create a simple next app and see if when you change it from pages router directory to app router directory if it will work because it runs well on pages directory but when you try to change it that is where the problem is at

Yes, you need to rename the function to Page (capitalised) as well as the export.

I’ve migrated multiple projocts from pages dir to app dir with no issues.

I keep getting this error

Unhandled Runtime Error
Error: The default export is not a React Component in page: "/"

Call Stack
t7
/home/runner/Ticket/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (38:7146)
async
/home/runner/Ticket/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (38:24472)

It is working now Thanks for all the help the problem was i created a layout.js file so all i had to do was delete it then it was automatically replaced by a layout.tsx file and now it runs ok but can you please help me with this new error

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.