CODEWITHSUNDEEP
next.js
user824624
user824624

Reputation: 8080

In Next.js, how to route to page/index.tsx when app/page.tsx has occupied the root route "/"

I am new to Next.js, I tried an example.

The project structure is:

  src
    --app
      -- page.tsx
    --components

routing localhost:3000 goes to app/page.tsx. Now I add a page folder with an index.tsx

   src
     -- pages
       -- index.tsx

How would the app route to pages/index.tsx since app/page.tsx has already occupied the localhost:3000.

Upvotes: 1

Views: 6532

Answers (2)

Quantum One DAO
Quantum One DAO

Reputation: 1

Hi nextjs app router does allow for an index.tsx, page.tsx, and layout.tsx within the app folder.

Simply import the Index file into your layout page.tsx and render Index as a component with children

Here's a complete example

https://github.com/DeFi-1/dfi1-zeta-testdapp

Upvotes: 0

Youssouf Oumar
Youssouf Oumar

Reputation: 46151

You cannot have an app/page.tsx and a pages/index.tsx as Next.js won't know which one to use to render the / path. The two create a route using, respectively, the app and pages routers.

If you try, for example, to build your project while having the two files, you get this error:

error Conflicting app and page file was found, please remove the conflicting files to continue: error "pages/index.tsx" - "app/page.tsx"

So if you want to use pages/index.tsx, delete app/page.tsx, and vice versa.

Upvotes: 4

Related Questions