Quick Fix: To resolve the / path conflict between app/page.tsx and pages/index.tsx, delete one of them depending on which file you want to handle the root route, as Next.js can’t determine which one to use.
The Problem:
In a Next.js project, when setting up the routing logic, there’s a scenario where a default page, typically named pages/index.tsx, needs to be accessible via the root URL (/). However, there’s another page component, app/page.tsx, that’s already occupying the root route. The goal is to configure the routing to ensure that localhost:3000 directs users to pages/index.tsx and not app/page.tsx.
The Solutions:
Solution 1: Choose Either app/page.tsx or pages/index.tsx
In Next.js, you cannot have both `app/page.tsx` and `pages/index.tsx` because Next.js doesn’t understand which one to use to render the `/` path. This creates a conflict between the `app` router and the `pages` router.
If you attempt to build your project with both files, you’ll encounter an error like this:
error Conflicting app and page file was found, please remove the conflicting files to continue:
error "pages/index.tsx" - "app/page.tsx"
Therefore, to resolve this issue, you must choose either `app/page.tsx` or `pages/index.tsx`:
Choose `app/page.tsx`: If you prefer to use `app/page.tsx`, delete the `pages/index.tsx` file.
Choose `pages/index.tsx`: If you prefer to use `pages/index.tsx`, delete the `app/page.tsx` file.
Q&A
Next.js app has app/page.tsx in the root, how to add pages/index.tsx?
—
Removing app/page.tsx will allow the Next.js app to use pages/index.tsx as the root page.
Video Explanation:
The following video, titled "You're doing React Native Routing wrong - Expo File-Based Routing ...", provides additional insights and in-depth exploration related to the topics discussed in this post.
With the new Expo Router, you can use file-based routing for mobile applications, something previously only seen on the web!
