YepAPI/skills

Next.js 15

규칙

• 항상 App Router (app/ 디렉토리)를 사용하고, Pages Router (pages/)는 사용하지 않습니다.
• 기본적으로 서버 컴포넌트를 사용합니다. — 상태(state), 이펙트, 브라우저 API가 필요한 경우에만 "use client"를 추가합니다.
• 동적 메타데이터에는 <Head> 대신 generateMetadata()를 사용합니다.
• 간단한 폼의 변형(mutation)에는 API 라우트 대신 서버 액션(Server Actions)을 사용합니다.
• next/image를 적절한 width/height 또는 fill과 함께 사용하고, 절대 raw <img>를 사용하지 않습니다.
• 내부 내비게이션에는 raw <a> 대신 next/link를 사용합니다.
• 라우트 핸들러는 app/api/[route]/route.ts에 위치하며, 명명된 함수(GET, POST)를 내보냅니다.
• 레이아웃은 layout.tsx, 로딩 상태는 loading.tsx, 에러 경계는 error.tsx에 정의합니다.
• ISR(Incremental Static Regeneration)에는 레거시 getStaticProps/getServerSideProps 대신 unstable_cache 또는 revalidateTag를 사용합니다.
• 환경 변수: 클라이언트 측에서만 사용하는 변수는 NEXT_PUBLIC_ 접두사를 붙입니다.

금지 사항

• getServerSideProps, getStaticProps, getStaticPaths — 이들은 Pages Router 전용입니다.
• _app.tsx, _document.tsx — 이들은 Pages Router 전용입니다.
• next/router의 useRouter — 대신 next/navigation을 사용하세요.
• next/head — 대신 generateMetadata 내보내기를 사용하세요.
• 서버 컴포넌트를 불필요하게 "use client"로 감싸지 마세요.