DEV Community

Cover image for Zero to Next.js Example with WSL2 in W11
Francisco Moretti
Francisco Moretti

Posted on • Originally published at

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.


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
Enter fullscreen mode Exit fullscreen mode

For additional resources check this website.

Install WSL

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.

Open ubuntu from Terminal

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- | bash

## node
nvm install --lts
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Create next app usage

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
Enter fullscreen mode Exit fullscreen mode

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.

Blog app in VS Code

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.

App started in VS Code

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

App running in browser


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.

Top comments (2)

akito13 profile image

This article solved my issue with Windows mixing up Windows utilities inside WSL2. Once I installed the utilities, as described here, all worked out fine & no Windows utilities were used.

anonyco profile image
Jack Giffin

I cannot recommend enough that you abandon Windows and get a real Linux distro running on bare metal:

  • Learn problem-solving through your daily interaction
  • Millions of free software packages ready to install
  • Stop feeding evil Microsoft
  • Contribute to FOSS software to make the world a better place

And many many more benefits that are exclusive to Linux and completely unavailable in Windows.