키모스토리

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