📌 Next.js의 핵심 개념과 실전 활용법: 기본, 고급, 그리고 최신 트렌드 - Next.js 프로젝트 설정 및 폴더 구조 이해

📌 Next.js의 핵심 개념과 실전 활용법: 기본, 고급, 그리고 최신 트렌드 - Next.js 프로젝트 설정 및 폴더 구조 이해

Next.js를 사용하려면 먼저 프로젝트를 설정하고, 폴더 구조를 이해하는 것이 중요합니다.
이번 글에서는 Next.js 프로젝트 생성 방법, 필수적인 설정, 그리고 폴더 구조를 분석합니다. 🚀

---

2.1 Next.js 프로젝트 생성 및 초기 설정

Next.js 프로젝트를 시작하는 방법은 create-next-app을 사용하는 것입니다.
아래 명령어를 실행하면 Next.js 프로젝트가 자동으로 설정됩니다.

✅ Next.js 프로젝트 생성 (기본 설정)

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

✅ 개발 서버 실행: http://localhost:3000에서 프로젝트 확인 가능

💡 npx create-next-app은 Next.js 공식 CLI 도구이며, 프로젝트를 자동으로 설정해 줍니다.

---

2.2 Next.js 프로젝트 설정 옵션

create-next-app을 실행할 때 여러 가지 옵션을 추가할 수 있습니다.

✅ Next.js 프로젝트 생성 시 선택 가능한 옵션

npx create-next-app@latest my-next-app --typescript --tailwind --eslint --app

옵션 설명

--typescript	TypeScript 설정 포함
--tailwind	Tailwind CSS 기본 설정 추가
--eslint	ESLint 설정 추가
--app	app 디렉터리를 사용한 최신 Next.js 구조 적용

💡 Next.js 최신 기능을 활용하려면 --app 옵션을 사용하는 것이 권장됩니다.

---

2.3 Next.js의 폴더 구조 이해

Next.js는 프로젝트 구조를 명확하게 정의하고 있으며, 핵심 디렉터리는 다음과 같습니다.

✅ Next.js 기본 폴더 구조

my-next-app/
│── app/            # Next.js 최신 라우팅 시스템 (App Router)
│── pages/          # 기존 Pages Router (선택적 사용)
│── components/     # UI 컴포넌트 저장
│── public/         # 정적 파일 (이미지, 폰트 등)
│── styles/         # CSS 또는 Tailwind 스타일 파일
│── next.config.js  # Next.js 환경 설정 파일
│── package.json    # 프로젝트 의존성 및 설정
│── .eslintrc.json  # ESLint 설정 파일
│── .gitignore      # Git에서 제외할 파일 목록

💡 Next.js 13 이상에서는 app 디렉터리를 사용하는 새로운 구조(App Router)를 기본으로 권장합니다.

---

2.4 app vs pages: 어떤 구조를 사용할까?

반응형

Next.js 13부터 app 디렉터리를 사용하는 App Router 방식이 기본이 되었지만,
기존 pages 디렉터리 기반의 Pages Router도 함께 지원됩니다.

특징 App Router (app/) Pages Router (pages/)

라우팅 방식	파일 기반 라우팅 (layout.tsx 사용)	파일 기반 라우팅 (pages/index.tsx 등)
렌더링 방식	서버 컴포넌트 기본 지원	클라이언트 컴포넌트 기본
SEO 최적화	메타데이터 API 활용	next/head 사용
데이터 페칭	fetch, server actions	getServerSideProps, getStaticProps

💡 새로운 프로젝트에서는 app 폴더를 사용하는 App Router 방식을 추천합니다.

---

2.5 Next.js 설정 파일 (next.config.js)

Next.js의 환경 설정을 변경하려면 next.config.js 파일을 수정해야 합니다.

✅ next.config.js 기본 설정 예제

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    domains: ["example.com"],  // 외부 이미지 도메인 허용
  },
};

module.exports = nextConfig;

✅ reactStrictMode: true → React의 엄격 모드 활성화
✅ swcMinify: true → SWC를 사용한 코드 최적화
✅ images.domains → 외부 이미지를 허용하는 도메인 추가

💡 next.config.js를 활용하면 Next.js의 기능을 확장하고 최적화할 수 있습니다.

---

2.6 환경 변수 설정 (.env.local)

Next.js에서는 환경 변수를 .env.local 파일을 사용하여 관리할 수 있습니다.

✅ .env.local 설정 예제

NEXT_PUBLIC_API_URL=https://api.example.com
DATABASE_URL=postgres://user:password@localhost:5432/mydb

✅ NEXT_PUBLIC_으로 시작하는 변수는 클라이언트에서도 접근 가능
✅ DATABASE_URL과 같은 일반 변수는 서버에서만 접근 가능

💡 API 키, 데이터베이스 연결 정보 등은 .env.local을 활용하여 관리해야 합니다.

---

2.7 Next.js 프로젝트 초기 설정 체크리스트

✅ create-next-app을 사용하여 프로젝트 생성
✅ --typescript, --tailwind 등 필요한 옵션 추가
✅ app 또는 pages 디렉터리 선택하여 라우팅 방식 결정
✅ next.config.js에서 기본적인 설정 적용
✅ .env.local을 사용하여 환경 변수 관리

💡 이제 Next.js 프로젝트를 설정하고, 본격적으로 개발을 시작할 준비가 완료되었습니다!

---

2.8 결론: Next.js 프로젝트 설정 및 폴더 구조 이해

✅ Next.js 프로젝트는 create-next-app으로 쉽게 생성 가능
✅ Next.js 13 이상에서는 app 디렉터리를 사용하는 App Router 방식 추천
✅ 라우팅 방식에 따라 pages(기존) vs app(최신) 중 선택 가능
✅ 환경 설정을 위한 next.config.js 및 .env.local 활용법 익히기

이제 Next.js 프로젝트가 어떻게 구성되는지 이해했습니다!
다음 글에서는 **"Next.js에서의 라우팅과 페이지 구성"**을 다루겠습니다. 🚀

---

🔎 다음 글 예고: Next.js에서의 라우팅과 페이지 구성

📌 다음 편: 3. Next.js에서의 라우팅과 페이지 구성

---