W11에서 WSL2를 사용한 Zero to Next.js 예제

다음을 사용하여 개발 환경 설정

VS 코드

WSL2의 Ubuntu 배포판

노드 버전 관리자(노드 및 npm)

Windows 터미널

Next.js 예제

윈도우 요구 사항

이 자습서는 Windows 11에서 작성되었지만 다음 Windows 버전 중 하나를 사용할 수 있습니다.

Windows 10 버전 2004 이상(빌드 19041 이상)

윈도우 11

VS 코드

다운로드 및 설치

official site에서 다운로드하고 설치 지침을 따르기만 하면 됩니다.

원격 - WSL 확장

향후 단계를 위해 Remote-WSL extension도 설치해야 합니다.

확장 프로그램을 설치하려면 ctrl+shift+X가 있는 확장 패널을 엽니다. Remote - WSL를 검색하고 설치를 누르십시오.

윈도우 터미널

Windows 터미널은 명령줄 셸을 위한 최신 호스트 응용 프로그램입니다. 기본적으로 Windows에서 명령을 실행할 수 있습니다.
검색창에 Terminal를 입력하여 터미널을 엽니다.

WSL2

WSL2가 필요한 이유

Linux용 Windows 하위 시스템에는 다음과 같은 이점이 있습니다.

Windows의 하드웨어 지원과 Linux의 소프트웨어 유연성을 얻을 수 있습니다.

Windows와 Linux 간의 통합이 인상적입니다. 설정하는 데 필요한 단계는 거의 없습니다.

웹 응용 프로그램을 실행하는 데 뛰어난 성능을 제공합니다.

대부분의 서버는 Linux를 실행하며 유사한 시스템에서 개발하고 테스트하려고 합니다.

호스트 OS를 깨끗하게 유지합니다. WSL2 환경에서 대부분의 개발 종속성을 설치합니다.

WSL을 사용하여 Ubuntu 배포판 설치

WSL2에 Ubuntu 배포를 설치하려면 PowerShell에서 다음 명령을 실행하기만 하면 됩니다.

wsl --install

추가 리소스를 확인하려면 this website .



몇 분 후에 새 터미널 탭에서 열 수 있습니다.
WSL2 Ubuntu 배포를 처음 실행할 때 몇 가지 설정 단계를 수행해야 합니다. Ubuntu bash 탭에 표시되는 지침을 따르기만 하면 됩니다.

Ubuntu에서 NVM 설정

이제 Ubuntu bash 탭에 다음 명령을 붙여넣으면 해당 버전 관리자로 Node를 설정해야 합니다.

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

Next.js 애플리케이션 실행

Next.js 애플리케이션을 실행하여 모든 것이 제대로 작동하는지 확인하고 동시에 Next.js 프로젝트를 시작하겠습니다.

다음 앱 만들기

이것은 새로운 설정이므로 create-next-app 패키지를 설치해야 하지만 처음 사용하려고 하면 설치도 실행됩니다. 새 애플리케이션을 만들고 다음 줄을 실행하여 이름을 지정합니다blog-app.

npx create-next-app@latest blog-app

완료되면 이와 같은 것을 볼 수 있습니다.

VS 코드로 열기

이제 VS Code로 이것을 열고 원을 닫을 수 있습니다. VS Code에 blog-app 폴더를 열도록 지시해 보겠습니다. 이렇게 하면 VS Code 원격 서버가 설치되고 Windows의 VS Code에서 직접 폴더도 열립니다.

code blog-app

결과는 다음 스크린샷과 같아야 합니다. 왼쪽 하단 모서리에 있는 WSL:Ubuntu는 VS Code가 해당 WSL 배포에 연결되었음을 나타냅니다.

앱 실행

이제 Windows 터미널 대신 VS Code 터미널을 사용할 수 있습니다. VS Code 터미널을 열려면 ctrl+\ `를 사용합니다.

먼저 종속성을 설치합니다.
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.

결론

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.