Next.js Middleware 입문

jinvicky·2024년 9월 19일

걍진커미션 프로젝트

목록 보기

20/28

Intro

Next.js에 middleware를 도입해보자.

Middleware 도입

/admin으로 시작하는 url들은 어드민 제외 열람이 불가능하도록 해야 한다. 이를 위해서는 요청마다 확인을 해야 하는데

스프링에서는 필터나 인터셉터를 쓰고, vue에서는 router.beforeEach에서 처리한다.

next.js에서는 middlware.js를 프로젝트별 1개 파일을 최상단에 선언함으로써 구현해보자.

공식 문서를 보면 필요한 미들웨어 함수들은 각각 모듈별로 따로 작성한다음에 호출만 middleware.js에서 하라고 한다.

Note: While only one middleware.ts file is supported per project, you can still organize your middleware logic modularly. Break out middleware functionalities into separate .ts or .js files and import them into your main middleware.ts file. This allows for cleaner management of route-specific middleware, aggregated in the middleware.ts for centralized control. By enforcing a single middleware file, it simplifies configuration, prevents potential conflicts, and optimizes performance by avoiding multiple middleware layers.

친절한 공식 링크

https://nextjs.org/docs/app/building-your-application/routing/middleware

middleware.js 위치

src 폴더가 없다면 최상단, src 폴더가 있다면 src 폴더 내 최상단에 middleware가 위치해야 한다.

src폴더가 있음에도 불구하고 최상단에 middleware.js를 추가하면 동작하지 않는다.

1. page redirect

가장 쉬운 것부터 해볼까?
/index 경로로 접근하면 / 페이지로 리다이렉트하게 해보자.

import { NextResponse } from 'next/server'
 
export function middleware(request) {
  console.log('jvk request::', request);
  if(request.nextUrl.pathname.startsWith("/index")) {
    // return NextResponse.rewrite(new URL('/', request.url)); // /경로에 해당하는 컴포넌트를 보여준다. (경로 이동 X) 
    return NextResponse.redirect(new URL('/', request.url)); // /경로로 redirect한다. (경로 이동 O)

  }
}
 
export const config = {
  matcher: ['/index', '/admin/:path*'],
}