이 편에서 만드는 파일

개념 편입니다. 새로 만들거나 고치는 파일이 없습니다. 03편부터 실제로 notice-board 프로젝트를 만들며 이 편에서 정리한 구조를 그대로 적용합니다.

개념 정리

Amplify Hosting이 요청을 처리하는 경로

Amplify Hosting에 배포한 Next.js 앱은 요청 하나가 브라우저에서 바로 애플리케이션 코드로 가지 않습니다. CloudFront를 먼저 거칩니다.

CloudFront가 캐시를 갖고 있으면(HIT) 컴퓨트까지 요청이 도달하지 않습니다. 캐시가 없으면(MISS) 컴퓨트가 실행되고, 그 결과가 다시 CloudFront에 저장됩니다. 이 과목에서 응답 헤더로 관찰할 x-cache(HIT/MISS 여부)와 age(캐시가 만들어진 뒤 지난 시간)는 바로 이 CloudFront 계층의 상태를 보여줍니다.

이 과목이 다루는 Next.js 버전과 컴퓨트 런타임

Amplify Hosting compute는 지원하는 Next.js 버전과 Node.js 런타임 버전을 명확히 제한합니다.

이 과목은 이 표를 근거로 Next.js 15를 기준 버전으로 확정합니다. 03편에서 create-next-app 실행 시 메이저 버전을 15로 못 박는 이유가 여기 있습니다.

Next.js 캐시 4층 한눈에 보기

Amplify가 만드는 CDN 캐시와 별개로, Next.js 자체도 서버와 클라이언트에 걸쳐 네 개의 캐시 층을 둡니다. 이 과목은 06~08편에서 이 네 층을 하나씩 직접 확인합니다.

앞의 두 층(요청 메모이제이션·데이터 캐시)은 06편, 세 번째(전체 라우트 캐시·ISR)는 07편, 네 번째(라우터 캐시)는 08편에서 각각 실제로 켜고 끄며 헤더로 확인합니다. 09편부터는 이 서버 쪽 캐시들이 컴퓨트 인스턴스마다 따로 논다는 문제를 다룹니다. 그 원리는 02편에서 먼저 정리합니다.

notice-board 청사진

이 과목 전체가 만들고 배포하는 결과물은 공지사항 목록·상세를 보여주는 notice-board입니다. 16편을 마쳤을 때의 구조는 다음과 같습니다.

notice-board/
├── amplify.yml                    (빌드 캐시 설정 — 14편)
├── cache-handler.js                (외부 공유 캐시 — 13편)
├── data/
│   └── notices.seed.json          (시드 데이터 — 03편)
├── lib/
│   ├── notices-store.js            (공지사항 저장소 — 10편)
│   └── view-counts.js              (조회수 저장소 — 09편, 13편에서 DynamoDB로 전환)
├── next.config.mjs                 (cacheHandler 연결 — 13편)
└── app/
    ├── page.js                     (공지사항 목록 — 03편)
    ├── notices/
    │   └── [id]/
    │       └── page.js             (공지사항 상세)
    └── api/
        └── notices/
            └── route.js             (mock API — 06편)

이 트리는 목표 지점을 미리 보여주는 스케치입니다. 실제로는 03편부터 한 단계씩 만듭니다.

직접 해보기

자주 하는 실수

확인 문제

참고 자료

• AWS Amplify Docs — Amplify support for Next.js 
• AWS Amplify Docs — SSR supported features 
• AWS Amplify Docs — Deploying SSR applications with Amplify Hosting 
• AWS Amplify Pricing