NextJs Folder structure

Nextjs is a very popular framework build above react and also a frontend+backend framework. It comes with a very interesting routing which resides inside its folder structure.

So let's dive into it.

we are following 'src' directory as our root and a 'app' folder we generally put everything inside this only, whatever we make inside it become a route

we know that a basic frontend route looks like -

https://localhost:3000/contact

in nextjs we need to make sure that we keep the name of folder as name of the route, since it is a framework therefore a lot depends on the names .To create a route for contact we will create a folder named 'contact' inside the app folder and a file page.tsx/jsx inside it this page.tsx is common for all the routes

Creating API's in nextjs

To create a api we will create an api folder and the folder inside it will become the name of the route for backend api's , followed by a common file route.ts similar to page.tsx for frontend folders.