icon안동민 개발노트

Next.js 14 프로젝트 생성

 이번 절에서는 create-next-app을 사용하여 Next.js 14 프로젝트를 생성하는 방법을 단계별로 안내합니다.

 이 도구는 Next.js 애플리케이션을 쉽고 빠르게 시작할 수 있도록 도와줍니다.

create-next-app 사용하기

 터미널을 열고 다음 명령어를 실행합니다.

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

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

초기 설정 옵션

 명령어를 실행하면 몇 가지 설정 옵션에 대한 질문이 나타납니다. 각 옵션에 대해 설명하겠습니다.

  1. TypeScript 사용 여부
Would you like to use TypeScript? › No / Yes

 TypeScript를 사용하면 정적 타입 검사를 통해 더 안정적인 코드를 작성할 수 있습니다.

  1. ESLint 사용 여부
Would you like to use ESLint? › No / Yes

 ESLint는 코드 품질과 스타일을 일관되게 유지하는 데 도움을 줍니다.

  1. Tailwind CSS 사용 여부
Would you like to use Tailwind CSS? › No / Yes

 Tailwind CSS는 유틸리티 우선 CSS 프레임워크로, 빠른 UI 개발을 가능하게 합니다.

  1. src/ 디렉토리 사용 여부
Would you like to use `src/` directory? › No / Yes

 src/ 디렉토리를 사용하면 프로젝트 구조를 더 체계적으로 관리할 수 있습니다.

  1. App Router 사용 여부
Would you like to use App Router? › No / Yes

 App Router는 Next.js 13부터 도입된 새로운 라우팅 시스템입니다. 이 자습서에서는 App Router를 사용할 것이므로 'Yes'를 선택합니다.

  1. 사용자 정의 import 별칭 사용 여부
Would you like to customize the default import alias? › No / Yes

 import 별칭을 사용하면 더 깔끔하고 관리하기 쉬운 import 문을 작성할 수 있습니다.

 각 질문에 대해 Yes/No로 답하거나 Enter를 눌러 기본값을 선택할 수 있습니다.

프로젝트 구조

 프로젝트 생성이 완료되면, 다음과 같은 기본 구조가 만들어집니다.

my-next-app/
├── app/
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.js
│   └── page.js
├── public/
│   ├── next.svg
│   └── vercel.svg
├── .eslintrc.json
├── .gitignore
├── jsconfig.json
├── next.config.js
├── package.json
├── postcss.config.js
├── README.md
└── tailwind.config.js
  • app/ : App Router를 위한 디렉토리입니다. 페이지와 레이아웃이 여기에 위치합니다.
  • public/ : 정적 파일을 위한 디렉토리입니다.
  • next.config.js : Next.js 설정 파일입니다.
  • package.json : 프로젝트 의존성과 스크립트가 정의된 파일입니다.

프로젝트 실행

 프로젝트 디렉토리로 이동하고 다음 명령어를 실행하여 개발 서버를 시작합니다.

cd my-next-app
npm run dev

 브라우저에서 http://localhost:3000을 열어 애플리케이션이 실행되는 것을 확인할 수 있습니다.

3장 App Router 기초와의 연결

 이렇게 생성된 프로젝트는 App Router를 기반으로 합니다. 3장 "App Router 기초"에서는 이 구조를 더 자세히 살펴보고, 라우팅, 페이지 생성, 레이아웃 사용 등을 학습하게 됩니다. 지금 생성한 프로젝트가 3장 학습의 기반이 될 것입니다.

Customization 실습

 프로젝트를 생성한 후, 다음과 같은 간단한 customization을 시도해 보세요.

  1. app/page.js 파일을 열고 내용을 수정합니다.
export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <h1 className="text-4xl font-bold mb-4">Welcome to My Next.js App!</h1>
      <p className="text-xl">Let's start building amazing things.</p>
    </main>
  )
}

  1.  변경 사항을 저장하고 브라우저에서 결과를 확인합니다.

  2.  app/globals.css 파일에 다음 스타일을 추가합니다.

body {
  background-color: #f0f0f0;
  color: #333;
}

 이러한 간단한 수정을 통해 Next.js 프로젝트의 기본 구조와 작동 방식을 이해할 수 있습니다.

Node.js 및 npm 설치프로젝트 구조 이해하기