Next.js 알아보기: 개념부터 최신 기능까지

 

최근 프런트엔드 개발에서 Next.js가 큰 주목을 받고 있습니다. 이번 글에서는 Next.js의 등장 배경부터 개념, 설치 방법, 주요 특징, 그리고 최신 버전인 Next.js 15에서 추가된 기능까지 한 번에 정리해 보겠습니다.

 

Next.js의 등장 배경

과거 웹 개발은 주로 서버 측에서 이루어졌지만, 인터랙션이 많은 웹 환경이 증가하면서 클라이언트 측 처리가 중요해졌습니다. 이에 등장한 Client Side Rendering(CSR)은 성능과 SEO 측면에서 한계를 보였고, 이를 보완하기 위해 서버에서 페이지를 만들어 보내는 Server Side Rendering(SSR)이 필요해졌습니다. 이런 요구사항을 충족하기 위해 등장한 것이 바로 Next.js입니다.

 

Next.js란?

Next.js는 풀스택 웹 애플리케이션을 만들 수 있는 React 기반 프레임워크로, 복잡한 설정(configuration)을 추상화하여 개발자가 개발에만 전념할 수 있도록 지원합니다.

설치 및 기본 폴더 구조

Next.js는 간단한 명령어로 설치할 수 있으며, 프로젝트를 생성하면 다음과 같은 기본 폴더 구조가 제공됩니다:

•  

프로젝트 생성 명령어 예시:

npx create-next-app my-next-app
cd my-next-app
npm run dev

Next.js 주요 특징

• 서버 사이드 렌더링(SSR): 각 요청마다 서버에서 HTML 페이지를 생성하여 초기 렌더링 성능과 SEO를 개선합니다.
• 정적 사이트 생성(SSG): 빌드 단계에서 HTML 페이지를 생성하여 빠른 로딩과 효율적인 캐싱을 제공합니다.
• Hydration: 서버에서 미리 렌더링 된 HTML에 React를 연결하여 클라이언트 측에서 DOM을 제어할 수 있게 해 줍니다.
• 라우팅 시스템: Page 라우터와 App 라우터를 지원하며, 다양한 라우팅 전략을 제공합니다.
• 데이터 페칭: 서버에서 효율적으로 데이터를 호출하여 사용하는 방식을 지원합니다.

 

Next.js 라우팅 시스템

Next.js의 기능 중 가장 중요한 라우팅에 대해 좀 더 설명하겠습니다. 앞서 언급한 것처럼 두 가지 방식으로 제공됩니다.

 

- Pages Router (기존 방식): pages 폴더 안에 파일을 생성하면 자동으로 해당 파일명이 URL 경로가 됩니다.

pages router

 

 

- App Router (최신 방식): app 폴더를 기반으로 동작하며, 더 강력한 레이아웃 관리, 서버 구성 요소, 스트리밍 렌더링 등을 제공합니다.

• 서버 컴포넌트와 클라이언트 컴포넌트를 구분하여 사용할 수 있습니다.
• layout.js를 활용해 공통 레이아웃을 쉽게 관리할 수 있습니다.

app router

Next.js 15의 새로운 기능

Next.js 15에서는 다음과 같은 주요 기능이 추가되었습니다.

• 비동기 요청 API 개선: 초기 로딩 속도를 높이기 위해 비동기 요청 방식을 최적화했습니다.
• 기본 캐싱 설정 변경: GET 요청 및 클라이언트 내비게이션의 캐싱 기본값이 변경되어 사용자가 명시적으로 설정하도록 요구합니다.
• React 19 호환성 지원: React 최신 버전인 19와의 완벽한 호환성을 제공합니다.
• 서버 컴포넌트와 클라이언트 컴포넌트: 기본적으로 생성된 모든 컴포넌트는 서버 컴포넌트이며, 클라이언트 컴포넌트 사용 시 컴포넌트 상단에 'use client'를 선언하여 설정합니다.

 

마무리

Next.js는 지속적으로 발전하며 프런트엔드 개발자의 필수적인 도구로 자리 잡고 있습니다. 성능 최적화와 개발 생산성 향상을 목표로 한다면, Next.js를 적극적으로 활용해 보시기를 추천합니다!