Setting up a Next.js Project is super easy. It can be done in under 5 minutes. Here’s how I like to set it up.

Step 0. Create a new Github Repo

I like to create a new Repo in Github to make sure I have version control of the project. Then, use the coding tools you like to clone the repo and open it.

Step 1. Initialize Next.js

Using ./ will create the project right under your repo’s directory (should be in it first)

Also, I prefer using pnpm since it’s a better developing experience and faster (imo)

pnpm create next-app@latest ./

Basically just press enter all the way. (except you have specific preferences)

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

Step 2. Setting Prettier

Having prettier is a must in my project. I am lazy, and I had enough with manually formatting my code through college while writing C. So I always use prettier to format my projects when I just copied pasted messy code and my messy code (when it gets too long and cramped together).

pnpm add --save-dev prettier

After downloading prettier we can proceed on setting up prettier

touch .prettierrc
touch .prettierignore

.prettierrc is for specific styles you like for it to format the code

.prettierignore is a file to tell prettier what files to ignore

# .pretterignore
# Ignore artifacts:
build
coverage

# Ignore all HTML files:
**/*.html

# Ignore all Markdown files:
**/*.md

# Ignore all JSON files:
**/*.json

**/.git
**/.svn
**/.hg
**/node_modules

# Ignore components ui files 
# (I added this to prevent reloading shadcn-ui components)
components/ui/**/*.tsx

Then go to package.json and add to script (now should look like this):

 "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write ."
  },