키모스토리

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..

Next.js(App Router)에서 Route Group는 폴더 이름을 괄호로 감싼 (groupName) 형태로 만들고, 그 폴더는 정리용(조직화용) 이라서 URL 경로에 포함되지 않게 하는 규칙이에요. Next.js+11) 기본 규칙: (폴더명)은 URL에 안 들어감예를 들어:app/ (site)/ login/ page.tsx위 구조의 실제 URL은 /login 입니다. (site)는 라우트 URL 세그먼트로 취급되지 않아요. Next.js+1Route group 이름은 “의미”가 있는 게 아니라 그냥 정리용 이름이에요. Next.js2) Route Group을 왜 쓰나? (대표 3가지)A. 라우트를 팀/기능/섹션별로 정리예: (site) / (partner) / (api) 처럼 “..

Next.js(App Router)에서 private folder는 폴더 이름 앞에 _(언더스코어) 를 붙여서 라우팅에서 제외시키는 규칙이에요. 즉, app 아래에 있어도 URL 세그먼트/라우트로 취급되지 않는 “내부용 폴더” 로 만들 수 있습니다. Next.js어떻게 쓰나규칙: app/.../_folderName/...예시:app/ blog/ page.tsx // /blog _components/ Post.tsx // 라우트 아님(내부 컴포넌트) _lib/ data.ts // 라우트 아님(유틸/데이터) 이렇게 하면 _components, _lib 아래 파일들은 라우트가 절대 생성되지 않고, 필요한 곳에서 impor..

1) 호출 모델 차이Client fetch브라우저에서 JS로 fetch('/api/...')서버에는 HTTP API(Route Handler) 가 있어야 함 (app/api/.../route.ts)결과(JSON)를 받아서 useState로 화면 갱신흐름Client(React) → HTTP 요청 → API 응답(JSON) → Client 렌더 Server Action브라우저 폼 제출을 Next가 서버 함수로 직접 연결별도 API 엔드포인트가 없어도 됨보통 redirect()로 URL/상태를 유지하거나, useActionState로 결과를 받음흐름Client(Form submit) → Server Action 실행 → (redirect / re-render / revalidate) → UI 갱신 2) 코드 ..

Next.js App Router에서 페이지/레이아웃 컴포넌트는 자동으로 params, searchParams를 받을 수 있어요.둘 다 “라우팅에서 온 값”이지만 성격이 완전히 다릅니다. 1) params = 경로(Path) 파라미터폴더 이름에 있는 동적 세그먼트가 params로 들어옵니다.예시파일: app/movies/[id]/page.tsxURL: /movies/123코드:export default function Page({ params,}: { params: { id: string };}) { return Movie ID: {params.id}; // "123"}특징라우트 구조로 결정됨 ([id], [...slug], [[...slug]])보통 “리소스 식별자” (id, slug 등)값은 문..