next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Revalidating 특정시간 간격으로 데이터 재검증 업데이트 같은 이벤트를 기반으로 데이터 재검증 background 재검증 fetch('https://...', { next: { revalidate: 60 } }); fetch를 사용하지 않는 경우엔 경로 세그먼트에 설정 // app/page.tsx export const revalidate = 60; on-demand 재검증 헤드리스 cms의 컨텐츠가 생성되거나 업데이트 되는 경우 전자상거래 메타데이터 변경(가격, 설명, 카테고리, 리뷰 등) 의 상황에서 캐시를 수동으로 제거하여 사용할 것 온디맨드 재검증 사용하기 revalidatePath 또는 revalidateTag로 경로 또는..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Caching 요청별로 또는 전체 경로 세그먼트에 대해 데이터 캐싱을 지원함 요청당 캐싱 fetch() 기본적으로 모든 fetch() 요청은 자동으로 캐시되고 중복되거됨 요청이 캐시되지 않는 경우 동적 메서드(next/headers, export const POST 등)가 사용되며 POST 요청(또는 인증이나 cookie 사용) fetchCache revalidate: 0 또는 cache: 'no-store’으로 구성된 fetch cache() // utils/getUser.ts import { cache } from 'react'; export const getUser = cache(async (id: string) => { const ..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Fetching async, await in Server Component //app/page.tsx async function getData() { const res = await fetch('https://api.example.com/...'); if (!res.ok) { throw new Error('Failed to fetch data'); } return res.json(); } export default async function Page() { const data = await getData(); return ; } 타입스크립트 오류나면 임시로 /* @ts-expect-error Async Server Component */ ..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Edge and Node.js Runtimes 런타임 차이 일반적인 서버리스(AWS 람다등)와 에지와의 차이점은 엣지가 실행되는 서버가 사용자와 가장 가까운 곳의 IDC를 사용하는 것에 있음. https://www.itworld.co.kr/tags/69957/FaaS/144224 Edge 용량제한이 있어서 next.js에서 실 활용 어려움. Node.js 런타임 일반적 리눅스 환경에서 node.js 설치하여 직접 돌리는 경우 서버리스 Node.js Vercel 등과 같이 별도 설정 없이 개발 코드만 업로드하여 바로 사용

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