nextjs
CHAPTER 13 / 34
읽기 약 2분
SYNTAX
Middleware 해부: 요청 인터셉트
핵심 개념
middleware.ts는 요청 전에 실행됩니다. 인증 체크, 리다이렉트, 헤더 수정에 사용합니다. matcher로 적용 경로를 지정합니다.
코드 분석
MIDDLEWARE
// middleware.ts (루트)
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
export function middleware(req: NextRequest) {
const token = req.cookies.get('token')
if (!token) {
return NextResponse.redirect(
new URL('/login', req.url)
)
}
}
export const config = {
matcher: ['/dashboard/:path*']
}AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude
무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6
이 Next.js 'Middleware' 코드에서 서버/클라이언트 경계·use client 누락·캐시 무효화 버그를 찾아서 수정해줘.
ChatGPT
무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro
'Middleware'를 활용한 실전 페이지를 App Router + TypeScript + Server Actions로 만들어줘.
Gemini
무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro
이 Next.js 'Middleware' 사용 패턴이 빌드 크기와 LCP/INP/CLS에 미치는 영향을 분석하고 최적화 방안을 알려줘.
Grok
무료: Grok 4.1 / SuperGrok $30/mo
Next.js 'Middleware' vs Remix/Astro/SvelteKit의 동일 기능 구현을 2026년 기준으로 솔직하게 비교해줘.
⭐ 이것만 기억하세요
Middleware 해부: 요청 인터셉트는 이 3가지만 확실히 잡으세요
1.모든 페이지에 인증 체크 코드를 넣으면 누락 시 비인증 사용자가 보호된 페이지에 접근합니다
2.middleware.ts는 요청이 페이지에 도달하기 전에 실행되며, matcher로 적용 경로를 지정하고 redirect·rewrite로 제어합니다
3.다음 챕터에서 폼 제출을 서버에서 직접 처리하는 Server Actions를 배웁니다
공유하기
진행도 13 / 34