☁️ goormTIL | Next.js #58

매루·2025년 12월 1일

DEEPDIVE_FE TIL goormTIL

goormTIL

목록 보기

56/67

📅 2025-12-01

➡️ Next.js에 대해 새롭게 알게 된 것 또는 헷갈리는 부분 정리

🔎 학습 리마인드

📌 Next.js란?

🔗 https://nextjs.org/

React 기반의 웹 애플리케이션 개발 프레임워크
React는 UI 구성만 담당하지만, Next.js는 웹 개발에 필요한 핵심 기능들을 기본 제공하여 더 적은 설정만으로 개발할 수 있게 해줌
- 라우팅(페이지 이동)
- SEO 최적화
- SSR / SSG / ISR / CSR 다양한 렌더링 방식
- 이미지 최적화
- API Routes(백엔드 기능)
- 번들링 & 빌드 설정
- 데이터 패칭 전략
- 코드 스플리팅 자동 지원

💡 라이브러리 vs. 프레임워크

구분	라이브러리	프레임워크
주도권	개발자에게 있음	프레임워크 규칙에 따름
사용 방식	필요한 기능만 선택해서 사용	구조와 흐름이 정해져 있음
예시	React, Lodash, Axios	Next.js, Vue.js, Angular, Spring, Nest.js

💡 왜 Next.js를 사용해야 하나?

복잡한 설정 생략
- 번들링, 라우팅, SSR, 이미지 최적화 등 대부분 기능을 기본 제공 → 설정보다 개발에 집중
Full Stack 개발 지원
- Route Handlers를 지원해서 full stack웹 개발이 가능하도록 함
- 복잡한 벡엔드 로직은 무리
다양한 렌더링 방식 지원

방식 설명
CSR 브라우저에서 렌더링
SSR 요청 시 서버에서 HTML 생성
SSG 빌드 시 정적 파일 생성
ISR 정적 페이지 + 시간 주기별 재검증
코드 스플리팅
- 애플리케이션 코드를 여러 개의 작은 조각으로 분리해서 필요할 때 해당 조각만 로드하는 기술
- 초기 로딩 속도 개선
- TTV(Time To View) 단축 → 사용자 경험 개선
  - 사용자가 최초 View를 볼 수 있을 때 까지의 시간
데이터 패칭
- fetch 함수가 next.js에서 기능이 확장되어 내장되어 있음
쉬운 배포
- Vercel 연계 → Git push만 해도 자동 배포 가능

방식	설명
CSR	브라우저에서 렌더링
SSR	요청 시 서버에서 HTML 생성
SSG	빌드 시 정적 파일 생성
ISR	정적 페이지 + 시간 주기별 재검증

💡 프로젝트 설치

설치

npx create-next-app@latest my-app --yes
cd my-app
npm run dev

📌 App Router와 Page Router

Next.js 12 이전 → Pages Router 기반 중심
Next.js 13 이후 → App Router 도입, 공식 문서도 App Router 중심으로 이동

💡 React와 Next의 라우팅 방식 차이

React	Next.js
`react-router-dom` 사용, 수동 라우팅 관리	파일/폴더 구조 기반의 자동 라우팅(File System Routing)
라우팅과 구조를 직접 설계해야 함	구조 = URL, 자동 연결
설정 필요	설정 최소화

💡 Page Router vs. App Router

특성	Pages Router	App Router
디렉토리 구조	`pages/` 디렉토리 사용	`app/` 디렉토리 사용
라우팅 방식	파일 기반 라우팅 (`pages/about.js` -> `/about`)	폴더 기반 라우팅 (`app/about/page.js` -> `/about`)
동적 라우팅	`[param]` 문법 (`pages/posts/[id].js`)	`[param]` 폴더 (`app/posts/[id]/page.js`)
레이아웃 관리	전역적으로 설정하거나 각 페이지마다 설정	`layout.js` 파일을 통해 폴더별로 설정
데이터 페칭	`getStaticProps`, `getServerSideProps`, `getStaticPaths`	React 18의 새로운 데이터 페칭 메서드 사용 가능
서버 컴포넌트 지원	기본적으로 클라이언트 중심	서버 컴포넌트와 클라이언트 컴포넌트 명시적 구분 가능
사용 용이성	간단하고 직관적임	유연하지만 초기 설정이 복잡할 수 있음
프로젝트 적용	기존 프로젝트에 적합	신규 프로젝트 및 최신 기능에 적합

📌 파일(폴더) 기반 라우팅

Next.js는 폴더와 파일 구조를 기반으로 URL 경로를 자동으로 생성하는 방식의 라우팅 제공
- 트리: 계층을 시각화한 구조 (폴더 구조 등)
- 서브트리: 트리의 일부 영역
- 루트: 시작 지점 (app/ 기준, 또는 레이아웃 root)
- 리프: 자식이 없는 마지막 노드 (URL 끝 세그먼트)
- URL 세그먼트: /로 구분된 경로 조각
- URL 경로: 도메인 이후에 오는 전체 주소 (세그먼트 조합)

💡 라우팅 구현해보기

// app/test/page.tsx
import React from "react";

const page = () => {
  return (
    <div>
      <h1>Test Page </h1>
      <p>Test Next</p>
    </div>
  );
};

export default page;

/test 경로로 접속 가능

💡 동적 라우팅 (dynamic routing)

React 방식 (react-router-dom)

<Route path="/products/:id" element={<Product />} />

Next.js 방식

폴더 이름을 대괄호 [ ] 로 감싸서 동적 경로 설정 예) app/posts/[id]/pages.tsx

import React from 'react';

type Params = {
    params: Promise<{ id: number }>;
};

const page = async ({ params }: Params) => {
    const { id } = await params;

    return <div>ID: {id}</div>;
};

export default page;