Question 1

Next.js에서 middleware란 무엇인가요?

Accepted Answer

Next.js middleware는 요청이 처리되기 전에 실행되는 코드로, 응답을 수정하거나 리다이렉트하거나 headers를 추가하거나 접근을 차단할 수 있습니다. 최적의 성능을 위해 Edge Runtime에서 실행됩니다. 일반적으로 인증, 지리적 위치 확인 또는 logging에 사용됩니다.

Question 2

App Router를 사용하는 Next.js 프로젝트에서 middleware 파일은 어디에 배치하나요?

Accepted Answer

middleware.ts(또는 .js) 파일은 app 폴더와 같은 레벨인 프로젝트 루트에 배치해야 합니다. Next.js는 이 파일을 자동으로 감지하고 모든 라우트에 대해 실행합니다. 프로젝트가 해당 구조를 사용하는 경우 src 폴더에 배치할 수도 있습니다.

Question 3

middleware가 실행되는 라우트를 어떻게 정의하나요?

Accepted Answer

middleware의 matcher 설정을 사용하면 경로 패턴을 통해 해당 라우트를 지정할 수 있습니다. 기본적으로 middleware는 정적 파일을 제외한 모든 라우트에서 실행됩니다. matcher는 대상 라우트를 정밀하게 제어하기 위해 wildcards와 regex를 지원합니다.

Next.js Middleware 및 Auth

Next.js에서 middleware란 무엇인가요?

답변

App Router를 사용하는 Next.js 프로젝트에서 middleware 파일은 어디에 배치하나요?

답변

middleware가 실행되는 라우트를 어떻게 정의하나요?

답변

인증에 NextAuth.js를 사용하는 주요 장점은 무엇인가요?

Next.js middleware로 라우트를 보호하는 방법은 무엇인가요?

기타 React / Next.js 면접 주제

JavaScript 기초

React 기초

React Hooks

컴포넌트 라이프사이클

React Router

Context를 활용한 상태 관리

폼과 Controlled Components

데이터 가져오기 및 API

React Query (TanStack Query)

Styling & CSS-in-JS

Next.js 기초

TypeScript와 React

Next.js 데이터 페칭

Next.js Server Actions

Next.js 라우팅 및 내비게이션

Next.js API Routes

Next.js Metadata & SEO

React 테스트

Zustand State Management

React 성능 최적화

Error Boundaries & 에러 핸들링

Advanced React Patterns

Next.js 고급 기능

Next.js 배포 및 프로덕션

아키텍처 & 디자인 패턴

React Server Components

Next.js 국제화

React 보안 & 모범 사례

다음 면접을 위해 React / Next.js을 마스터하세요