IMPORTANT: READ EVERYTHING BEFORE YOU PROCEED. This is a cheesy analogy but don’t be an interpreter, be a compiler.

<aside> 🥇 Goal: This lab will guide you towards the achieving the following milestones:

• Install the required environment software to set up Javascript based Projects.
• Bootstrap a Next.js application.
• Init a Github Repository for your Next.js app.
• Create an account on Vercel
• Link your Github repository to Vercel → deploy your Next.js app.

</aside>

Moving forward, if you see this emoji 📸, it means that I want to see a 1 or 2 screenshots of what I am asking you to do.

Below is an ARCHIVE of last semester’s lab which included some installation and steps to install React (not Next.js) you may find some of the explanation there to be useful:

Archive of Lab #9 Worksheet

Installation of Environment Requirements

Setting up NPM (Node Package Manager)

Before you start. Ensure that you have VSCode (Visual Studio Code) 📸 It is arguably the best code editor for software development and general-purpose coding (IT IS NOT AN IDE). You can download it here: Download Visual Studio Code - Mac, Linux, Windows

What is Node? Aren’t we supposed to do Javascript?

Node allows developers to write JavaScript code that runs directly in a computer process itself instead of in a browser.

Node.js is written in C, C++, and JavaScript, and it is built on the open-source V8 JavaScript engine which also powers JS in browsers such as Google Chrome. As V8 supports new features in JavaScript, they are incorporated into Node.

Taken from: What is Node? | Codecademy

The Ziyad explanation: Say you wrote a very cool function that computes the sum of two numbers. You can import said function into any of your code projects. But what if you wanted other developers to also use your incredible function? Similar to an App Store (Bad Analogy), you can submit your function (or set of functions) as a package / library and make it accessible to other developers who can download and use in their own projects.

NPM, or Node Package Manager, is a large repository of code libraries and packages available for use by any developer. It allows for the installation of different packages as needed in different projects, including packages that take care of setting up environments (like React and other frameworks for our case).

NPM is more than just a way to install packages, more to be seen later.

Okay, aaaand what the hell is NPM?

📸 You can download both NPM and Node in one go through the Node.js website below.

→ Download | Node.js