노마드코더 Next.js 강의 1챕터 요약

1. Next.js란?

• Next.js는 React 기반의 프레임워크로, 파일 시스템 기반 라우팅과 서버사이드 렌더링(SSR), 클라이언트사이드 렌더링(CSR)을 모두 지원합니다.
• 초기 로딩 속도가 빠르고 SEO에 유리한 웹앱을 만들 수 있습니다.

2. 프로젝트 초기 설정

1. 프로젝트 폴더 생성 후 초기화
   npm init -y
2. 필수 패키지 설치
   npm install next@latest react@latest react-dom@latest
3. app 폴더 생성 후, page.tsx(혹은 page.jsx) 파일을 만들어 첫 페이지 작성
4. 개발 서버 실행
   npm run dev

3. 파일 기반 라우팅

• Next.js는 폴더와 파일명으로 URL 경로를 자동으로 만들어줍니다.
• 예시
  app/dashboard/setting/page.tsx → /dashboard/setting
• 폴더 구조만 잘 잡으면, 라우팅을 따로 신경 쓸 필요가 없습니다.

4. 주요 파일과 기능

• page.tsx: 해당 경로의 페이지 UI를 담당하는 React 컴포넌트 파일
• layout.tsx: 여러 페이지에서 공통으로 사용하는 레이아웃 컴포넌트
• not-found.tsx: 404 등 에러 페이지를 직접 커스텀 가능
• usePathname: 현재 경로(pathname)를 클라이언트 컴포넌트에서 가져올 때 사용

5. 렌더링 방식

• SSR(서버사이드 렌더링): 서버에서 React 컴포넌트를 HTML로 변환해 브라우저로 전달
• Hydration(수분 충전): 브라우저가 받은 HTML을 자바스크립트로 인터랙티브하게 변환
• CSR(클라이언트사이드 렌더링): 페이지 이동 등은 CSR로 처리해 부드러운 UX 제공

6. 핵심 요약

• Next.js는 React의 한계를 보완한 프레임워크
• 파일/폴더 구조만으로 라우팅 및 페이지 구현 가능
• SSR과 CSR을 적절히 활용해 빠르고 SEO에 강한 웹앱 개발 가능
• 다양한 특수 파일(not-found.tsx, layout.tsx 등)과 훅(usePathname) 제공

정리:
Next.js는 폴더와 파일만 잘 관리하면, 라우팅과 렌더링을 쉽게 처리할 수 있는 강력한 프레임워크입니다. 서버와 클라이언트 렌더링의 장점을 모두 누릴 수 있어, 현대적인 웹 개발에 매우 적합합니다.