Add Page in NextJS Project

Question

hope all of you have a great day!

I want to ask something, i create new project using npx create-next-app@latest using typescript and tailwind as css, look like this:

then i got the stack folder tree like this:

Then the problem is, i got confused, previous project using nextJS the file tree is not like this, now i didn't have folder called Pages anymore, is this the new thing?

Then i realized that i can't create new page (ex: i want to create test page, previously i just create folder named test inside pages folder and create index.tsx file)

How can i create new page with this scheme?

Answer 1

Inside app you can create folder else file name. folder name will work as part of url and file name words as end part or url.

structure : App>testcomponent>component1>index.js
url : ../testcomponent/component1/index.js

there could be multiple level of nesting in folder names to create nested routes.

For dynamic routes

structure : App>testcomponent>component1>[id].js
url : ../testcomponent/component1/index.js

you need to pass the id number at the end of URL to open that particular file as per requirement.

Same applies to folder.

Here id is just and example.

Answer 2

Go inside app folder and create folder for a page for example if you want to create a page about you should create folder named about and inside about you should create page.tsx it will automatically detect the content inside page.tsx

read more at https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts