Next.js 설치하기

안녕하세요, 웹 개발자 여러분!
오늘은 Next.js설치 방법을 알려드리려고 합니다.

여러분도 아시다시피, Next.js는 요즘 대세죠? 저도 처음에는 살짝 어려워 보였지만, 실제로 해보니 너무 간단하고 강력하더라구요!

---

Next.js 설치 방법

먼저, 다음 명령어를 실행해 Next.js 프로젝트를 만듭니다:

$ npx create-next-app@latest .

령어를 입력하면 다음과 같은 질문들이 나옵니다. 하나씩 답해볼게요!

1. Would you like to use TypeScript?: 원하시면 Yes, 아니면 No.
2. Would you like to use ESLint?: 코드 품질을 위해 Yes 추천!
3. Would you like to use Tailwind CSS?: 당연히 Yes! 
4. Would you like to use src/ directory?: Yes로 선택해 프로젝트 구조를 깔끔하게!
5. Would you like to use App Router? (recommended): Yes로 새로운 라우터 기능을 활용!
6. Would you like to customize the default import alias (@/*)?: Yes로 설정하고 @/* 사용!

 

모두 선택하면 다음과 같이 새로운 Next.js 앱이 생성됩니다:

Creating a new Next.js app in C:\Users\admin\Desktop\Nextjs.

Using npm.

Initializing project with template: app-tw

기본 구조

NextJS 보일러 플레이트의 기본 구조 중 중요한 부분만 살펴보겠습니다.

1. src
   1. src 폴더는 애플리케이션에 필요한 모든 구성 요소, 경로, 논리 요소가 포함되어 있습니다. 실질적인 애플리케이션의 구동 로직은 이 폴더 안에 다 있다고 해도 과언이 아닙니다.
2. src/app
   1. Next.JS 14에서 새롭게 추가된 앱 라우터는 app 폴더를 만들어줌으로써 사용할 수 있습니다. 이러한 경로 구성 요소도 src 폴더 하위에 포함됩니다.
3. public
   1. 이미지 등 애플리케이션의 모든 정적 자산을 포함합니다.
4. next.config.js
   1. next.js 구성 파일입니다. 특별한 사유가 아니면 우리가 직접 구성을 건드릴 일은 없습니다.