Windows Subsystem for Linux (WSL) lets developers install a Linux distribution and use Linux applications, utilities, and Bash command-line tools directly on Windows, unmodified, without the overhead of a traditional virtual machine or dual-boot setup.

My goal was to build a Next.js app and deploy it to Vercel. I wanted my system to be able to run a Node.js server and be able to develop my app in Visual Studio Code without jumping around. I collected my notes since it was my first time and I probably will want to get my environment set up on another machine. I hope this helps you out.

Use Windows PowerShell to Install WSL 2

Open PowerShell as administrator

• Type this to install WSL

wsl --install

• Check the version to confirm the installation of WSL. You are looking for version 2.

wsl -l -v

• Exit PowerShell by typing exit

Install Windows Terminal

Windows updated the terminal and have provided a great way to interface with your system and subsystems. Go to the Windows Store and install the upgraded Windows Terminal.

Update WSL

• Open WSL by typing wsl in Windows Terminal
• Update Ubuntu: sudo apt update && sudo apt upgrade
• Install cURL: sudo apt-get install curl
• Exit wsl, close Terminal, reopen terminal, get back into WSL

Install Node.js and a Package Manager

• Install Node.js LTS: nvm install –lts
• Install latest Node,js: nvm install node
• Verify installation: nvm ls
• Install Visual Studio Code WSL on your Windows machine
• Install Node Extension Pack
• Install JavaScript Debugger extension

Back to WSL:

• Verify Installation: command -v nvm

Create Your First Next.js Web Application

• cd ~
• mkdir NextProjects
• cd NextProjects
• npx create-next-app my-next-app

Open Visual Studio Code from Windows Terminal

code .

You can now use the terminal tab that’s built into VS Code. To run your app, type “npm run dev” and go to “localhost:3000” in Microsft Edge. “run dev” lets you work on your app and have it running a development instance with hot-reloading, file watching and task re-running. It really speeds up the iterative process.

If you want to opt out of Next.js telemetry, type “npx next telemetry disable” in the VS Code Terminal.

Install React Developer Tools

Install React Developer Tools on the Microsoft Edge Browser so you can get detailed React feedback about your errors and connect the web development experience more tightly to Visual Studio Code.

To open Windows Explorer to manage your files:

explorer.exe .

Don’t forget that dot ^

This is a quite nice trick. You can manage the files on your WSL subsystem. This works how you want it to work. You can move files back and forth.

Profit.

Resources

I found a few resources useful as I learned how to get my laptop and development environment set up. Let me know if you find any useful resources out in the wild.

• WSL Tutorial: https://learn.microsoft.com/en-us/windows/wsl/install
• Node.js Installation Tutorial for WSL: https://learn.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-wsl
• Next.js Installation Tutorial for WSL: https://learn.microsoft.com/en-us/windows/dev-environment/javascript/nextjs-on-wsl
• Windows Terminal: https://apps.microsoft.com/store/detail/windows-terminal/9N0DX20HK701?hl=en-us&gl=us&rtc=1