[Next.js] 현대적인 웹 애플리케이션 개발을 위한 React 프레임워크

Next.js Docs

Next.js: 현대적인 웹 애플리케이션 개발을 위한 React 프레임워크

정의

Next.js는 사용자 경험(User Experience)과 개발자 경험(Developer Experience)을 극대화하기 위해 설계된 React 기반의 풀스택 웹 프레임워크입니다. 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR) 등 다양한 렌더링 방식을 지원하며, 간편한 라우팅, API 엔드포인트 생성, 최적화된 빌드 및 배포 기능을 제공하여 현대적인 웹 애플리케이션 개발을 효율적으로 만들어줍니다.

---

핵심 개념

1. 파일 시스템 기반 라우팅 (File-system Routing):
   • pages 디렉터리 내의 파일 구조를 기반으로 자동으로 라우트가 생성됩니다.
   • 예시: pages/about.js는 /about 경로에 매핑됩니다.
   • 동적 라우팅 (pages/posts/[id].js) 및 Catch-all 라우팅 (pages/blog/[...slug].js)을 지원합니다.
2. 다양한 렌더링 방식 (Rendering Strategies):
   • 서버 사이드 렌더링 (SSR - Server-Side Rendering): 각 요청마다 서버에서 페이지를 렌더링하여 초기 로딩 속도를 개선하고 SEO에 유리합니다. (getServerSideProps)
   • 정적 사이트 생성 (SSG - Static-Site Generation): 빌드 시점에 페이지를 미리 렌더링하여 매우 빠른 로딩 속도와 높은 보안성을 제공합니다. (getStaticProps, getStaticPaths)
   • 클라이언트 사이드 렌더링 (CSR - Client-Side Rendering): 초기 HTML은 최소한으로 제공하고, JavaScript를 통해 클라이언트 측에서 페이지를 렌더링합니다. (기본 동작)
   • Incremental Static Regeneration (ISR): 정적으로 생성된 페이지를 백그라운드에서 업데이트하여 정적 사이트의 장점과 데이터 업데이트의 유연성을 결합합니다.
3. 데이터 가져오기 (Data Fetching):
   • getServerSideProps: 서버 사이드 렌더링을 위한 데이터 fetching 함수입니다. 매 요청 시 서버에서 실행됩니다.
   • getStaticProps: 정적 사이트 생성을 위한 데이터 fetching 함수입니다. 빌드 시점에 한 번 실행됩니다.
   • getStaticPaths: 동적 라우팅 페이지의 가능한 모든 경로를 미리 생성하기 위해 getStaticProps와 함께 사용됩니다.
   • 클라이언트 사이드 데이터 fetching: useEffect와 fetch 또는 써드파티 라이브러리 (swr, react-query)를 사용하여 클라이언트 측에서 데이터를 가져올 수 있습니다.
4. API 라우팅 (API Routes):
   • pages/api 디렉터리 내에 JavaScript 파일을 생성하여 손쉽게 백엔드 API 엔드포인트를 구축할 수 있습니다.
   • Node.js 환경에서 실행되며, 요청 및 응답 객체를 제공합니다.
5. 스타일링 (Styling):
   • CSS Modules: 컴포넌트 스코프 CSS를 제공하여 스타일 충돌을 방지합니다. (.module.css 파일)
   • Styled JSX: JavaScript 내에서 CSS를 작성할 수 있도록 지원합니다.
   • CSS-in-JS 라이브러리: Emotion, styled-components 등 다양한 CSS-in-JS 라이브러리를 통합하여 사용할 수 있습니다.
   • Tailwind CSS: 유틸리티 클래스 기반의 CSS 프레임워크를 손쉽게 통합할 수 있습니다.

---

주요 기능

1. Hot Module Replacement (HMR): 코드 변경 사항을 저장하면 전체 페이지 새로고침 없이 변경된 모듈만 업데이트하여 개발 생산성을 향상시킵니다.
2. 자동 코드 분할 (Automatic Code Splitting): 각 페이지별로 필요한 코드만 번들링하여 초기 로딩 시간을 최적화합니다.
3. 최적화된 이미지 처리 (next/image): 이미지 포맷 최적화, 반응형 이미지, 레이아웃 시프트 방지 등 이미지 관련 성능을 자동으로 관리해주는 컴포넌트를 제공합니다.
4. 폰트 최적화 (next/font): 웹 폰트 로딩 성능을 개선하는 기능을 제공합니다.
5. 국제화 (i18n) 라우팅: 다국어 지원 웹 애플리케이션 개발을 위한 편리한 라우팅 및 로케일 관리를 제공합니다.
6. 미들웨어 (Middleware): 요청이 처리되기 전에 코드를 실행하여 리다이렉션, 인증, 로깅 등 다양한 작업을 수행할 수 있습니다. (_middleware.js 파일)
7. 정적 내보내기 (Static Export): Node.js 서버 없이 정적인 HTML, CSS, JavaScript 파일로 애플리케이션을 빌드하여 CDN과 같은 환경에 배포할 수 있습니다.
8. TypeScript 지원: 별도의 설정 없이 TypeScript를 기본적으로 지원하여 개발 안정성을 높입니다.
9. Vercel 플랫폼과의 완벽한 통합: Next.js 개발사인 Vercel에서 제공하는 호스팅 플랫폼과의 최적화된 연동을 통해 간편하고 효율적인 배포 및 관리가 가능합니다.

---

이 문서는 Next.js의 핵심적인 정의, 개념, 기능을 간결하게 정리한 자료입니다. 더 자세한 내용은 Next.js 공식 문서를 참고하시는 것을 추천드립니다.

Introduction | Next.js