Project Organization Features for App Router

Private, route groups, `src`

Private folders can be created by prefixing with underscore: _folderName - explicitly telling the project that this folder should not be considered by the routing system
Why: To clearly delineate folders that exist for logic such as _lib, _components, _const
Route groups can be created by wrapping folder in (): (folderName)
Why: Maybe you want to group pages or routing folders into different categories or by team or department units but don’t want those to show up in the route. (e.g. maybe you need an (admin) folder that has dashboard route or (marketing) route group that holds the site’s about and blog and contact route segments).
src directory: while optional, you can have a src directory inside the app folder to separate the source code from configuration files.

Something I’m still struggling with but am growing to love.
Configuring this makes it easier to read and maintain imports across nested files.

// before
import { Button } from '../../../components/button'
 
// after
import { Button } from '@/components/button'

Next.js actually prompts you via the create-next-app to help you setup the module path aliases.

In the tsconfig.json or jsconfig.json you set the baseUrl. If you want to set the baseUrl to the app folder that is located within the root directory, you do the following:

{
  "compilerOptions": {
    "baseUrl": "./app"
  }
}

Doing this enables you to import Button that is located in the component folder of your root directory as:

import Button from 'components/button'

You can additionally set up “alias” module paths (‘alias’ - which literally means another name that you go by) by using "paths" option.

{
  "compilerOptions": {
   "baseUrl": "./app"
    "paths": {
      "@/*": ["./*"]
    }
  }
}