키모스토리

generateStaticParams / dynamicParams 정리 (App Router)1) 언제 필요한가요?App Router에서 폴더명을 대괄호로 감싸면 동적 세그먼트(Dynamic Segment)를 만들 수 있습니다.app/blog/[slug]/page.tsx → /blog/a, /blog/b 처럼 slug가 바뀌는 라우트app/shop/[...slug]/page.tsx → /shop/a/b/c 처럼 catch-all 라우트 (slug는 배열)app/shop/[[...slug]]/page.tsx → /shop도 매칭되는 optional catch-all (slug가 undefined 가능) Next.js문제는 “가능한 slug가 몇 개인지 / 언제 알 수 있는지”입니다.이때 등장하는 것이 ge..

RSC 렌더링과 Static/Dynamic Rendering 정리 (App Router)1) 먼저 용어부터: “RSC”와 “Static/Dynamic”은 다른 축입니다RSC(React Server Components)컴포넌트를 서버에서 실행/렌더링할 수 있게 해주는 React의 컴포넌트 모델입니다. Next.js App Router에서는 page/layout이 기본적으로 Server Component입니다. Next.js+1Static Rendering / Dynamic Rendering“서버에서 렌더링을 언제 하느냐 + 그 결과를 캐시하느냐”의 문제입니다.즉, RSC를 쓰더라도 어떤 라우트는 **정적(빌드/재검증 시점)**으로, 어떤 라우트는 **동적(요청 시점)**으로 동작합니다. Next.js+12..

Next.js v16(App Router 기준) Route definition파일 시스템 기반 라우팅: app/ 아래 폴더 = route segment, URL 경로로 매핑됩니다. Next.js+1해당 세그먼트를 실제로 공개 라우트로 만들려면 보통 그 폴더 안에 page.tsx가 필요합니다(= 그 경로가 “페이지”로 노출). Next.js+1기본 패턴 예:app/page.tsx → /app/profile/page.tsx → /profilePages and layoutspage.tsx: 해당 경로의 화면(페이지) 를 정의합니다. Next.jslayout.tsx: 하위 페이지/레이아웃을 감싸는 공통 UI 쉘입니다(헤더/푸터/사이드바). 네비게이션 시 상태를 유지하며 지속(persist) 됩니다. Next...

1) 개념: “Middleware”와 “Proxy”는 뭐가 다른가요?공통점(역할은 동일)둘 다 요청이 페이지/라우트 핸들러로 도착하기 전에 서버(주로 Edge)에서 먼저 실행되어,redirect / rewrite요청/응답 헤더 수정요청을 차단하고 직접 응답 반환같은 “문지기(게이트)” 역할을 합니다. Next.js차이점(Next.js 16에서 이름/컨벤션이 변경)Next.js 16부터 기존 middleware.ts 파일 컨벤션이 deprecated 되었고, proxy.ts로 이름이 변경되었습니다. (기능이 바뀐 게 아니라 “명명/컨벤션”이 바뀐 것) Next.js+2Next.js+2Next.js 16 블로그에서도 middleware.ts는 당장은 동작하지만 deprecated이며, 미래 버전에서 제거될 ..

Next.js의 “라우트 핸들러(Route Handler)”의 캐싱 동작 특성 현재시간을 출력해 주는 API 응답을 이용하여, 캐싱 동작 확인import { NextResponse } from "next/server";// 응답 캐쉬를 STATIC으로(갱신안함) ⚙️ Next.js 캐시 정책 요약 (v15/v16 기준)항목기본 캐시 동작강제 설정비고Page (page.tsx)Staticexport const dynamic = "force-dynamic" 으로 변경 가능서버컴포넌트 SSR/SSG 제어용Route Handler (route.ts)Dynamicexport const dynamic = "force-static" 으로 캐시 시도 가능, 단 요청 의존 시 무시됨API 응답용fetch() 호출기본 S..

1) Route Handler에서 Header 읽기: 2가지 방법A. NextRequest로 읽기 (가장 직관적)request.headers.get("authorization")이 방식은 “지금 들어온 요청 객체”에서 바로 읽습니다. export async function GET(request: NextRequest) { const auth = request.headers.get("authorization");}B. next/headers의 headers()로 읽기const headerList = await headers(); headerList.get(...)Next 15+에서는 headers()가 비동기(await 필요) 입니다. nextjs.org+1headers()로 받은 객체는 읽기 전용입니다..