린찬승하우스: 2. Next.js 설치하기 – 프로젝트 시작을 위한 Next.js 설치 과정

2025년 1월 18일 토요일

2. Next.js 설치하기 – 프로젝트 시작을 위한 Next.js 설치 과정

Next.js는 React 기반의 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하는 프레임워크로, 웹 애플리케이션을 빠르고 효율적으로 개발할 수 있게 도와줍니다. 이번 글에서는 Next.js 프로젝트를 시작하기 위한 설치 과정에 대해 단계별로 설명하겠습니다. 초보자도 쉽게 따라할 수 있도록 상세히 안내드리겠습니다.

Next.js 설치, Next.js 프로젝트, React 프레임워크, 서버 사이드 렌더링, 정적 사이트 생성, Next.js 개발, npm 설치, Node.js 설치, Next.js 시작, create-next-app

1. Node.js와 npm 설치하기

Next.js는 Node.js 환경에서 실행되기 때문에, 먼저 Node.js가 설치되어 있어야 합니다. Node.js는 JavaScript 런타임으로, npm(Node Package Manager)은 자바스크립트 라이브러리와 패키지를 관리하는 도구입니다.

Node.js 설치 방법:

Node.js 공식 웹사이트에 접속합니다.
최신 LTS(Long Term Support) 버전을 다운로드합니다.
다운로드한 설치 파일을 실행하여 설치를 완료합니다.

설치가 완료되면, 터미널에서 아래 명령어로 설치된 버전을 확인할 수 있습니다.


node -v
npm -v

이 명령어를 실행하여 Node.js와 npm이 정상적으로 설치되었는지 확인합니다.

2. Next.js 프로젝트 생성하기

이제 Next.js를 설치하고 프로젝트를 생성할 준비가 되었습니다. Next.js는 create-next-app이라는 도구를 사용하여 간편하게 프로젝트를 생성할 수 있습니다.

Next.js 설치 및 프로젝트 생성 방법:

터미널을 열고, 프로젝트를 생성할 디렉토리로 이동합니다.
아래 명령어를 입력하여 create-next-app을 통해 새로운 Next.js 프로젝트를 생성합니다.


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

위 명령어에서 my-next-app은 프로젝트 이름입니다. 원하는 이름으로 변경할 수 있습니다.

프로젝트 생성이 완료되면, 해당 디렉토리로 이동합니다.


cd my-next-app

이제 프로젝트를 실행할 준비가 되었습니다. 아래 명령어로 개발 서버를 실행합니다.


npm run dev

이 명령어를 실행하면, http://localhost:3000에서 Next.js 프로젝트가 실행됩니다.

3. 프로젝트 구조 이해하기

Next.js 프로젝트를 생성하면, 몇 가지 기본적인 파일과 디렉토리가 생성됩니다. 주요 파일은 다음과 같습니다.

pages: Next.js에서 페이지를 생성하는 디렉토리입니다. 이 디렉토리 안에 있는 파일들은 자동으로 라우팅됩니다.
- index.js: 기본 홈 페이지입니다.
- about.js: 예시로 추가한 페이지입니다.
public: 프로젝트에서 사용하는 정적 파일을 저장하는 디렉토리입니다. 이미지, 폰트, 아이콘 등을 이곳에 두고 사용할 수 있습니다.
styles: CSS 파일을 관리하는 디렉토리입니다. 기본적으로 제공되는 스타일을 수정하거나 새로운 스타일을 추가할 수 있습니다.

4. Next.js에서 첫 페이지 만들기

이제 Next.js 프로젝트에서 첫 번째 페이지를 만들어 보겠습니다. pages 디렉토리 안에 새로운 파일을 추가하여 라우팅을 구현할 수 있습니다.

예를 들어, about.js라는 파일을 pages 디렉토리에 추가하고, 다음과 같이 작성합니다.


// pages/about.js
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page of our Next.js project.</p>
    </div>
  );
}

이제 브라우저에서 http://localhost:3000/about로 접속하면 About Us라는 제목과 간단한 텍스트가 표시된 페이지를 볼 수 있습니다.

5. Next.js 프로젝트 실행 확인

Next.js 프로젝트가 제대로 설정되었는지 확인하려면, 다시 한번 npm run dev 명령어로 개발 서버를 실행하고, 브라우저에서 http://localhost:3000을 열어보세요. 기본 홈 페이지와 about 페이지를 확인할 수 있습니다.

결론

이번 글에서는 Next.js를 설치하고 첫 번째 프로젝트를 설정하는 방법을 알아보았습니다. create-next-app을 사용하여 빠르게 프로젝트를 시작할 수 있으며, 기본적인 파일 구조와 라우팅 방법도 함께 배웠습니다. 이제 여러분도 Next.js를 활용한 React 애플리케이션 개발을 시작할 준비가 되었습니다.

Next.js는 서버 사이드 렌더링과 정적 사이트 생성을 지원하여, 웹 애플리케이션을 최적화된 상태로 개발할 수 있게 도와주는 강력한 도구입니다. Next.js를 잘 활용하면, 빠르고 효율적인 웹 애플리케이션을 개발할 수 있습니다.

린찬승하우스