Migration from /pages to /app router with Next.js > Get a 404 on homepage when deploying on Vercel

[lionelrudaz]

Summary

Hey folks,

I'm migrating my app from the /pages to the /app router.

Everything is going smoothly so far, up to the point that I'm trying to migrate the home page. I've created a page.tsx file in the /app directory, everything is pervect locally. The build retrieves no error and shows the / page as a static page.

I've put all the details below, I hope this is helpful.

Let me know if there's anything else I can provide to give more information.

Cheers,
Lionel

Additional information

Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 22.4.0: Mon Mar 6 21:01:02 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T8112
Binaries:
Node: 19.1.0
npm: 8.19.3
Yarn: 3.3.0
pnpm: 8.4.0
Relevant packages:
next: 13.4.2-canary.3
eslint-config-next: 13.0.7
react: 18.2.0
react-dom: 18.2.0
typescript: 4.8.4
Which area(s) of Next.js are affected? (leave empty if unsure)
App directory (appDir: true)

Link to the code that reproduces this issue
https://github.com/lionelrudaz/tasters/tree/app-router

To Reproduce

Hey folks,

I'm migrating my app from the /pages to the /app router.

Everything is going smoothly so far, up to the point that I'm trying to migrate the home page. I've created a page.tsx file in the /app directory, everything is pervect locally. The build retrieves no error and shows the / page as a static page

When I deploy on Vercel, all routes work, except the homepage, which raises a 404 error.

I've checked the build, there's no / page.

I've checked the outcome source. there's no index page.

Here's the structure of my /app folder

Example

No response

[lionelrudaz]

I've found the error. My PageComponent.tsx file was originally named Page.tsx. When I renamed it to create page.tsx for the homepage, GitHub thought it was the same file.

I had to run git mv Page.tsx page.tsx and voilà.

Hope this is helpful for n00bs like me 😅