[Next.js] Next.js App Router 경계 정리표

 

 

🔥 1. Server vs Client 핵심 구조

 

구분                                                  Server Component                          Client Component

기본 동작	기본값	"use client" 필요
실행 위치	서버 (Node.js)	브라우저
상태 관리	❌ 불가	⭕ useState 가능
이벤트(onClick)	❌ 불가	⭕ 가능
router	❌ 사용 불가	⭕ useRouter
hooks	❌ 대부분 불가	⭕ useEffect, useState
데이터 fetch	⭕ 직접 가능	⭕ 가능 (보통 API 호출)

 

 

 

 

 

 

🧠 2. “무조건 외워야 하는 기준”

 

🔵 Server Component에서 가능한 것

✔ 데이터 가져오기 (DB / fetch)
✔ props 전달
✔ HTML 렌더링
✔ async/await

 

예:

export default async function Page() {
    const data = await fetch(...)
    return <div>{data}</div>
}

 

 

 

 

🔴 Server Component에서 절대 금지

❌ useState
❌ useEffect
❌ onClick
❌ useRouter
❌ window / document

 

 

 

 

🟢 Client Component ("use client")

✔ useState
✔ useEffect
✔ 이벤트 처리
✔ router 사용
✔ form handling

 

예:

"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";

 

 

 

 

 

 

 

🚨 3. router 정리

 

❌ 절대 금지

import { router } from "next/client";
import router from "next/router";

 

 

✅ App Router 정답

import { useRouter } from "next/navigation";

 

사용:

const router = useRouter();

router.push("/admin/ads");
router.refresh();
router.back();

 

 

 

 

 

 

 

🧭 4. params / dynamic route

 

Server Component

export default function Page({ params }: {
    params: { id: string }
}) {
}

 

 

Client Component

import { useParams } from "next/navigation";

const params = useParams();

 

 

 

 

 

 

 

🧱 5. 구조 설계 기준

✔ 추천 구조

/app
  /admin
    /ads
      page.tsx          (SERVER - 리스트)
      /[id]
        /edit
          page.tsx      (CLIENT - 수정)
        page.tsx        (SERVER - optional)

 

 

 

✔ UI 컴포넌트 분리

components/
  DeleteModal.tsx  → CLIENT
  AdForm.tsx       → CLIENT

 

 

 

 

 

 

 

💥 6. 지금 내 프로젝트 기준 핵심 판단

 

✔ 올바른 방향

• 리스트 → Server
• 수정 → Client
• 삭제 → API Route
• 이동 → useRouter

 

❌ 지금까지 에러 원인 패턴

Server Component
  ↓
client hook 들어간 컴포넌트 import
  ↓
router 잘못 import
  ↓
Class extends undefined 에러

 

 

 

 

 

 

 

🧨 7. 에러 빠른 판별법

이런 에러 나오면 무조건 이거

Class extends value undefined

 

👉 90% 확률:

• router 잘못 import
• client/server 혼용
• useState 서버에서 사용

 

 

 

 

 

🚀 8. 한 줄 최종 요약

Server는 “데이터”, Client는 “동작”
router / state / event는 무조건 Client로 빼라