프론트엔드 개발 · 중급
Middleware 파일 내부에서 조건부로 사용자를 로그인 페이지로 리다이렉트 시키려면 어떤 클래스의 메서드를 반환해야 하나요?
힌트 · `NextResponse.redirect(new URL('/login', request.url))` 객체를 반환해야 합니다.
NextResponseredirectURLmiddleware
모범답안
미들웨어에서 조건부 리다이렉트를 하려면 NextResponse 클래스의 redirect 메서드를 사용해야 합니다. NextResponse.redirect()는 새로운 URL로 리다이렉트하는 응답 객체를 반환합니다.
예를 들어, 로그인하지 않은 사용자를 로그인 페이지로 리다이렉트하려면 다음과 같이 할 수 있습니다.
import { NextResponse } from 'next/server';
export function middleware(request) {
const isLoggedIn = // 로그인 여부 확인 로직
if (!isLoggedIn) {
return NextResponse.redirect(new URL('/login', request.url));
}
}
여기서 new URL('/login', request.url)은 로그인 페이지의 절대 URL을 생성하는 데 사용됩니다. request.url은 현재 요청 URL을 기반으로 하기 때문에, 올바른 도메인과 프로토콜을 유지하면서 리다이렉트할 수 있습니다.
읽었다면, 이제 직접 답해볼 차례예요
패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.
함께 보는 Next.js 면접 질문
- App Router 환경에서 fetch API를 사용할 때, 캐싱을 비활성화하고 매 요청마다 서버에서 동적으로 데이터를 가져오게 하려면 옵션을 어떻게 설정하나요?
- App Router에서 특정 경로의 동적 렌더링 여부를 파일 레벨에서 강제하기 위해 export하는 Route Segment Config 변수와 값은 무엇인가요?
- Next.js Middleware(`middleware.ts`)에서 특정 경로들만 미들웨어를 거치도록 적용 대상을 필터링하는 설정 객체의 속성 이름은 무엇인가요?
- App Router의 Route Handlers(`app/api/route.ts`)에서 동적 라우팅 파라미터(예: `[id]`)에 접근하려면 함수의 매개변수를 어떻게 정의해야 하나요?
- RSC Payload(React Server Component Payload) 내부 구조는 대략적으로 어떤 형태로 구성되어 있나요?
- React 렌더링 파이프라인에서 RSC(React Server Component)가 생성한 Payload를 클라이언트(브라우저)가 받아 기존 DOM과 병합하는 과정(Reconciliation)을 담당하는 React API는 무엇인가요?