How I Setup My NextJS Project

Getting Started

I always follow what the Official Documentaion said to get started with nextjs by using this command

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript

1. Setup Prettier

I think this is important for most of Javascript or Typescript to be setup because this will be a parameter on how the syntax rule to be formatted

Make sure you have extension or addons for prettier installed in your code editor
Add .prettierrc file to root directory
Add prettier rule (I usually just follow basic rules that provided in the documenation, you can copy mind or use your own conf). The only thing that i changed is the tabWidth to be 2

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

I'm using Visual Studio Code editor so i'm enabling format on file save so that the file i'm working on is formatted every time i save the file

2. Update Project Structure

I updated the project strucutre because i feel like that having every folder in the root directory it's not a good idea because it makes the project folders and files looks messy

Create src folder in the root directory
Move pages folder and styles folder if available to src
Make sure to update file import related to changes made

This might affect some things if you have custom tsconfig or jsconfig set up

3. Add baseUrl to `tsconfig.json`

"baseUrl": "src"

This will allow absolute import