How I Start a NextJS Project in App Router

There are two things that I consider when starting a NextJ project. If it's a full fledge application, usually, with authentication, I use the Supabase template.

npx create-next-app@latest --use-npm supabase-nextjs

This provides the suggested way how the supabase integration is structured.

Otherwise, I'll be using the normal template from NextJs.

npx create-next-app@latest

This makes the initial setup easier, especially with folder structure.

Speaking about folder structure, I'll be discussing how I started mine for my website portfolio. Given, there's already an initial setup, I will be building on that one. Inside the app/ directory, i've added a Components/ folder and a group folder, (pages)/

Inside the Components folder are components shared among different pages, like the Footer and Header. Inside the pages group folder is where I place the different pages of my website. In each webpage, if there are methods or components specific to them, I place them inside the same directory.

Aside from components, I also created a folder for util/ for shared methods and types/ for shared types.

The reason behind this folder structure is for developer experience, which boils down to the dev's personal choice. For me, it's for my ease of navigation and for uncluttered look.