Next.js 정리

App Router·캐싱·최적화·서버 액션 등 Next.js 실전

1. 1

   Next.js App Router 정리

   Next.js의 App Router 는 13버전부터 도입된 새로운 라우팅 방식으로, 기존의 Pages Router 보다 더 현대적이고 유연한 기능을 제공합니다. App Router를 통해 서버 컴포넌트와 클라이언트 컴포넌트를 효과적으로 관리하며 React 18의 기능을 최대한 활용할 수

   2024.11.26
2. 2

   Next.js에서 Utterances 댓글 시스템 구현하기

   Next.js에서 Utterances 댓글 시스템 구현하기 Utterances는 GitHub 이슈를 활용하여 웹사이트에 간단하게 댓글 시스템을 추가할 수 있는 오픈 소스 프로젝트입니다. Next.js 프로젝트에 Utterances를 삽입하는 방법과, 테마 전환 시 깜빡임이 발생하는 방식

   2024.11.28
3. 3

   Next.js 16 정리 - React 18 시대의 풀스택 프레임워크

   Next.js 16은 React 18을 기반으로 하는 풀스택 웹 프레임워크 로, 서버 컴포넌트 App Router , 스트리밍, 캐시, 미들웨어 등 프론트엔드와 백엔드를 모두 아우를 수 있는 기능을 제공합니다. 이 글에서는 Next.js 16에서 핵심적으로 알아야 할 개념과, 실무에서

   2026.01.28
4. 4

   Next.js API Routes - 서버리스 함수로 백엔드 구현

   Next.js API Routes는 서버리스 함수 로 백엔드 API를 구현할 수 있게 해줍니다. 프론트엔드와 백엔드를 같은 프로젝트에서 관리할 수 있어, 작은 프로젝트나 프로토타입에 적합합니다. 1. 기본 API Route 구조 HTTP 메서드 이름 GET , POST , PUT , D

   2026.02.10
5. 5

   Next.js Middleware - 요청 가로채기와 엣지 런타임

   Next.js Middleware는 요청이 완료되기 전에 실행되는 코드로, 리다이렉트, 헤더 수정, 인증 체크 등을 처리할 수 있습니다. Edge Runtime에서 실행되어 매우 빠른 응답 시간을 제공합니다. 1. 기본 Middleware 구조 middleware.ts 는 프로젝트 루트

   2026.02.10
6. 6

   Next.js 폰트 최적화 - next/font로 웹폰트 성능 개선

   Next.js의 next/font 는 웹폰트를 자동으로 최적화 하여 레이아웃 시프트 CLS 를 방지하고 로딩 성능을 개선합니다. Google Fonts, 로컬 폰트 모두 지원하며, 자동으로 폰트 파일을 최적화합니다. 1. Google Fonts 사용 Google Fonts는 빌드 시 자

   2026.02.10
7. 7

   Next.js Image 최적화 - 자동 이미지 최적화와 성능 개선

   Next.js의 Image 컴포넌트는 이미지를 자동으로 최적화 하고, 지연 로딩, 반응형 크기 조정 등을 제공합니다. 이 글에서는 next/image 를 사용하여 이미지 성능을 개선하는 방법을 정리합니다. 1. 기본 사용법 width 와 height 를 명시해야 레이아웃 시프트 CLS

   2026.02.10
8. 8

   Next.js Metadata API - SEO와 소셜 미디어 최적화

   Next.js 13+ App Router에서는 metadata 객체나 generateMetadata 함수로 SEO 메타데이터를 선언적으로 관리 할 수 있습니다. 이 글에서는 페이지별 메타데이터 설정과 동적 메타데이터 생성 방법을 정리합니다. 1. 정적 메타데이터 metadata 객체로

   2026.02.10
9. 9

   Next.js 캐싱 전략 - ISR, SSG, SSR 캐시 제어

   Next.js는 다양한 캐싱 전략을 제공하여 성능을 최적화합니다. 이 글에서는 fetch 옵션, revalidate , generateStaticParams 등을 활용한 캐싱 전략을 정리합니다. 1. fetch 캐시 옵션 force cache : 빌드 시 또는 첫 요청 시 캐시하고 재사

   2026.02.10
10. 10

    Docker 멀티스테이지 빌드로 Next.js 이미지 1.2GB → 180MB

    Next.js 앱을 순진하게 도커라이즈하면 1GB가 우습게 넘는다. node modules와 빌드 도구가 전부 실려 있기 때문이다. 멀티스테이지 빌드와 standalone 출력으로 180MB까지 줄인 과정을 기록한다. 핵심 1 — output: "standalone" 이 옵션을 켜면 빌

    2026.08.01
11. 11

    Next.js App Router에서 페이지를 조립만 하게 만들기

    서버 컴포넌트 시대에 페이지 파일이 비대해지는 걸 막는 규칙 하나 — 페이지는 조립만 한다. lib/queries와 lib/actions로 분리한 구조 정리.

    2026.08.05
12. 12

    Next.js App Router 캐싱 4계층 완전 정리

    Next.js App Router의 캐싱은 처음 보면 마법 같고, 조금 쓰다 보면 저주 같다. "왜 데이터가 안 바뀌지?"의 90%는 캐시 때문이다. 네 개 층을 분리해서 이해하면 대부분의 미스터리가 풀린다. 1. Request Memoization 같은 렌더링 패스 안에서 동일한 fe

    2026.08.07