TwentyTwentyOne

🔄 Next.js App Router 업그레이드 가이드Next.js App Router는 Pages Router 대비 훨씬 더 유연하고 확장성 높은 구조를 제공합니다.기존 프로젝트를 최신 버전(App Router 기반)으로 업그레이드하는 방법을 단계별로 정리합니다.✅ 1. Next.js 및 Node.js 버전 업데이트Next.js: 최신 버전 설치 (13.4 이상)Node.js: 최소 18.17 이상 필요npm install next@latest react@latest react-dom@latest추가로 ESLint 설정도 업데이트하면 좋습니다.npm install -D eslint-config-next@latest✅ 2. 새로운 기능 대응📷 Image 컴포넌트 개선더 이상 next/future/im..

📡 Next.js App Router 데이터 패칭 완벽 가이드Next.js App Router는 서버/클라이언트에서 데이터를 유연하게 패칭할 수 있도록 다양한 방식을 제공합니다. 이 글에서는 서버 컴포넌트 기반 fetch, 클라이언트 상태 기반 요청, 그리고 로딩 관리까지 전반적인 사용법을 정리합니다.✅ 서버 컴포넌트에서의 데이터 패칭Next.js App Router에서는 페이지와 레이아웃이 기본적으로 서버 컴포넌트입니다. 서버에서 직접 데이터를 가져오는 것이 기본 구조입니다.🔹 fetch 사용 예시// app/posts/page.tsxexport default async function Page() { const res = await fetch('https://api.example.com/post..