키모스토리

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()로 받은 객체는 읽기 전용입니다..

URL Query ParametersGET 요청시 검색처리 (url query parameters)export async function GET(request: NextRequest) { const searchParams = request.nextUrl.searchParams; const query = searchParams.get("query"); const filteredComments = query ? comments.filter((comment) => comment.text.includes(query)) : comments; return Response.json(filteredComments);} GET 요청 방법 (?query=검색어)http://localhost:3000/co..

Next.js Route Handler로 댓글 “완전 CRUD” 만들기(GET 목록 + POST 추가 + GET/PATCH/DELETE)Next.js App Router에서는 app/**/route.ts 파일로 Route Handler(API 엔드포인트) 를 만들 수 있습니다.Route Handler는 Web 표준 Request / Response 기반이며, Next.js가 제공하는 NextResponse.json() 같은 편의 API도 사용할 수 있습니다. nextjs.org+1또한 같은 라우트 세그먼트 레벨에 page.tsx와 route.ts를 동시에 둘 수는 없습니다. (URL 충돌 방지 규칙) nextjs.org즉, 아래 예제는 /comments가 “페이지(UI)”가 아니라 “API(JSON)”로..

Parallel Routes?Next.js(App Router)에서 하나의 URL(같은 layout 컨텍스트) 안에 여러 “페이지 트리”를 슬롯(slot)처럼 동시에(또는 조건부로) 렌더링하는 기능. 아래 대시보드 처럼 “왼쪽 유저분석, 매출현황 패널 + 오른쪽 공지 패널” 같이 서로 독립적으로 바뀌는 영역을 만들 때 사용하기 좋음. 넥스트.js+1핵심 규칙슬롯은 @이름 폴더로 만든다 (예: @users, @renvenue, @notifications, @modal) 넥스트.js@slot 폴더는 URL 경로에 포함되지 않는다 (라우트 세그먼트가 아님)같은 레벨의 layout.tsx가 슬롯들을 props로 받는다 (children은 기본 슬롯, 나머지는 named slot) Next.js v16부터는 모..

1) “예상 가능한 에러”는 validation으로 네비게이션 처리예:권한 없음 → redirect('/login')데이터 없음 → notFound()파라미터 이상 → redirect() 또는 notFound()이건 UX도 좋고, 에러 바운더리에 불필요한 500을 만들지 않아서 좋아요.2) “예상 불가한 진짜 예외”만 공통 에러로 처리이때 공통 처리는 아래처럼:app/error.tsx : 대부분의 런타임 예외 공통 처리app/global-error.tsx : 루트 레이아웃까지 깨지는 경우 대비파일 예시 (전역 공통 에러)app/error.tsx (공통 에러 UI: 대부분 여기서 처리됨) "use client";import { useEffect } from "react";export default func..

Next.js Special filespage.tsxlayout.tsxtemplate.tsxnot-found.tsxloading.tsx - loading states error.tsx - error handling Next.js(App Router)에서 loading.tsx는 해당 라우트 세그먼트가 “서버에서 렌더/데이터 준비”되는 동안 보여주는 자동 fallback UI예요.위치 예시app/loading.tsx → 전체 앱(루트) 로딩 UIapp/movies/loading.tsx → /movies 이하에서만 로딩 UIapp/movies/[id]/loading.tsx → /movies/123 같은 상세에서만언제 뜨나page.tsx(Server Component)에서 await fetch(...), awa..

Next.js(App Router)에서 layout.tsx와 template.tsx는 “둘 다 라우트 세그먼트의 공통 UI 래퍼”처럼 보이지만, 가장 큰 차이는 “라우트 이동 시 유지(persist)되느냐 / 매번 새로 만들어지느냐” 입니다.1) layout.tsx (지속되는 껍데기)해당 세그먼트 하위 페이지로 클라이언트 라우팅 이동(Link로 이동 등)해도 layout은 유지됩니다.즉, layout 안의 React 컴포넌트 상태(state), 클라이언트 컴포넌트 인스턴스, DOM 등이 가능한 한 유지되는 방향.대표 용도:헤더/사이드바/푸터 같은 앱 쉘(App Shell)전역 Provider(Theme/Auth/QueryClient 등)세그먼트 공통 네비게이션/탭 바“페이지 바뀌어도 유지돼야 하는” UI..