Part 1 - Next.js

1. Install / Update nvm¶

nvm is a version manager for Node.js. It let's you install and manage a different version of node.js for each one of your projects.

How do I know if nvm is already installed on my machine?

Run the following command in your Terminal.

$ nvm --version

If it doesn't return a version number, it's (probably) not installed.

How do I know which version of nvm is installed on my machine?

Again, run the following command in your Terminal.

$ nvm --version

What's the current version of nvm?

Go to the installation section of the nvm project README. In the installation code snippet, the version number is specified.

As of 2024-07-28, the current version is 0.39.7

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

How do I install / update nvm?

Follow the nvm installation instructions here ->

2. Create the project directory¶

Most of my projects are centered around a business, so I usually set up a directory structure like this 👇

ABC Corp
├── abc-corp-app   <-- Next.js project root
│   ├── README.md
│   └── ...
├── artwork
│   └── ...
├── legal
│   └── ...
└── notes.txt

3. Open the project in Visual Studio Code.¶

After I create the project folder, I open it using VS Code. Continuing with the example above, I usually do something like

$ code path/to/ABC\ Corp/abc-corp-app

code is a VS Code command that opens the specified folder in VS Code.

Alternatively, you can open the project manually.

1. Launch VS Code
2. File > Open Folder > abc-corp-app

At this point, my VS Code project window looks like this 👇

4. Install / Update node.js and npm¶

First, I usually check my current versions.

$ node --version  # v22.5.1
 
$ npm -- version  # 10.8.2

Then I use nvm to update to the latest versions.

Install / Update node.js

$ nvm install node

Install / Update npm

$ nvm install-latest-npm

5. Create the Next.js app using create-next-app¶

I like using create-next-app to fill my empty project with some starter content.

$ npx create-next-app@latest

ABC Corp           <-- run create-next-app from here
├── abc-corp-app
│   ├── README.md
│   └── ...
├── artwork
│   └── ...
├── legal
│   └── ...
└── notes.txt

This command prompts you to answer some questions. Here are my preferred answers..

What is your project named?  abc-corp-app
Would you like to use TypeScript?  No
Would you like to use ESLint?  Yes
Would you like to use Tailwind CSS?  Yes
Would you like to use `src/` directory?  Yes
Would you like to use App Router? (recommended)  Yes
Would you like to customize the default import alias (@/*)?  No

create-next-app adds a lot of stuff to the empty project. Let's take a look...

Launch the app locally¶

If everything went smoothly, you should be able to launch the app on your local machine. From the Terminal, run

$ npm run dev

Then go to the Local url displayed in the console.

Set up a task button to run the app locally¶

You may have noticed this "Next" button in the footer of my VS Code window.

This is a task button that I've set up to run the development server. Instead of having to remember and run npm run dev, I can just click the task button. This isn't something you need, but it's super handy and I highly recommend setting this up.

1. Install the Task Buttons VS Code Plugin

2. Create the file .vscode/tasks.json

3. Save the following contents to .vscode/tasks.json

   {
     "version": "2.0.0",
     "tasks": [
       {
         "label": "Next.js: run",
         "type": "npm",
         "script": "dev",
         "presentation": {
           "panel": "dedicated"
         }
       }
     ]
   }

4. Create the file .vscode/settings.json

5. Save the following contents to .vscode/settings.json

   {
     "VsCodeTaskButtons.showCounter": false,
     "VsCodeTaskButtons.tasks": [
       {
         "label": "🔺 Next",
         "task": "Next.js: run"
       }
     ]
   }

At this point, the task button should automatically appear in the VS Code footer.

Set up version control with Git and GitHub¶

The create-next-app command we ran earlier automatically initialized a git repository for our app. It even made a commit. Run git log to see for yourself.

$ git log
 
> commit 118267cba3d9fc71bd440147b1b1ebb45f5a2084 (HEAD -> main)
> Author: spongebob <[email protected]>
> Date:   Sun Jul 28 11:54:28 2024 -0500
> 
>     Initial commit from Create Next App

The create-next-app command also created a .gitignore file that you can use to ignore files from being tracked. I usually make a few tweaks to the default .gitignore file, resulting in a file like this 👇

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
# dependencies
**/node_modules
/.pnp
.pnp.js
 
# testing
/coverage
 
# next.js
/.next/
/out/
 
# production
/build
 
# misc
.DS_Store
*.pem
.vscode/
 
# debug
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
 
# env files
.env*
functions/.env.*
 
# vercel
.vercel
 
# typescript
*.tsbuildinfo

At this point, I typically set up a private remote repository on GitHub, and then sync my local repo with the remote. Here's a quick video of what this process looks like:

If this is new to you, you should put this guide away and focus on learning Git + GitHub. (Lucky for you, I have a course on Git and GitHub!)

7. Set up environment variables¶

Create the following .env files inside the project root. You can leave the files empty for now.

ABC Corp/
  abc-corp-app/
  .env.local
  .env.development
  .env.production

# Development settings and API keys go here
# This file should not be tracked by git

# Production settings and API keys go here
# This file should not be tracked by git

This section of the Next.js docs gives a great explanation of how the different .env files interact. I'll restate it here, verbatim.

8. Deploy to Vercel¶

At this point, I like to deploy my project to Vercel to make sure everything's in working order before I start integrating Firebase.

I won't go into detail here, since Vercel has extensive docs on this topic. But here's a video showcasing the process.

9. Set up debugging¶

To debug a server-side function with VS Code,

1. Create a file .vscode/launch.json with the following contents.

   {
     "version": "0.2.0",
     "configurations": [
       {
         "name": "Next.js: debug server",
         "type": "node-terminal",
         "request": "launch",
         "command": "npm run dev"
       },
     ]
   }

2. Choose Next.js: debug server from the Run and Debug window in VS Code.

3. Click Start Debugging

4. Set a breakpoint somewhere in the function you want to debug.

5. Invoke the function.