Next.js란?

Next.js란?

Next.js는 React 라이브러리를 기반으로 구축된 웹 프레임워크입니다.

React가 사용자 인터페이스(UI)를 만드는 데 집중하는 라이브러리라면, Next.js는 서버사이드 렌더링(SSR), 정적 사이트 생성(SSG), 라우팅, 코드 분할 등 웹 애플리케이션 개발에 필요한 핵심 기능들을 통합하여 생산성과 성능을 향상한 도구이며, 과거 React만으로 웹을 개발할 때 복잡하게 설정해야 했던 부분들을 Next.js는 직관적이고 쉬운 방식으로 해결해줍니다.

---

다양한 렌더링 방식

• 서버사이드 렌더링 (SSR - Server-Side Rendering): 사용자가 페이지를 요청할 때마다 서버에서 HTML을 미리 렌더링하여 클라이언트에 전송합니다. 이는 초기 로딩 속도를 크게 개선하고, 검색 엔진 최적화(SEO)에 매우 유리합니다.
  
  
• 정적 사이트 생성 (SSG - Static Site Generation): 빌드 시점에 모든 페이지를 HTML 파일로 미리 생성합니다. 블로그, 마케팅 페이지, 문서 사이트와 같이 콘텐츠 변경이 적은 경우에 사용하면 CDN을 통해 매우 빠른 속도로 페이지를 제공할 수 있습니다.
  
  
• 증분 정적 재생성 (ISR - Incremental Static Regeneration): SSG의 장점을 유지하면서 주기적으로 데이터를 업데이트하여 페이지를 다시 생성할 수 있는 기능입니다. 정적인 페이지의 최신성을 보장합니다.
  
  
• 클라이언트 사이드 렌더링 (CSR - Client-Side Rendering): 기존 React 앱처럼 클라이언트(브라우저)에서 페이지를 렌더링하는 방식도 계속 지원하며, 페이지별로 렌더링을 유연하게 선택할 수 있습니다.

---

파일 시스템 기반 라우팅 (File-system based Routing)

app 또는 pages 디렉토리 내에 파일을 생성하면 해당 파일의 경로가 자동으로 URL 주소가 됩니다. 복잡한 라우팅 설정을 할 필요 없이 직관적으로 페이지를 추가하고 관리할 수 있습니다. 즉, 폴더명이 곧 URL 경로로 정해집니다. 예를 들어, app/about/page.js 파일을 만들면 /about 경로가 자동으로 생성됩니다.

---

API 라우트 (API Routes)

 Next.js 프로젝트 내에서 별도의 백엔드 서버 없이 간단한 API 엔드포인트를 쉽게 만들 수 있습니다. app/api 폴더 안에 파일을 생성하여 서버리스 함수처럼 활용할 수 있습니다.

ext.js 공식 웹사이트: https://nextjs.org/

Next.js 공식 문서 : https://nextjs.org/docs