Skip to content

Folder Structure Of NextJs-14

Nextjs is a full stack framework with very simple and easy to understand folder structure.

As soon as you create your first NextJs application, you will see file like package.json in your app that Is your app root directory. then you will see a app folder where all codes related to your project will reside.

Now inside app you will see layout.tsx , page.txs where you can say layout is your website layout and page.tsx is the home page of your application.

Now if you need a new route you just need to create a folder with the name of you choice and the folder name itself will be your route and you can access the page using the folder name in your application.(The condition is every pages file name has to be page.js/page.jsx/page.ts/page.tsx which will reside inside the created folder or route

app-
about-
page.js
contact-
page.js

Api: to create a api inside your app folder create one folder with name ‘/api’ then inside the folder create folder for a particular api let’s say the folder created is ‘/user’ then inside ‘user’ you can create file with route.js/route.jsx/route.tsx like name and then inside the directory you can write your api.

Continue reading my blogs to Get continuous information about new technologies and how to use them. I like to explain things in a practical way. For any question please use the comments below. I will shortly reply to your comment.

Leave a Reply

Your email address will not be published. Required fields are marked *