Next.js의 주요 개념
파일 기반 라우팅: pages 또는 app 폴더 내에 파일을 생성하면, 해당 파일이 자동으로 라우트로 매핑됩니다.
서버사이드 렌더링(SSR): 기본적으로 app 폴더 내의 파일들은 서버사이드에서 렌더링됩니다. 서버사이드 렌더링은 초기 로딩 시간을 줄이고, SEO를 개선하는 데 유리하다.
정적 사이트 생성(SSG): 빌드 시점에 페이지를 생성하여, 요청 시점에 빠르게 제공할 수 있다.
Next.js 폴더 구조
보편적으로 사용하는 Next.js 폴더에 대해 간략하게 정리하였다.
- pages/
- 정적 파일을 보관한다.
- 예: 이미지, 폰트, favicon 등.
-
src/ 폴더
pages/ 폴더
-
Next.js의 파일 기반 라우팅을 담당한다.
-
예: index.tsx는 루트 페이지, about.tsx는 /about 페이지.
api/ 폴더
-
서버리스 함수(API 라우트)를 정의한다.
-
_app.tsx: 커스텀 App 컴포넌트를 정의한다.
-
_document.tsx: 커스텀 Document 컴포넌트를 정의한다.
components/
-
재사용 가능한 UI 컴포넌트를 보관한다.
-
예: Header, Footer, Card , list 컴포넌트.
styles/
-
글로벌 스타일 또는 CSS 모듈을 보관한다.
-
예: globals.css는 글로벌 스타일, Home.module.css는 Home 페이지 전용 스타일.
lib/
-
유틸리티 함수나 API 호출 로직을 보관한다.
hooks/
-
커스텀 React 훅을 보관한다.
-
예: API 데이터를 가져오는 커스텀 훅
서버사이드 렌더링과 클라이언트사이드 렌더링
서버사이드 렌더링
- app 폴더 내에서 동작한다.
- 데이터를 서버에서 미리 가져와서 페이지를 생성한다.
클라이언트사이드 렌더링
- pages 폴더 내에서 주로 동작한다.
- 페이지가 로드된 후, 클라이언트에서 데이터를 가져온다.
- useEffect와 같은 React 훅을 사용하여 클라이언트에서 데이터를 가져온다.
"use client" 선언
-
app 폴더 내에서 클라이언트 사이드에서만 실행해야 하는 코드는 파일 상단에 "use client" 선언을 추가해야 한다.
-
이는 클라이언트 전용 코드임을 명시하여, Next.js가 이를 클라이언트 사이드 번들에 포함시키도록 한다.
