- 🌏 Next의 렌더링
- ⚡️ Pre-Fetching
Navigating
Query String 받아오기
인터셉팅 라우트 (Intercepting Routes)
SSR로 AuthContext 파악하기
환경변수 유의사항
Next.js API Route로 백엔드 API 엔드포인트 생성하기
파비콘 설정하기
Image 더 최적화하기
Page Router
기본 구조
동적 경로 설정하기
병렬 페이지
경로 받아오기, Context 매개변수 - SSR, SSG, ISR
Link, useRouter()로 경로 이동하기
Data Fetching
404 페이지
모든 fetch 로그로 확인하기
fallback 옵션으로 동적페이지 렌더링 제어하기
Page Router의 장단점
App Router
기본 구조
URL 정보 가져오기
useRouter() 로 경로 이동하기
Data Fetching
직렬화, RSC payload
공통 레이아웃 설정하기
Client Component, Server Component
Client Component 자식으로 Server Component 갖기
Suspense - SSG 페이지에서 Dynamic 컴포넌트 분리하기
동적 경로를 Static 페이지로 만들기
강제로 Static, Dynamic 설정하기
- Cache
- 로딩 처리
- Server Action
에러 핸들링
useParams, useSearchParams
searchParams 와 아래 방식 차이?
export default function SearchPage({
params,
}: {
params: { keyword: string };
}) {
const category = params.keyword;