Skip to content

Getting started

Installation

Install the free tools and see your website running on your computer.

To see and edit your website, you will run it on your own computer first. This takes about 10 minutes the first time, and you only do it once.

What you need

  • A Windows, Mac or Linux computer
  • Node.js version 20.9 or newer (free). It runs the website on your computer.
  • Visual Studio Code (free). A friendly editor for opening and changing the files. Any code editor works, but this guide uses VS Code.
  • An internet connection for the first install

Step by step

  1. Install Node.js

    Go to nodejs.org and download the version marked LTS (Long Term Support). Open the installer and click through with the default options.

  2. Install Visual Studio Code

    Download it from code.visualstudio.com and install it like any other app.

  3. Open your template folder

    Open VS Code, choose File → Open Folder… and select your template folder (for example spa). If VS Code asks whether you trust the authors, click Yes.

  4. Open the terminal

    In VS Code, choose Terminal → New Terminal. A panel opens at the bottom. This is where you type commands. First, check that Node.js is installed:

    Terminal
    $node -v

    You should see a version number like v22.11.0. Anything from v20.9.0 upwards is fine.

  5. Install the template's packages

    Type this command and press Enter:

    Terminal
    $npm install

    This downloads everything the website needs into a new node_modules folder. It takes a minute or two. Warnings in yellow are normal; you only need to worry about red errors.

  6. Start the website

    Terminal
    $npm run dev

    When you see Ready, open your browser and go to http://localhost:3000. Your website is now running on your computer. 🎉

How editing works

Leave the terminal running while you work. Every time you save a file (Ctrl + S on Windows, ⌘ + S on Mac), the browser updates automatically.

  • To stop the website, click in the terminal and press Ctrl + C.
  • To start it again next time, open the folder in VS Code, open a terminal and run npm run dev. You do not need to run npm install again.

If something goes wrong

“npm: command not found” or “npm is not recognized”

Node.js is not installed, or VS Code was open while you installed it. Close VS Code completely, open it again and retry. If it still fails, reinstall Node.js and restart your computer.

“Port 3000 is in use”

Another program is already using that address. Next.js will offer a different one, such as http://localhost:3001. Read the terminal and open the address it shows.

“Node.js version … is not supported”

Your Node.js is too old. Install the latest LTS version from nodejs.org, then close and reopen VS Code.

Red errors during npm install

Delete the node_modules folder (if it exists), check your internet connection, and run npm install again.

The page shows an error after I edited a file

The error message tells you the file and line number. Usually a quote mark, comma or bracket was removed by accident. Undo your last change with Ctrl + Z (⌘ + Z on Mac), save, and try again more carefully.