- read

Linux > Windows: Setting Up Next.js with WSL

Web Development

Daniel Craciun 57

Linux > Windows: Setting Up Next.js with WSL

Daniel Craciun
Level Up Coding
Published in
3 min read1 day ago

--

Windows Ubuntu + Next.js + VS code logos
Windows Ubuntu + Next.js + VS code: source

One powerful combination to enhance your development experience with Next.js, a popular React framework, is to pair it with Windows Subsystem for Linux (WSL).

This dynamic duo offers a seamless environment for web development and opens up a world of possibilities for cross-platform coding, having a Linux environment on Windows, and so much more.

In this article, we will dive into the steps to set up Next.js on WSL, unlocking a robust toolkit for your software development journey.

Are you ready? Lets get started.

Table of Contents

  • What WSL is
  • Installing WSL
  • Setup with Visual Studio Code
  • Creating a Next.js Project

What WSL is

WSL, or Windows Subsystem Linux, is a program that allows developers such as yourself to access the power of both Windows and Linux at the same time on a Windows machine.

You will be able to install your favorite Linux distro (e.g. Debian, Kali, Arch Linux) and use them directly on Windows without the overhead of virtual machines or dualboot setups.

Installing WSL

  1. Open PowerShell or CMD in administrator mode; do this by right clicking on the app and select “Run as administrator.”
  2. Type the following command in your terminal window:
wsl --install

This installs everything you need to run Linux on your Windows system, simple right?

3. If you are unhappy with the default Linux distro, feel free to utilize the following commands to change your distro.

wsl --list --online # Lists the available distributions for installation.

wsl --install -d <Distribution Name>

4. After installing WSL, you will be prompted to create a user account and password for your installed distro. See the Best practices for setting up a WSL development environment guide to learn more about this.

Setup with Visual Studio Code

Integrating WSL with Visual Studio Code will bridge the gap between Windows and Linux even further. To setup VS code with WSL, work through the following two steps:

  1. Install VS code from the VS Code install page if you haven’t already. NOTE: When prompted to select Additional Tasks during installation, be sure to check the Add to PATH option so you can easily open a folder in WSL using the code command.
  2. Boot up VS code and install the Remote Development extension pack, this extension provides you with the required tools to make your Linux feel native, creating a seamless integration between your Windows and Linux.

Creating a Next.js Project

We are finally done with the preparation, now for the moment we’ve all been waiting for, creating a Next.js project using WSL.

  1. Type “Ubuntu” in your windows search bar and press enter to start up WSL.
  2. We first need to setup node on your Linux distro, to do this run the following command to install the nvm package which will allow us to install the latest version of node.
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

3. Type nvm install node to install the latest version of node on your device.

4. inside the root directory in your terminal (denoted by this symbol: ~) run npx create-next-app@latest and select your preferred install options.

5. cd into your new Next.js project directory and enter code . to open your project in VS code.

Conclusion

Congratulations! You can now enter npm run dev to run the latest version of Next.js (14) on your Linux distribution inside Windows.

In a future article, I will show you how to setup bun on WSL as bun has limited functionality on Windows, so this would be a suitable way to showcase WSL further.

If you enjoyed this article, check out my profile for many more stories like this, and stay tuned for future articles! 👍

Affiliate Links 🏷️🔗

Connect With Me 🌐