Zero to Next.js Example with WSL2 in W11

Set up a development environment with

• VS Code
• An Ubuntu distribution in WSL2
• Node Version Manager (Node and npm)
• Windows Terminal
• A Next.js example

Windows Requirements

This tutorial was created in Windows 11 but you can use any of the following Windows versions:

• Windows 10 version 2004 and higher (Build 19041 and higher)
• Windows 11

VS Code

Download and install

Simply download it from the official site and follow the install instructions.

Remote - WSL extenision

You'll also need to install the Remote-WSL extension for a future step.

To install an extension open the extension panel with ctrl+shift+X. Search Remote - WSL and hit install.

Windows Terminal

Windows Terminal is a modern host application for the command-line shell. Basically, it allows you to run commands in Windows.
Open the Terminal by typing Terminal in the search bar.

WSL2

Why WSL2?s

The Windows subsystem for Linux has the following advantages:

• You get the hardware support of Windows and the software flexibility of Linux.
• The integration between Windows and Linux is impressive. Very few steps are required to set it up.
• It has great performance to run web applications.
• Most servers run Linux and you want to develop and test in a similar system.
• It keeps your host OS clean. You'll install most development dependencies in the WSL2 environment.

Install an Ubuntu distribution with WSL

To install an Ubuntu distribution in WSL2 simply run the following command in PowerShell.

wsl --install

For additional resources check this website.

After a few minutes, you should be able to open it in a new Terminal tab.
You will need to do a few setup steps the first time you run your WSL2 Ubuntu distribution, just follow the instructions that appear in the Ubuntu bash tab.

Set up NVM in Ubuntu

Now paste the following commands in the Ubuntu bash tab and that should set up Node with its version manager.

sudo apt update
sudo apt upgrade -y

## Install nvm and node
## nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

## node
nvm install --lts

Run a Next.js application

Let's run a Next.js application to verify that everything is working and get a Next.js project started at the same time.

Create Next App

Since this is a new setup, you'll need to install create-next-app package, but just trying to use it for the first time will run the installation as well. Create a new application and name it blog-app by running the following line.

npx create-next-app@latest blog-app

You should see something like this once it's done.

Open with VS Code

Now we can open this with VS Code and close the circle. Let's tell VS Code to open the blog-app folder. This will install VS Code remote server and it will also open the folder directly in VS Code in Windows.

code blog-app

The result should look like the following screenshot. Note the WSL:Ubuntu at the bottom left corner indicating that VS Code is connected to that WSL distribution.

Running the app

You can now use VS Code terminal instead of the Windows terminal. To open the VS Code terminal use ctrl+\`.

First, install the dependencies

npm i

Then, run the server

npm run dev

Your VS Code terminal should indicate that the application is running now.

Your application should have started in http://localhost:3000/ in Windows now and you should be able to access it with any browser.

Conclusion

This is a tutorial that set up many different tools. From Windows to Linux through VS Code and with the Terminal. You end up with a Next.js blog application from one of the hottest frameworks at the moment and with a clean setup to create other applications.

If you want to keep learning Next.js you can use the tools from this post to try one of the many official examples.