Notes

A collection of notes, links, guides to help setup your local environment. This is primarily for MacOS

VSCode

Download VSCode

Open projects from terminal

To open a project directory from the terminal with VSCode, you can install a CLI option. Open up VSCode for the first time, press Command+Shift+P and type in Install 'code' command in PATH. Hit Enter, and complete the process.

Once you've installed the code command, you can open a project from the terminal with code .

Launching from the commandline

Useful VSCode Plugins

React

Good Guides on Learning React

React 16: The Complete Course

(paid) Maximillian's courses are great, many friends I know who have taken Udemy courses highly recommend any of his courses.
The Joy of React

(paid) Josh Comeau is an incredible teacher, his courses have interactive tutorials. You'll learn React and Next.js. He also has a course CSS for Developers.
Learn Next.js free resource from NextJS to learn

Other Useful Tools

Warp Terminal is a supercharged Terminal.

Heynote a really useful scratchpad

GitHub Desktop a simple GUI for interacting with your github projects.

My favorite VSCode Themes

Useful VSCode Shortcuts

command + ~ This will open the VSCode terminal in your project. Makes it easier to run terminal commands inside your VSCode.
control + c A command you execute in your terminal to stop any running process, like a locally running project.
command + shift + p The VSCode Command Palette. A very useful way to quickly find/run vscode app commands like "Open User Settings"
command + p A Quick Open action. Makes it incredibly easy to find files in your project and open it instead of searching through your Explorer for the file.

Create a new Next.js App

!!! IMPORTANT !!!

With the configuration you'll do with this guide for Camp BUIDL, you will need to use the documentation specific to the settings you set up. On NextJS documentation, make sure you change the focus from Using App Router to Using Pages Router on the left navbar of the page.

You will use Page Router instead of App Router. NextJS documentation by default will be using App Router, use the Page Router documentation

Prerequisites

You will need an editor like VSCode as well as node.js and npm at the minimum. Follow the instructions at: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm

In your terminal, navigate to a directory that you want to set up your project. Generally it's a good idea to set up a directory for projects at the root, something like projects.

cd ~
mkdir projects
cd projects

Create a new NextJS project with the npx command. NPX is a package runner. Usually you need to download npm packages locally onto your machine to run packages and their commands. NPX skips that and runs them remotely from npm.

// the "buidl" is the name of the project/directory that will be created for your nextjs project
npx create-next-app buidl

NextJS is constantly updating and makes a lot of breaking changes. When you go through the create-next-app setup, it will try to create a project with the latest and breaking changes. A lot of online tutorials still teach using the Pages Router and /src structure. To make sure you're using the more stable setup, use the following answers for the setup.

✔ Would you like to use TypeScript? Yes
✔ 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) No
✔ Would you like to customize the default import alias (@/*)? No

VSCode Tip: If you made a mistake during the create-next-app process and you want to cancel the build and installation, you can use control+C to stop. This is also the command you can use to stop running your local project.

Once your project is completed installing, navigate inside your project.

cd buidl

To start up your project and run it locally, run the following command:

npm run dev

VSCode Tip: In the sidebar Explorer, you'll see your project directory of files, but there are also a couple collapsed panels at the bottom of the Explorer. One of those panels should be NPM Scripts. This panel will list the available npm run scripts that make it an easy one click run!

You can find additional commands for your project in the package.json file, under the scripts property.

Read the README! A good project has a good README, your NextJS project will have a README that will explain how to run, develop and learn NextJS with instructions and links.

!!! IMPORTANT !!!

Again, with the configuration you'll do with this guide for Camp BUIDL, you will need to use the documentation specific to the settings you set up. If you don't pay attention, you could waste hours configuring with the wrong settings using the wrong docs for your setup.

You will use Page Router instead of App Router. NextJS documentation by default will be using App Router, use the Page Router documentation

Build and Deploy your App

There are many ways and many services out there to deploy your app in production. NextJS works well with Vercel and makes deploying your app as easy as possible.

Sign up and create a new account with Vercel. It's a good idea to create an account linked up with your GitHub account because Vercel can access your project repos from GitHub and make it incredibly easy to deploy from.

Read their documentation and guides Get started with Vercel

Other Hosting Services

If you don't want to use Vercel, there are a number of other services you can use. Listed below are some popular ones, personally I have not tested deploying a NextJS app on them so they have not been "verified" to actually work.

itsacoyote/camp-buidl-notes.md