[튜토리얼] Next.js 프로젝트 시작하기 1편 (초기 세팅에서 페이지 작성까지)

 

React는 프론트엔드 개발에서 가장 인기 있는 라이브러리 중 하나로, 대규모 웹 애플리케이션을 구축할 때 유용하게 사용된다. 하지만 React로 대규모 프로젝트를 진행하다 보면 서버 사이드 렌더링(SSR), 라우팅, 성능 최적화 등 다양한 기능을 고려해야 할 때가 많다. 이 때 Next.js는 이러한 기능을 쉽고 편리하게 사용하게 해주는 프레임워크다.

 

Next.js의 주요 기능

-서버 사이드 렌더링(SSR): 서버에서 미리 HTML을 생성하여 더 빠른 페이지 로딩 및 SEO 최적화 가능.
-정적 사이트 생성(SSG): 빌드 시 HTML을 미리 생성해 퍼포먼스 향상.
-API 라우트: API 서버를 별도로 설정할 필요 없이 Next.js 내에서 API 엔드포인트 생성 가능.
-파일 기반 라우팅: 별도의 라우터 설정 없이 파일 구조에 맞춰 라우팅 자동 생성.

 

그럼 이제부터 Next.js로 React 프로젝트를 시작하는 방법을 간단하게 정리해 보려고 한다.

 

1. Node.js 설치

먼저 Node.js가 설치하고 나면 커맨드 명령어로 Next.js 프로젝트를 생성할 수 있다.
Node.js 공식 웹사이트 (https://nodejs.org/) 에서 LTS(Long Term Support) 버전을 다운로드하여 설치한다.

2. npx를 이용하여 Next.js 앱을 생성한다.

npx create-next-app@latest

2. 프로젝트 이름을 입력한 후 나머지 설정을 선택한다. 기본 설정으로 진행해도 무방하다.

 

3. 프로젝트 폴더로 이동한 후 서버를 실행한다.

cd [폴더명]
npm run dev

 

이제 브라우저 주소창에 http://localhost:3000로 접속해 아래와 같은 초기 화면이 표시되는 걸 확인하면 된다.

 

 

4. Next.js의 기본적인 라우팅 방법

Next.js는 기본적으로 파일 기반 라우팅을 사용하므로 폴더 구조가 매우 중요하다.

 

각 폴더 안에 있는 page.js (타입스크립트를 사용하는 경우 page.tsx) 에 작성된 내용이 페이지에 표시된다.

폴더명은 원하는 URL과 동일하게 설정해 두면 된다. 예를 들어 dashboard 안에 page.tsx 파일을 생성해 아래 코드를 붙여 넣어 보자.

export default function Dashboard() {
    return (
      <div>
        <p>This is the Dashboard page.</p>
      </div>
    );
}

 

그 다음 http://localhost:3000/dashboard 에 접속하여,

This is the Dashboard page. 라는 문구가 표시되는 것을 확인하면 된다.

 

 

5. Next.js의 동적 라우팅 방법

 

동적 라우팅은 게시판 상세 페이지에서 페이지 번호에 따라 다른 내용을 표시해야 하는 경우 사용된다.

예를 들어 pages/1로 접속하면 1번 게시물의 내용이 표시되고, pages/2로 접속하면 2번 게시물 내용을 표시해야 하는 경우처럼 말이다.

 

[slug]라는 폴더를 dashboard 아래에 추가하고, 그 안에 page.tsx를 생성하여 아래 코드를 붙여 넣어 보자.

export default function Page({ params }: { params: { slug: string } }) {
  return <div>My Post: {params.slug}</div>
}

 

http://localhost:3000/dashboard/test 로 접속했을 때,

아래 화면처럼 표시되는 것을 확인하면 된다.

 

일단은 여기까지 진행하고 다음 포스팅에서는,

CSS 스타일링하는 방식과 Vercel을 이용해 배포하는 방식까지 설명해 보려고 한다.