Back

How to create a basic website with Next.js

In this tutorial we'll assume that you have no prior proramming knowledge.

What we'll be looking over in this tutorial

1. Installing Node.js & npm.
2. Installing Visual Studio Code and creating the project directory.
3. Creating a next.js app template.
4. Starting the server.

Installing Node.js & npm

Head to https://nodejs.org/. And press the green button on the right that says "18.*.* Current". Pressing the button will start the download.

NOTE: If you're on linux, you might need to separately install npm via your package manager.

If you're on Windows 7 or greater, it'll download a file with the file-ending of .msi. Open this file and follow the instructions.
If you're on a debian based Linux distribution, it'll download a .deb file that you can open and then install.

Once node has finished installing, open up a new cmd window (terminal window on linux). To check if it's installed, just type node -v in to the window. The expected output should be the node version that you installed. If it comes up saying that the node command wasn't found, you've done something wrong.

Installing Visual Studio Code and creating the project directory.

head to https://code.visualstudio.com/ and download the appropriate build for your operating system. Open the downloaded file and follow the instructions inside.

Once VSCode has downloaded, open it. You should see the home page. From there press the button at the top that says Terminal. And press New terminal. A window will open at the bottom of your screen that will show the current directory you're in.

Create a new directory with the mkdir (directory name can be anything you want) command. This will create a new folder where we'll keep our Next.js project.

Change your directory to the one you just made with cd (name of the directory that you just made). If you're on windows you should see somtehing like C:Users(your username)(your directory name\.

Creating the Next.js project.

Type npx create-next-app (cool name for your project) to create a new next app template. The command will create a default folder structure to build your app upon.

Use the change directory command again with the name of the project that you just made. And type code . again here, to open the directory in visual studio code.

Once open, you should see a folder structure on the right containing a pages and styles folder along with some others. Open the pages folder. Inside you'll see a file called index.js. Open it and replace inside the return() statement with {"<h1>Hello world!</h1>"}

Starting the server

In the terminal window you have open, type npm install this will install all required node modules to run the server. After the installation process is done type npm run dev.

And that's it. That's how you create, edit and boot up a Next.js website. Time to get creating.