Next.js 15으로 레시피 공유 앱 개발하기
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
React 개발자, Next.js 초보자, 웹 애플리케이션 개발에 관심 있는 개발자
핵심 요약
- Next.js 15는 파일 기반 라우팅과 동적 라우팅([recipeId] 패턴)으로 웹 앱 개발을 간소화함
- SEO 최적화는
metadata객체와generateMetadata함수를 통해 간편하게 처리 가능 - 서버 컴포넌트와 클라이언트 컴포넌트의 협업 구조를 통해 SSG, SSR, ISR 데이터 fetching 기법 적용 가능
- API 라우트는
app/api/recipes/route.js파일 내부에서 직접 구현 가능
섹션별 세부 요약
1. 프로젝트 설정
npx create-next-app@latest recipe-app명령어로 프로젝트 초기화- 기본 옵션(타입스크립트, 스트릭트 모드 비활성화)을 선택하고
npm run dev로 개발 서버 실행 localhost:3000에 앱이 라이브로 실행됨
2. 파일 기반 라우팅
app/page.js파일을 생성하면/경로의 홈 페이지 자동 생성app/add/page.js파일 생성으로/add경로의 추가 페이지 생성 가능app/[recipeId]/page.js파일 생성으로 동적 라우팅(/[recipeId]) 구현
3. SEO 최적화
app/layout.js파일 내metadata객체로 전역 SEO 설정generateMetadata함수를 통해 동적 페이지별 SEO 데이터 생성 가능
4. 서버/클라이언트 컴포넌트 협업
app폴더 내부 컴포넌트는 기본적으로 서버 컴포넌트use client지시문 추가로 클라이언트 컴포넌트로 전환 가능 (React hooks 사용 가능)
5. 데이터 fetching 기법
- SSG(Static Site Generation):
fetch로 데이터 로드 후 정적 생성 - SSR(Server-Side Rendering): 요청 시마다 서버에서 데이터 생성
- ISR(Incremental Static Regeneration):
revalidate: 60옵션으로 배경 재생성
6. API 라우트 구현
app/api/recipes/route.js파일에서POST핸들러를 통해 API 엔드포인트 생성- 클라이언트에서
fetch('/api/recipes')로 데이터 전송 가능
7. UI/UX 개선
- Tailwind CSS로
text-center,bg-gray-100등 클래스 추가로 스타일링 loading.js파일 생성으로 로딩 상태 UI 구현
결론
- Next.js 15는 파일 기반 라우팅, 동적 경로, SSG/SSR/ISR 기능을 통해 웹 앱 개발의 복잡성을 줄임
- Tailwind CSS와 API 라우트를 활용한 프론트엔드/백엔드 통합 개발이 가능
revalidate옵션을 통해 데이터 최신화를 효율적으로 관리할 수 있음