웹사이트 검색

Ubuntu에서 Next.js 프로젝트를 설정하는 방법


Next.js는 사용하기 쉽고 서버 측 렌더링, 정적 페이지 생성 및 API 구축과 같은 강력한 기능을 갖춘 빠르고 현대적인 웹사이트를 만드는 데 도움이 되는 React의 잘 알려진 프레임워크입니다.

Ubuntu 기반 시스템에서 Next.js 프로젝트를 시작하려는 경우 이 가이드에서 프로세스를 단계별로 안내합니다.

필수 구성 요소

Next.js 프로젝트 설정을 시작하기 전에 Linux 시스템에 설치해야 하는 몇 가지 사항이 있습니다.

  • Node.js: Next.js는 Node.js 위에 구축되었으므로 Node.js 설치해야 합니다.
  • npm: npm(노드 패키지 관리자)은 프로젝트의 패키지 및 종속성을 관리하는 데 사용됩니다.

Node.js와 npm 모두에 대한 설치 과정을 살펴 보겠습니다.

1 단계 1 : Linux에서 Node.js 및 NPM 설치

새 소프트웨어를 설치하기 전에 패키지 목록을 업데이트하여 리포지토리에서 사용할 수 있는 최신 버전의 소프트웨어를 설치하고 있는지 확인하는 것이 좋습니다.

sudo apt update

다음으로 가장 안정적이고 널리 사용되는 버전인 LTS(Long-Term Support)로 표시된 Node.js 버전을 설치하는 것이 가장 좋은 Node.js(npm도 설치)를 설치할 수 있습니다.

sudo apt install nodejs

설치가 완료되면 버전을 확인하여 Node.js가 올바르게 설치되었는지 확인합니다.

node -v
npm -v

이제 시스템에 Node.js와 npm이 모두 설치되었습니다.

2단계: Next.js 프로젝트 설치 및 설정

이제 Node.js와 npm이 설치되었으므로 새 Next.js 프로젝트를 만들 차례입니다. Next.js를 설치하는 가장 쉬운 방법은 Next.js팀에서 제공하는 공식 패키지인 create-next-app을 사용하는 것입니다.

sudo npm install -g create-next-app

이제 create-next-app이 설치되었으므로 새 Next.js 프로젝트를 만들 수 있습니다.

npx create-next-app@latest my-next-app

여기서 my-next-app은 프로젝트 폴더의 이름입니다. 원하는 이름으로 바꿀 수 있습니다. npx 명령은 create-next-app 패키지를 다운로드하여 실행하고 새 Next.js 프로젝트를 설정합니다.

명령 실행이 완료되면 Next.js 애플리케이션의 기본 구조를 가진 my-next-app이라는 새 폴더가 생깁니다.

3단계: Next.js 프로젝트 실행

프로젝트를 만든 후 프로젝트 폴더로 이동하여 개발 서버를 시작합니다.

cd my-next-app
npm run dev

이 명령은 Next.js 개발 서버를 시작합니다. 기본적으로 서버는 http://localhost:3000 에서 실행됩니다.

브라우저를 열고 해당 URL로 이동하면 기본 Next.js 시작 페이지가 표시됩니다.

앱 폴더에서 새 페이지 만들기를 시작할 수 있습니다. 예를 들어 app 디렉터리 내에 새 파일 about.js 만들어 정보 페이지를 만듭니다.

결론

Ubuntu 컴퓨터에서 새 Next.js 프로젝트를 성공적으로 설정했습니다! 이제 새 페이지, 구성 요소 및 기능을 추가하여 웹 애플리케이션 구축을 시작할 수 있습니다.

Next.js를 사용하면 최신 웹 애플리케이션을 쉽게 구축할 수 있으며, 이 가이드의 도움으로 Next.js 프로젝트를 설치하고 설정하는 방법을 배웠습니다.

관련기사: