aphyrince의 블로그겸 메모장

Next.js의 **API Routes (API 페이지 기능)**는 Next.js 안에서 간단하게 백엔드 API 서버 역할을 할 수 있도록 해주는 기능입니다.✅ 간단 요약Next.js의 API Route = Express 없이 만드는 간단한 서버 핸들러별도로 Express, Koa 등을 쓰지 않아도 됨.Next.js 프로젝트 안에서 app/api/*** 폴더에 파일을 만들면 해당 파일이 자동으로 API Endpoint가 됨.클라이언트 측에서 fetch('/api/hello') 식으로 호출 가능.📁 디렉토리 구조 예시app/ api/ hello/ route.ts📄 app/api/hello/route.tsimport { NextResponse } from 'next/server';impo..

📚 Next.js 9 vs Next.js 15 주요 개념 대응표Next.js 9 교재 개념Next.js 15 최신 방식설명pages/ 디렉토리app/ 디렉토리앱 라우터(App Router) 도입. 폴더 구조와 라우팅 방식이 바뀜getServerSideProps, getStaticProps서버 컴포넌트 + fetch() 직접 호출컴포넌트 안에서 직접 데이터를 가져올 수 있음클라이언트 렌더링 (CSR)서버 컴포넌트 + 클라이언트 컴포넌트 분리'use client'로 명시적으로 선언 필요_app.js, _document.jsapp/layout.tsx, app/template.tsx글로벌 레이아웃 구성 방식 변경next/link → a 태그 필요next/link 단독 사용passHref 필요 없음API 라우팅..

✅ Next.js 15 (2024) 기준의 주요 특징과 변화항목예전 버전 (v9~10)최신 버전 (v15.3.1)라우팅 시스템pages/ 디렉토리만✅ app/ 디렉토리 (기본값) + pages/ 병행 가능데이터 패칭getServerSideProps, getStaticProps✅ 서버 컴포넌트 안에서 fetch() / cache, revalidate 등서버 컴포넌트 (RSC)❌ 없음✅ 기본 활성화됨 (app 디렉토리)서버 액션 (Server Actions)❌ 없음✅ 실험적 기능 → v15에선 안정화에 가까움스타일링 도구기본 CSS, Sass 등✅ Tailwind 기본 추천 + CSS Modules, PostCSS 등이미지 처리next/image 베타 수준✅ 성능 최적화된 next/image (respons..

getServerSideProps는 **기존 Pages Router (pages/ 폴더 기반)**에서만 쓸 수 있고, **App Router (app/ 폴더 기반)**에서는 지원되지 않는 함수입니다.✅ 해결 방법1. pages/ 디렉토리를 사용하는 방식으로 변경만약 getServerSideProps를 꼭 사용해야 한다면, app/page.tsx를 pages/index.tsx로 옮기세요.bash복사편집# 예: src/pages/index.tsx 그리고 getServerSideProps를 그대로 사용하면 됩니다.2. App Router에서 서버 데이터를 가져오는 방법 (권장)App Router에서는 다음 방식으로 서버 사이드 데이터를 처리합니다:page.tsx 또는 layout.tsx 파일을 async 함수..

Next.js 15에서는 app/ 디렉토리 기반 라우팅(App Router) 시스템이 기본이며, pages/ 디렉토리를 사용하는 구식 Pages Router와 구분됩니다. App Router를 사용할 경우 라우팅 시스템이 파일 시스템 기반으로 동작합니다. 아래에 엔트리 포인트와 라우팅 구성 방법을 설명드릴게요.✅ 엔트리 페이지는 어디인가요?Next.js 15에서 app/ 디렉토리 기반 라우팅을 사용할 경우:기본적으로 app/page.tsx 또는 app/page.jsx 파일이 루트 경로(/)의 엔트리 페이지입니다.bash복사편집your-project/ ├── app/ │ ├── page.tsx ← 루트 페이지 (http://localhost:3000) │ ├── about/ │ │ └── page.tsx ..