Next.js

Next.js 란? Next.js 기본 개념 정리

understandJ 2025. 3. 11. 11:41

Next.js 란?

 

Next.js는 React 기반의 오픈 소스 웹 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR) 등을 지원하여 현대적인 웹 애플리케이션을 쉽게 구축할 수 있게 해준다. Vercel에서 개발 및 유지보수를 담당하고 있으며, 복잡한 웹 애플리케이션 구축 과정을 간소화하면서도 최적의 성능을 보장하여 React 생태계에서 매우 인기 있는 프레임워크 중 하나이다.

 

Next.js의 핵심 기능과 특징

다양한 렌더링 방식 지원

Next.js는 웹 애플리케이션의 요구사항에 따라 다양한 렌더링 전략을 선택적으로 적용할 수 있다.

 

서버 사이드 렌더링(SSR): 동적 콘텐츠의 최적 솔루션

서버 사이드 렌더링은 사용자의 각 요청마다 서버에서 실시간으로 페이지를 생성하여 완성된 HTML을 제공한다. 최신 데이터를 보여주어야 하는 컨텐츠에 적합하다.

export async function getServerSideProps() {
  const response = await fetch('<https://api.example.com/data>');
  const data = await response.json();
  
  return {
    props: { data }, // 페이지 컴포넌트에 props로 전달된다.
  }
}

 

SSR의 주요 이점은 다음과 같다.

  • 실시간 데이터 반영: 항상 최신 데이터를 기반으로 페이지가 생성되어 실시간 정보가 중요한 서비스에 적합하다.
  • SEO 최적화: 검색 엔진 크롤러에게 완전한 HTML 콘텐츠를 제공하여 색인 생성에 유리하다.
  • 초기 로드 경험 개선: 사용자는 JavaScript가 완전히 로드되기 전에도 콘텐츠를 볼 수 있다.

 

정적 사이트 생성(SSG)

SSG는 빌드 시점에 모든 페이지를 미리 생성하여 CDN을 통해 배포한다. 블로그나 문서 사이트 같이 자주 변경되지 않는 컨텐츠에 적합하다.

export async function getStaticPaths() {
  // 모든 블로그 포스트 경로 반환
  return { paths: [...], fallback: false };
}

export async function getStaticProps({ params }) {
  // 특정 슬러그에 해당하는 블로그 데이터 가져오기
  return { props: { post: ... } };
}

 

SSG의 장점은 다음과 같다.

  • 최고의 성능: 사전 렌더링된 HTML 파일은 CDN을 통해 전 세계에서 빠르게 제공된다.
  • 서버 부하 감소: 페이지가 미리 생성되므로 서버 자원을 절약할 수 있다.
  • 보안 강화: 정적 파일이므로 공격 표면이 적어 보안 위험이 낮다.

 

증분 정적 재생성(ISR)

ISR은 Next.js의 혁신적인 기능으로, 정적 페이지의 속도와 동적 콘텐츠의 최신성을 결합하여 일정 시간마다 또는 특정 조건에 따라 페이지를 재생성하는 방식이다. 주기적으로 업데이트되는 컨텐츠에 적합하다.

export async function getStaticProps({ params }) {
  const product = await fetchProduct(params.id);
  
  return {
    props: { product },
    revalidate: 60 // 60초마다 페이지 재생성
  };
}

 

ISR의 이점은 다음과 같다.

  • 최적의 균형: 정적 사이트의 성능과 서버 사이드 렌더링의 최신성을 동시에 제공한다.
  • 점진적 배포: 전체 사이트를 다시 빌드할 필요 없이 필요한 페이지만 업데이트할 수 있다.
  • 자원 효율성: 모든 요청마다 렌더링하지 않고 일정 간격으로만 재생성하여 서버 자원을 절약한다.

 

클라이언트 사이드 렌더링(CSR)

CSR은 브라우저에서 JavaScript로 페이지 콘텐츠를 동적으로 생성하는 전통적인 React 방식이다. Next.js는 SSR/SSG와 함께 CSR을 사용할 수 있는 유연성을 제공한다. 복잡한 사용자 인터렉션이 필요한 페이지에 적합하다.

import { useState, useEffect } from 'react';

export default function ClientRenderedPage() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    // 클라이언트 측에서 데이터 가져오기
    const fetchData = async () => {
      const response = await fetch('/api/data');
      const result = await response.json();
      setData(result);
    };
    
    fetchData();
  }, []);
  
  if (!data) return <div>로딩 중...</div>;
  
  return <div>{/* 데이터 표시 */}</div>;
}

 

CSR의 장점은 다음과 같다.

  • 동적 상호작용: 복잡한 사용자 인터랙션을 원활하게 처리할 수 있다.
  • 서버 요청 최소화: 필요한 데이터만 API를 통해 가져와 네트워크 트래픽을 줄일 수 있다.
  • 개발 유연성: 클라이언트 측 상태 관리와 UI 조작이 자유롭다.

 

개발자 생산성을 높이는 Next.js의 내장 기능

자동 코드 분할 및 최적화

Next.js는 페이지 단위로 자동 코드 분할을 수행하여, 사용자가 실제로 방문한 페이지에 필요한 코드만 로드한다. 이를 통해 전체 애플리케이션을 로드하는 부담을 줄여준다.

// 각 페이지는 자동으로 분리된 번들로 제공된다.
// 사용자가 /about에 접근할 때 해당 코드만 로드한다.
export default function About() {
  return <h1>회사 소개</h1>;
}

 

자동 최적화의 이점은 다음과 같다.

  • 초기 로드 시간 단축: 첫 페이지 로드 시 필요한 최소한의 JavaScript만 다운로드된다.
  • 성능 개선: 사용자는 전체 애플리케이션을 다운로드할 필요 없이 빠르게 페이지를 이용할 수 있다.
  • 개발 부담 감소: 복잡한 웹팩 설정 없이도 자동으로 최적화가 이루어진다.

 

직관적인 파일 기반 라우팅 시스템

Next.js의 라우팅 시스템은 파일 시스템에 기반을 두고 있어, 복잡한 설정 없이도 직관적인 URL 구조를 만들 수 있다.

pages/
├── index.js         # -> '/'
├── about.js         # -> '/about'
└── products/
    ├── index.js     # -> '/products'
    └── [id].js      # -> '/products/:id'

 

파일 기반 라우팅의 이점은 다음과 같다.

  • 명확한 프로젝트 구조: 파일 위치만으로도 URL 경로를 쉽게 파악할 수 있다.
  • 보일러플레이트 코드 감소: 별도의 라우팅 설정 파일이 필요 없어 코드가 간결해진다.
  • 동적 라우팅 지원: [param] 형식의 파일명으로 동적 경로를 쉽게 구현할 수 있다.

 

API 라우트

Next.js의 API 라우트 기능은 같은 Next.js 프로젝트 내에서 REST API 엔드포인트를 쉽게 만들 수 있게 해준다.

export default function handler(req, res) {
  if (req.method === 'GET') {
    // 사용자 정보 조회 로직
    res.status(200).json({ name: '홍길동', age: 30 });
  } else if (req.method === 'POST') {
    // 사용자 생성 로직
    const { name, age } = req.body;
    // 데이터베이스에 저장하는 로직
    res.status(201).json({ success: true });
  }
}

 

API 라우트의 장점은 다음과 같다.

  • 풀스택 개발 간소화: 프론트엔드와 백엔드 코드를 하나의 프로젝트에서 관리할 수 있다.
  • 서버리스 기능: 별도의 백엔드 서버 설정 없이도 API 엔드포인트를 구현할 수 있다.
  • 프로덕션 최적화: 자동으로 최적화된 서버리스 함수로 배포된다(Vercel 사용 시).

 

이미지 최적화 및 성능 향상

Next.js는 내장된 Image 컴포넌트를 통해 자동 이미지 최적화를 제공한다.

import Image from 'next/image';

export default function ProductPage() {
  return (
    <div>
      <h1>제품 상세</h1>
      <Image
        src="/products/camera.jpg"
        alt="최신 카메라"
        width={600}
        height={400}
        priority
      />
    </div>
  );
}

 

Image 컴포넌트의 주요 이점은 다음과 같다.

  • 자동 리사이징: 다양한 디바이스에 맞게 이미지 크기가 최적화된다.
  • 지연 로딩: 뷰포트에 들어올 때만 이미지가 로드되어 초기 페이지 로드 속도가 향상된다.
  • 최신 이미지 포맷: WebP 같은 최신 이미지 포맷을 자동으로 제공한다.
  • CLS 방지: 이미지 로딩으로 인한 레이아웃 이동(Cumulative Layout Shift)을 방지한다.
Cumulative Layout Shift(CLS)는 페이지가 로드되는 동안 예기치 않게 레이아웃이 변경되는 현상을 수치로 나타낸 지표이다. 이는 특히 이미지가 로드될 때 두드러지는 문제인데, 이미지의 크기나 비율이 미리 지정되지 않은 경우 브라우저가 콘텐츠의 최종 크기를 예측할 수 없기 때문이다. 결과적으로 이미지 로딩이 완료되면 기존 요소들이 밀리거나 재배치되는 현상이 발생할 수 있다.

 

최신 웹 개발 도구 지원

Next.js는 타입스크립트, ESLint, SWC(Speedy Web Compiler) 등 웹 개발 도구를 기본적으로 지원한다.

  • 타입스크립트 지원: 타입 체킹, 린팅 등을 통해 잠재적 오류를 사전에 발견할 수 있고, 자동 완성, 타입추론 등으로 개발 효율성이 향상된다.
  • 빠른 빌드 속도: SWC를 통한 최적화된 빌드 프로세스로 개발 반복 주기가 단축된다.

 

Next.js가 해결하는 문제

1. 초기 로딩 속도와 사용자 경험 개선

웹 애플리케이션의 성능, 특히 초기 로딩 속도는 사용자 경험과 비즈니스 지표에 직접적인 영향을 미치는데, Next.js는 다양한 렌더링 전략과 자동 최적화를 통해 이 문제를 효과적으로 해결한다.

 

문제 해결 방식

  • 스마트한 코드 분할: 페이지별로 필요한 코드만 로드하여 초기 다운로드 크기를 줄인다.
  • 사전 렌더링: SSR/SSG를 통해 콘텐츠가 빠르게 표시되도록 한다.
  • 최적화된 자산 관리: 이미지, 폰트, 스크립트 등의 최적화를 자동으로 처리한다.

 

2. SEO 최적화

검색 엔진 최적화(SEO)는 온라인 비즈니스의 성공에 핵심적인 요소이다. 전통적인 SPA(Single Page Application)는 SEO에 취약한 반면, Next.js는 이 문제를 효과적으로 해결한다.

import Head from 'next/head';

export default function Product({ product }) {
  return (
    <>
      <Head>
        <title>{product.name} - 쇼핑몰</title>
        <meta name="description" content={product.description} />
        <meta property="og:title" content={product.name} />
        <meta property="og:image" content={product.imageUrl} />
      </Head>
      {/* 제품 상세 페이지 내용 */}
    </>
  );
}

 

문제 해결 방식

  • 서버 사이드 렌더링: 검색 엔진 크롤러에게 완전한 HTML을 제공한다.
  • 자동 메타데이터 관리: 페이지별 메타 태그를 쉽게 관리할 수 있다.
  • 구조화된 데이터 지원: JSON-LD 같은 구조화된 데이터를 쉽게 구현할 수 있다.

 

3. 개발 복잡성 감소와 생산성 향상

웹 개발은 점점 복잡해지고 있으며, 개발자는 비즈니스 로직보다 환경 설정에 많은 시간을 소비하는 경우가 많다. Next.js는 이러한 복잡성을 추상화하여 개발 생산성을 크게 향상시킨다.

 

문제 해결 방식

  • 간결한 API: 복잡한 설정 없이도 고급 기능을 사용할 수 있다.
  • 규약 기반 접근: 명시적인 설정보다는 규약을 통해 일관성을 유지한다.
  • 통합 개발 환경: 프론트엔드와 백엔드를 하나의 프로젝트에서 관리할 수 있다.

 

4. 확장성과 미래 대비 아키텍처

Next.js는 작은 프로젝트부터 엔터프라이즈급 애플리케이션까지 원활하게 확장할 수 있는 아키텍처를 제공한다.

 

문제 해결 방식

  • 모듈식 설계: 페이지와 컴포넌트를 독립적으로 개발하고 테스트할 수 있다.
  • 점진적 도입: 기존 애플리케이션에 점진적으로 도입할 수 있다.
  • 최신 기술 지원: React의 최신 기능(Server Components, Suspense 등)을 적극 지원한다.

 

마치며

Next.js는 현대적인 웹 애플리케이션을 구축하는 데 매우 유용한 도구이다. 성능, SEO, 개발 생산성 등 다양한 측면에서 이점을 제공하며, React 생태계에서 점점 더 강력한 위치를 차지하고 있다. Next.js의 기본 개념을 바탕으로 프로젝트의 요구사항에 따라 SSR, SSG, CSR을 적절히 활용하면 Next.js를 더 효율적으로 사용할 수 있을 것이다.