NextJS middleware

프로젝트의 모든 경로에서 실행되는 미들웨어는 어떠한 요청전에 무언가를 실행할 수 있는 함수이다.

미들웨어를 사용할 때, 우리 프로젝트가 src 폴더를 사용한다면 src 폴더 최상단, 또는 페이지와 같은 레벨에서 사용해주면 된다.

기본적인 이해가 없이 쉽게 설명하면 미궁에 빠지게 될 수 있으니, 우선 코드를 보며 정리하겠습니다.

어떠한 요청전에 실행한다는거 + 모든 경로에서 실행된다 라는 걸 생각하며 아래 코드를 보면 이해가 빠를 수 있습니다.

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 

export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url))
}
 

요청을 그대로 실행시켜주는게 아니라 중간에 낚아채 지가 /home 으로 보내버리는 응답을 하고 있습니다.

예시 코드

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname.startsWith('/about')) {
    return NextResponse.rewrite(new URL('/about-2', request.url))
  }
  
  // /about 경로로 요청할 경우 URL 만 about-2 로 바꿔서 해당 페이지로 보내준다.
// * 페이지가 달라지는 것은 아님
 
  if (request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.rewrite(new URL('/dashboard/user', request.url))
  }
}

이쯤에서 redirect 와 rewrite 에 대한 개념을 짚고 넘어가겠습니다.

redirect

next.config.js 에서 작성한 redirect 코드입니다.

 async redirects() {
    return [
      {
        source: "/products/deleted", 
// 기존에 사용하던 이 url은 더 이상 존재하지 않거나 바뀌었기 때문에 이 url로 접근하면
        destination: "/products", // 해당 경로로 보내주게 됩니다.
        permanent: true,
// true 설정 시 status code 308을 반환, 영원히 사라진게 맞으니까 
// destination 해당 경로를 캐시해라고 검색엔진한테 알려줍니다
      },

파일상의 redirect 사용도 가능합니다.

 if (!login) {
    redirect("/products"); //redirect 함수를 사용해서 보내주기도 가능
    // notFound();
  }

위 코드에서 기존에 사용하던 경로는 /products/deleted 라는 경로이지만,
홈페이지의 어떠한 상황으로 인해 더 이상 해당 경로를 사용하지 않게 됐을 경우.
대체 경로 또는 바뀐 경로를 제공해주는 기능입니다.

쉽게 말하면 이 경로 이제 안 쓰니 이리로 가세요. 라는 기능을 합니다.

rewrite

rewrite은 경로의 이름만 바꿔준다고 생각하시면 됩니다.

 async rewrites() {
    return [
      {
        source: "/items/:slug",
        destination: "/products/:slug",
      },
    ];
  },

해당 코드를 해석하면 기존 /products/:slug 라는 코드를 사용하고 있지만,
저한테 products 는 상당히 길고 어려운 영어입니다.

그렇기 때문에 비교적 쉬운 items 라고 이름을 바꿔 사용해도 같은 페이지에 접속이 가능하게끔 설정해줄 때 사용하게 됩니다.

이렇게 사용하게 되면 /products/:slug , /items/:slug 모두 같은 페이지에 접속할 수 있게 됩니다.