next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Static and Dynamic Rendering 정적 렌더링 서버에서 렌더링되고 작업 결과가 클라이언트에서 캐시되어 후속 요청에서 재사용됨 동적 렌더링 요청 시 마다 서버에서 렌더링 됨 쿠키, 헤더등 URL의 검색 매개변수(search parmas = querystring)과 같이 요청 시점에만 알수 있는 정보에 의존함 cookies(), headers(), useSearchParams()

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Internationalization Locale ko-KR, en-US 등 개요 import { match } from '@formatjs/intl-localematcher'; import Negotiator from 'negotiator'; let headers = { 'Accept-Language': 'en-US,en;q=0.5' }; let languages = new Negotiator(headers).languages(); let locales = ['en-US', 'nl-NL', 'nl']; let defaultLocale = 'en-US'; match(languages, locales, defaultLocale); // ->..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Middleware middleware.js 루트 디렉토리에 생성가능 타 파일들 layout이나 page가 실행되기전에 실행됨. Matcher 특정 경로에서만 실행 export const config = { matcher: ['/about/:path*', '/dashboard/:path*'], }; Next response NextResponse 를 사용하여 다음을 수행 redirect : 다른 url로 들어오는 요청 rewrite : 주어진 url을 표시하며 응답 API 경로, 목적지에 대한 요청 getServerSideProps rewrite 설정 응답 쿠키 설정 응답 헤더 설정 쿠키 사용 쿠키는 request:NextRequest에서..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Intercepting Routes (…) [feed] ├── (..)photo/[id] │ └── page.tsx └── layout.tsx photo/[id] ├── page.tsx └── layout.tsx 예제 모달 URL을 통해 모달에 액세스할 수 없습니다. 페이지가 새로 고쳐지면 모달이 닫힙니다. 모달 뒤의 경로가 아닌 이전 경로로 이동하는 역방향 탐색. 모달을 다시 열지 않고 앞으로 탐색합니다. shop ├── @products │ └── page.tsx ├── @modal/(..)cart │ └── page.tsx └── layout.tsx cart ├── page.tsx └── layout.tsx

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Parallel Routes @folder로 정의 dashboard ├── @audience │ ├── demographics │ │ └── page.js │ ├── subscribers │ │ └── page.js │ └── page.js ├── @views │ ├── impressions │ │ └── page.js │ ├── view-duration │ │ └── page.js │ └── page.js ├── layout.js └── page.js 아래처럼 children에 병렬로 가져다 쓸 수 있음 function AudienceNav() { return ...; } function ViewsNav() { return ...; } ..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Route Handlers route.js 규칙 route.js 또는 route.ts 파일에 정의됨 export async function GET(request: Request) {} 지원되는 http 메서드 get, post, put, patch, delete, head 및 options를 지원함. 지원 안되는 메서드가 호출되면 405 반환 확장 NextRequest 및 NextResponse API cookie, json, redirect, rewrite 등 행동 정적 경로 처리기 응답 객체와 함께 GET 메서드를 사용할 때 정적으로 평가됨. import { NextResponse } from 'next/server'; export a..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Error Handling error.js 이용 React Error Boundary에서 경로 세그먼트와 중첩된 자식을 자동으로 래핑 파일 시스템 계층 구조를 사용하여 특정 세그먼트에 맞춤화된 오류 UI를 생성하여 세분성을 조정 나머지 앱 기능을 유지하면서 영향을 받는 세그먼트에 대한 오류를 격리 전체 페이지를 다시 로드하지 않고 오류 복구를 시도하는 기능이 있음 error.tsx 'use client'; // Error components must be Client components import { useEffect } from 'react'; export default function Error({ error, reset, }: { ..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Loading UI 인스턴스 로딩 상태 스켈레톤이나 스피너와 같은 로딩 표시기나 표지 사진, 제목등을 미리 렌더링 할 수 있음. loading.tsx export default function Loading() { // You can add any UI inside Loading, including a Skeleton. return } 같은 폴더에서 loading.js는 layout.js 안에 중첩됨. page.js 파일과 그 아래의 모든 하위 파일을 경계로 감쌈. 탐색은 서버 중심 라우팅에서도 즉각적임 네비게이션은 중단 가능 공유 레이아웃은 새 경로 세그먼트가 로드되는 동안 유지됨 서스펜스 경계 수동 정의 리액트의 fallback 활용

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Linking and Navigating 요소 기본 import Link from 'next/link'; export default function Page() { return Dashboard; } 동적 세그먼트에 연결 import Link from 'next/link'; export default function PostList({ posts }) { return ( {posts.map((post) => ( {post.title} ))} ); } useRouter() 훅 'use client'; import { useRouter } from 'next/navigation'; export default function Page() { c..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Pages and Layouts 페이지 페이지는 경로에 고유한 UI export default function Page() { return Hello, Next.js!; } 페이지는 항상 경로 하위 트리의 리프임. .js, .jsx, .tsx 파일 확장자 사용가능 경로 세그먼트에 공개적으로 액세스 하려면 page.js 필요 페이지는 기본적으로 서버 컴포넌트지만 클라이언트 컴포넌트로 설정할 수 있음 페이지는 데이터를 가져올 수 있음 레이아웃 레이아웃은 여러 페이지간에 공유되는 UI (리렌더링이 안되고 중첩가능) export default function DashboardLayout({ children, // will be a page or ..