[Next.js 14 강의] 2강 - 프로젝트 생성 및 Next.js 기본 구조 이해

안녕하세요! 그레이해커 월횽입니다. 이 강의에서는 Next.js 프로젝트를 처음부터 끝까지 설정하고, 기본 구조를 이해합니다. 프로젝트 생성 과정과 Next.js의 주요 디렉토리 및 파일 구조를 살펴보고, 기본적인 페이지와 컴포넌트를 만드는 방법을 배워보도록 하겠습니다.

 

 

1. 프로젝트 생성

 

Node.js 설치 확인

· Next.js를 사용하려면 Node.js가 설치되어 있어야 합니다. 터미널에서 node -v 명령어를 입력하여 설치된 버전을 확인합니다. 설치되어 있지 않다면 Node.js 공식 웹사이트에서 설치합니다.

 

Next.js 프로젝트 생성

· Next.js CLI를 사용하여 새 프로젝트를 생성합니다. 다음 명령어를 터미널에 입력하여 프로젝트를 생성합니다.

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

 

여기서 my-next-app은 프로젝트 디렉토리의 이름입니다. 원하는 이름으로 변경할 수 있습니다.

728x90

프로젝트 디렉토리로 이동 및 의존성 설치

· 프로젝트 폴더로 이동하여 의존성을 설치합니다.

cd my-next-app
npm install

 

 

개발 서버 실행

· 개발 서버를 실행하여 프로젝트를 로컬에서 확인합니다.

npm run dev

· 브라우저에서 http://localhost:3000을 열어 기본 페이지를 확인합니다.

 

 

2. Next.js 기본 구조 이해

 

프로젝트 구조

· Next.js 프로젝트는 기본적으로 다음과 같은 디렉토리 구조를 가집니다.

my-next-app/
├── public/
├── src/
│   ├── pages/
│   ├── components/
├── .gitignore
├── package.json
├── README.md
├── next.config.js
├── tsconfig.json (TypeScript 사용 시)
└── ...

 

반응형

public/
· 정적 파일 (예: 이미지, 폰트 등)을 저장하는 디렉토리입니다. /public 내의 파일은 / 경로에서 접근할 수 있습니다.

src/pages/
· Next.js의 페이지 컴포넌트를 저장하는 디렉토리입니다. 파일 기반 라우팅 시스템을 사용하여 URL 경로를 자동으로 생성합니다.
· 예제: index.js는 기본 홈 페이지를 렌더링하며, /about 경로를 생성하려면 about.js를 추가하면 됩니다.

src/components/
· 재사용 가능한 React 컴포넌트를 저장하는 디렉토리입니다. 프로젝트가 커질수록 컴포넌트를 구조적으로 관리하기 위해 이 디렉토리를 사용합니다.

SMALL

next.config.js
· Next.js의 설정 파일로, 프로젝트 설정을 커스터마이즈할 수 있습니다.

package.json
· 프로젝트의 의존성과 스크립트를 관리하는 파일입니다. Next.js와 관련된 의존성 및 스크립트가 정의되어 있습니다.

README.md
· 프로젝트에 대한 설명과 실행 방법을 담은 문서입니다.

 

 

3. 기본 페이지와 컴포넌트 생성

 

페이지 생성

· src/pages 디렉토리에 새로운 파일을 생성하여 페이지를 추가합니다. 예를 들어, about.js 파일을 추가하여 /about 페이지를 생성합니다.

// src/pages/about.js
export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>Welcome to the About page!</p>
    </div>
  );
}

 

컴포넌트 생성

· src/components 디렉토리에 새로운 컴포넌트를 추가합니다. 예를 들어, Header.js라는 컴포넌트를 생성합니다.

// src/components/Header.js
export default function Header() {
  return (
    <header>
      <h1>My Next.js App</h1>
    </header>
  );
}

 

·  생성한 컴포넌트를 페이지에 추가합니다.

// src/pages/index.js
import Header from '../components/Header';

export default function Home() {
  return (
    <div>
      <Header />
      <h1>Welcome to the Home Page!</h1>
    </div>
  );
}

 

 

- 이전 수업 목록