Learning Next.js - Pre-Requisites Skill & Setup Environment

#Introduction

Welcome to the Learn Next.js series! This series will take you through mastering Next.js — the React framework for server-rendered web applications — from conceptual foundations to production readiness. There are 24 episodes in total, arranged across six phases: pre-requisites, basic operational, workloads, networking and security, advanced topics, and the modern ecosystem.

But before creating your first project, there are some basic skills and software you must have. Why do these prerequisites matter? Because Next.js isn't just a library; it's a framework that manages routing, rendering, bundling, and deployment. If you're not yet comfortable with React, JSX, or the concept of rendering in the browser, most of the material will feel abstract.

Episode 0 is your roadmap: we'll make sure the basic skills are in place, set up Node.js, an editor, and tooling, then verify the environment with your first script. Once this episode is done, the whole series can be followed comfortably.

#Essential Skills to Master

#HTML, CSS, and Modern JavaScript (ES6+)

Next.js produces HTML and CSS that are rendered both on the server and in the browser, so you must understand page structure, tag semantics, CSS selectors, and layout. For JavaScript, master ES6+ features such as arrow functions, destructuring, template literals, the spread operator, module import and export, as well as Promise and async await. These features show up constantly throughout Next.js code.

#React and Functional Components

Next.js is a framework built on top of React. You need to understand functional components, props, JSX, conditional rendering, list rendering with keys, and basic hooks such as useState and useEffect. Every piece of UI in Next.js is built as a React component — whether server component or client component — so this foundation is a hard requirement.

#SPA and Client-Side Rendering

First understand the Single Page Application concept: a single HTML document that gets refilled by JavaScript in the browser. From there you'll understand why a pure SPA has SEO and initial-load-time problems, and how Next.js answers them by rendering on the server. This concept is key to episodes 1 and 2.

#Command Line, Git, and Package Manager

All Next.js workflows run from the terminal. You should be comfortable navigating folders, running commands, and reading output. Also master Git for version control — init, add, commit, push, branch — and one package manager: npm, yarn, or pnpm. This series uses npm, which is installed together with Node.js.

#Software to Prepare

#Node.js LTS

You must use the latest Node.js LTS version (at the time of writing this series, Node.js 20 LTS or newer). Node.js provides the runtime for running Next.js in development and build. Verify your Node and npm versions:

node --version
npm --version

Make sure node --version prints a version of 20 or higher. If your version is older, upgrade first before continuing.

#IDE/Editor: VS Code with Extensions

Use VS Code and install supporting extensions: ESLint for inline linting, Prettier for automatic formatting, and Tailwind CSS IntelliSense if you're using Tailwind (episode 5). If you like, also install the Reactjs code snippets extension to speed up writing components.

#Browser and Modern Tooling

Use a modern browser such as Chrome, Edge, or Firefox for development. Also prepare ESLint, Prettier, and TypeScript — all three will be configured automatically by create-next-app in episode 3. For hardware, a laptop with at least 8GB RAM is recommended so builds and the development server run smoothly.

#Setting Up Node.js with nvm

#Installing Node.js LTS

The cleanest way to manage Node.js versions is with nvm (Node Version Manager). Install nvm, then use it to install the LTS version of Node:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
nvm install --lts
nvm use --lts
node --version

The command nvm install --lts automatically installs the latest LTS version. With nvm, you can switch Node.js versions between projects without conflicts — an important habit for team work and production.

#Verifying npm and Git

Make sure npm and Git are ready, then configure your Git identity for your first commit later:

npm --version
git --version
git config --global user.name "Arman Dwi Pangestu"
git config --global user.email "arman@example.com"

The output of npm --version and git --version should print version numbers, not a command not found error. If Git isn't installed, install it first from your operating system's package manager.

#Verifying the Environment

#Quick Test with a Node Script

To make sure the environment works, create a file named cek.js and run it:

First verification with Node

const nama = "developer"
const sapa = (n) => `Halo, ${n}! Selamat belajar Next.js`
 
console.log(sapa(nama))

Run it with node cek.js. If a greeting message appears without errors, your JavaScript environment is ready to use for the next episodes.

#Prerequisite Checklist

Here's a recap of the prerequisites you've prepared in episode 0:

• HTML, CSS, and JavaScript ES6+ with confidence.
• React basics: functional components, props, JSX, and hooks.
• SPA and client-side rendering concepts.
• Node.js LTS and npm installed and verified.
• Git configured with your user identity.
• VS Code with the ESLint and Prettier extensions.

If anything is still missing, stop and complete it before continuing. A strong foundation will make the next 23 episodes feel much lighter.

#Closing

Here's what to take away:

• Next.js needs a solid foundation in React and JavaScript ES6+.
• Understand the SPA concept to grasp the problems Next.js solves.
• Node.js LTS must be installed and verified.
• npm, Git, and VS Code are your daily toolkit.
• Always run a simple verification before starting to code.

In the next episode, episode 1, we'll discuss the history, background, and why you need Next.js — from the evolution of this framework, Vercel's contribution, to the problems it solves for performance, SEO, and developer experience. Make sure your environment is ready, because the Learn Next.js journey has only just begun!