Next.js 설치 및 기본 사용법(설치, 구조,기본페이지생성,라우팅,서버실행)

Next.js는 간단한 설치 과정으로 시작해 다양한 기능을 빠르게 테스트해볼 수 있는 React 프레임워크입니다. 이 글에서는 Next.js 프로젝트의 설치부터 기본 페이지 생성, 라우팅 설정까지 기본 사용법을 설명합니다.

목차

1. Next.js 설치하기
2. 프로젝트 구조 이해하기
3. 기본 페이지 생성하기
4. Next.js의 파일 기반 라우팅
5. 개발 서버 실행하기

---

1. Next.js 설치하기

Next.js 프로젝트를 시작하기 위해 먼저 Node.js가 설치되어 있어야 합니다.
Node.js가 설치된 환경에서 아래의 명령어를 통해 Next.js 프로젝트를 생성합니다.

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

 

---

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

Next.js 프로젝트가 생성되면 아래와 같은 기본 구조를 확인할 수 있습니다.

• pages/ : 페이지를 구성하는 파일들이 위치하는 폴더로, 파일 기반 라우팅을 통해 페이지 경로를 자동으로 생성합니다.
• public/ : 정적 파일을 보관하는 폴더로, 이미지, 폰트 파일 등을 넣어둡니다.
• styles/ : 기본적인 스타일 파일이 포함되어 있습니다.
• next.config.js : Next.js 설정 파일로, 추가적인 설정이 필요할 때 수정할 수 있습니다.

---

3. 기본 페이지 생성하기

Next.js는 파일 기반 라우팅을 지원하므로 pages 폴더에 파일을 추가하는 것만으로도 페이지가 자동으로 생성됩니다. 예를 들어 about.js 파일을 생성하여 About 페이지를 만들어보겠습니다.

// pages/about.js
export default function About() {
  return <h1>About Page</h1>
}

이제 /about 경로로 접속하면 "About Page"라는 텍스트가 표시됩니다.

---

4. Next.js의 파일 기반 라우팅

Next.js의 파일 기반 라우팅은 pages 폴더 내에 위치한 파일명을 경로로 자동 매핑합니다. 예를 들어 pages/contact.js 파일을 추가하면 /contact 경로로 접속할 수 있습니다.

4.1 동적 라우팅

경로의 일부가 동적으로 변경될 필요가 있을 때는 대괄호([])를 사용하여 동적 페이지를 생성할 수 있습니다. 예를 들어, pages/posts/[id].js 파일을 생성하면 posts/1, posts/2 등 다양한 경로로 접근할 수 있습니다.

// pages/posts/[id].js
import { useRouter } from 'next/router'

export default function Post() {
  const router = useRouter()
  const { id } = router.query

  return <p>Post ID: {id}</p>
}

 

---

5. 개발 서버 실행하기

Next.js 프로젝트를 생성한 후, 개발 서버를 실행하여 작업 내용을 바로 확인할 수 있습니다. 프로젝트 루트에서 다음 명령어를 입력합니다.

npm run dev

 

---