🚀 Next.js App Router 완전 이해하기 – 실전 FAQ 중심 해설

🚀 Next.js App Router 완전 이해하기 – 실전 FAQ 중심 해설

Next.js에서 App Router는 기존의 Pages Router를 대체하는 차세대 아키텍처입니다.
React의 최신 기능들인 서버 컴포넌트(Server Components), Suspense 기반 스트리밍(Streaming), **서버 액션(Server Actions)**을 전면 도입하면서,
단순히 “라우팅 방식”이 아니라 전체 앱 구성 모델의 패러다임 전환이라 볼 수 있습니다.

---

🔰 App Router란 무엇인가요?

App Router는 app/ 디렉토리 기반으로 작동하며, React Server Component 중심으로 동작하는 컴포넌트 중심의 라우팅 체계입니다.

✅ app/page.tsx, app/layout.tsx, app/api/route.ts 같은 디렉토리 구조를 사용하며,
라우팅, 데이터 페칭, 상태 관리, 인증까지 "Next.js 안에서 통합적으로" 해결할 수 있도록 설계되어 있습니다.

---

❓ 자주 묻는 질문 (FAQ 중심 실전 해석)

---

🔍 Q. layout에서 요청 객체(request object)에 접근할 수 있나요?

반응형

불가능합니다.

layout.tsx는 렌더링 효율을 위해 재사용 및 캐싱을 전제로 하기 때문에,
**비결정적인 요소(예: 요청 객체에 따른 동작)**를 허용하지 않습니다.

하지만 다음은 가능합니다:

• headers() 또는 cookies() 사용 (서버 전용 함수)
• 쿠키 설정 (Server Actions 또는 미들웨어에서)

📌 layout은 페이지 이동 시 다시 렌더링되지 않으며, 이 덕분에 브라우저처럼 동작하는 구조를 구현할 수 있습니다.

---

🔍 Q. 페이지에서 URL 정보를 어떻게 가져오나요?

서버 컴포넌트일 경우 (기본):

export default function Page({ params, searchParams }) {
  // 경로 세그먼트는 params
  // 쿼리스트링은 searchParams
}

클라이언트 컴포넌트일 경우:

"use client"
import { usePathname, useSearchParams } from 'next/navigation'

const path = usePathname()
const search = useSearchParams()

추가로, 중첩된 레이아웃 구조에서는 useSelectedLayoutSegment()나 useSelectedLayoutSegments()로
해당 위치의 세그먼트를 직접 다룰 수 있습니다.

---

🔍 Q. 서버 컴포넌트에서 리디렉션(redirect)을 할 수 있나요?

네, 가능합니다.

import { redirect } from 'next/navigation'

redirect('/login') // 307 Temporary Redirect

혹은 영구 이동의 경우:

import { permanentRedirect } from 'next/navigation'

permanentRedirect('/new-url') // 308 Permanent Redirect

⚠️ 스트리밍 도중에 리디렉션이 발생하면, 클라이언트에 메타 태그로 삽입되어 실행됩니다.

---

🔐 Q. App Router에서 인증 처리는 어떻게 하나요?

 

인증 솔루션은 다음과 같은 것들이 App Router를 지원합니다:

• NextAuth.js
• Clerk
• Auth0
• Stytch
• WorkOS
• 세션이나 JWT 직접 관리 (Middleware + Server Action)

서버 컴포넌트에서는 세션 검증 → redirect() 처리 패턴을 많이 씁니다.

---

🍪 Q. 쿠키 설정은 어떻게 하나요?

Server Actions 또는 Route Handlers에서:

import { cookies } from 'next/headers'

cookies().set('token', 'abc123', { path: '/', httpOnly: true })

⚠️ 페이지(page.tsx)나 레이아웃(layout.tsx)에서는 쿠키 설정이 불가능합니다.
이유는 HTTP 스트리밍이 시작된 이후에는 쿠키 헤더를 설정할 수 없기 때문입니다.

미들웨어에서 설정하는 예:

import { NextResponse } from 'next/server'

export function middleware(request) {
  const response = NextResponse.next()
  response.cookies.set('foo', 'bar')
  return response
}

---

🏢 Q. 멀티 테넌시(Multi-tenant) 앱도 만들 수 있나요?

네, Next.js는 하나의 앱에서 서브도메인 또는 경로 기반 테넌트 구분이 가능하도록 구성할 수 있습니다.
예: myapp.com/company-a, myapp.com/company-b

공식 문서에는 이를 위한 예시 구조도 포함되어 있습니다.

---

♻️ Q. App Router의 캐시 무효화는 어떻게 하나요?

Next.js는 여러 계층의 캐시를 사용합니다:

• 서버 캐시 (fetch 캐싱, revalidation)
• React 컴포넌트 캐시 (RSC)
• 전체 빌드 결과물 캐시

따라서 상황에 따라 다음을 고려하세요:

• revalidate 옵션을 사용하여 fetch 결과 캐싱 제어
• POST 요청으로 캐시 무효화 유도 (mutate 트리거)
• cache: 'no-store' 설정으로 항상 최신 데이터 사용

---

📦 Q. App Router 기반의 실전 예제가 있나요?

네, 공식적으로 아래 두 프로젝트가 오픈소스로 제공됩니다:

• Next.js Commerce
• Platforms Starter Kit

둘 다 고급 App Router 구성, 인증, 테넌시, 성능 최적화 예제가 포함되어 있으니 강력 추천합니다.

---

✅ 마무리 요약

기능 핵심 요약

요청 접근	headers() 또는 cookies() 함수만 허용
URL 정보	params, searchParams 또는 usePathname()
리디렉션	redirect(), permanentRedirect()로 처리
인증	NextAuth.js, Clerk 등 지원
쿠키 설정	Server Action, 미들웨어에서만 가능
캐싱 전략	fetch 재검증, 무효화, no-store 옵션
실전 예제	Commerce, Platforms Starter Kit

---

 

Next.js, App Router, React Server Component, Streaming, 쿠키 설정, 인증 처리, 라우팅 전략, 클라이언트 컴포넌트, 리디렉션