Next 설치

• 설치 명령어 : npx create-next-app@latest .
• @latest : 최신버전
• 위 명령어를 실행하면 몇 가지 옵션을 선택할 수 있다.

• Would you like to use TypeScript? No / Yes
  Would you like to use ESLint? No / Yes
  Would you like to use Tailwind CSS? No / Yes
  Would you like to use src/ directory? No / Yes
  Would you like to use App Router? (recommended) No / Yes
  Would you like to customize the default import alias? No / Yes

1. TypeScript 사용 유무
2. ESLint 사용 유무
3. Tailwind 사용 유무
4. ‘src/’ directory 에 소스코드를 저장할 지
5. App Router 사용 유무
6. import alias 사용 유무

---

Next.js 실행

• 개발 서버 실행 : npm run dev
• 배포를 위한 빌드 : npm run build
• 빌드된 서비스 실행 : npm run start

---

레이아웃 컴포넌트(layout.js)

app 폴더 내에 위치한 layout.js 파일은 프로젝트의 기본 레이아웃을 정의하는 역할을 한다. 이 파일에서는 네비게이션, 푸터 등을 포함하여 사이트의 공통 요소를 구성할 수 있다.

---

Server Component / Client Component

• 리액트18 버전 부터 Server Component 개념이 추가되었다.

Server Component (SSR 시나리오)

Server Component는 서버에서 실행되는 컴포넌트로. 이를 통해 서버 사이드 렌더링(SSR)을 지원하며, 클라이언트와 서버 간 데이터 흐름을 더욱 효율적으로 관리할 수 있다. 주요 특징은 다음과 같다

• 서버에서 렌더링되기 때문에 초기 로딩 속도 향상 (사용자 경험 개선)
• 검색 엔진 최적화(SEO) 향상
• 동적 데이터 로딩을 위해 서버 사이드에서 API 호출 및 데이터 헨들링이 가능
• 클라이언트 사이드 렌더링보다 성능면에서 우수
• 복잡한 데이터 로딩과 처리를 서버에서 관리하여 클라이언트 부담 감소.

Client Component (CSR 시나리오)

Client Component는 클라이언트 측에서 실행되는 컴포넌트로, 동적으로 로딩되거나 상호 작용하는 부분에 사용된다. 주로 CSR(클라이언트 사이드 렌더링) 시나리오에서 활용된다. 주요 특징은 다음과 같다

• 클라이언트에서 렌더링되기 때문에 인터랙티브한 요소나 빠른 변화가 필요한 부분에 적합
• 클라이언트 측에서 발생하는 로직을 더욱 효과적으로 관리 가능
• 빠른 사용자 인터랙션 및 동적인 UI를 제공
• 필요한 컴포넌트만 로드하여 초기 페이지 로딩 시간을 최소화
• 동적 로딩을 통해 필요한 시점에 로드 가능

---

참고

• 유튜브 생활코딩
• Next 공식 문서