Next.js 15 + React 19를 기반으로 프로젝트를 생성하기

1. 환경 설정

• Node.js 및 npm 설치:
  Node.js 공식 홈페이지에서 최신 LTS 버전을 다운로드 및 설치합니다.
  터미널에서 다음 명령어로 버전을 확인하여 올바르게 설치되었는지 확인합니다.

node -v
npm -v

---

2. 프로젝트 생성

Next.js는 기본적으로 React를 포함하고 있으므로 별도로 React를 설치할 필요 없이 Next.js를 통해 프로젝트를 시작할 수 있습니다.

• create-next-app 사용:
  터미널에서 아래 명령어를 입력하여 새 프로젝트를 생성합니다.
  @latest 옵션은 최신 버전의 create-next-app을 사용함을 의미합니다.참고:
  "my-next-project"는 프로젝트 이름입니다. 원하는 이름으로 변경할 수 있습니다.
• 옵션 선택:
  명령어 실행 후 CLI에서 TypeScript, ESLint, Tailwind CSS 등 추가 옵션에 대한 질문이 나오면 원하는 설정을 선택합니다.

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

---

3. 프로젝트 디렉터리로 이동 및 개발 서버 실행

• 프로젝트 디렉터리 이동:

cd my-next-project

• 개발 서버 실행:
  아래 명령어로 개발 서버를 시작합니다.브라우저에서 http://localhost:3000 주소로 접속하면 기본 Next.js 페이지가 표시됩니다.

npm run dev

---

4. 프로젝트 구조 이해

Next.js 프로젝트의 주요 디렉터리와 파일은 다음과 같습니다.

• pages 디렉터리:
  라우팅에 사용되는 페이지 컴포넌트들이 위치합니다. 예를 들어, pages/index.js는 루트 경로(/)에 해당하는 페이지입니다.
• public 디렉터리:
  정적 파일(이미지, 폰트 등)을 보관합니다.
• next.config.js:
  Next.js의 설정 파일로, 빌드 및 런타임 옵션을 설정할 수 있습니다.
• package.json:
  프로젝트의 의존성, 스크립트 및 기타 설정 정보를 포함합니다.

---

5. 예제 코드 작성

아래는 pages/index.js에 작성할 수 있는 간단한 홈 페이지 컴포넌트 예제입니다.

/**
 * 홈 페이지 컴포넌트
 *
 * 이 컴포넌트는 Next.js 기반 React 애플리케이션의 기본 페이지를 렌더링합니다.
 *
 * @returns {JSX.Element} 렌더링된 홈 페이지 컴포넌트
 */
const HomePage = () => {
  return (
    <div>
      <h1>Next.js와 React 프로젝트에 오신 것을 환영합니다!</h1>
      <p>이 프로젝트는 Next.js 15와 React 19를 기반으로 합니다.</p>
    </div>
  );
};

export default HomePage;

추가 팁:

• components 폴더를 생성하여 재사용 가능한 컴포넌트를 별도로 관리할 수 있습니다.
• 각 컴포넌트 파일에 JSDoc 주석을 추가하면, 코드 유지보수와 협업에 큰 도움이 됩니다.

---

6. 추가 개발 및 배포

• 추가 개발:
  필요에 따라 새로운 페이지를 생성하거나 컴포넌트를 추가하여 애플리케이션을 확장합니다.
• 프로덕션 빌드:
  개발이 완료되면, 다음 명령어를 사용해 애플리케이션을 빌드할 수 있습니다.

npm run build

• 프로덕션 서버 실행:
  빌드가 완료되면 아래 명령어로 프로덕션 서버를 시작할 수 있습니다.

npm run start

• 배포:
  Next.js 애플리케이션은 Vercel, Netlify, AWS 등 다양한 플랫폼에 쉽게 배포할 수 있습니다.