10/16 - Next.js 13 미들웨어

Next.js 13 미들웨어 사용

Next.js 13 master course - router handler (velog.io)

Next.js 13 master course - middleware (velog.io)

Next.js 13의 공식문서를 기준으로 번역해주시고 쉽게 풀어주신 윗 글을 통하여 공부해보았다.

 

Next.js 13의 미들웨어 구조

 

출처 : https://velog.io/@jay/Next.js-13-master-course-middleware

Next.js 13의 미들웨어의 경우 express 미들웨어와 다르게 각자의 Router에 미들웨어를 use하는 것이 아닌,

윗 그림과 모든 router handler가 미들웨어를 경유하는 개념으로 이해했다.

 

그렇기 때문에 Next.js에서는 Router Handler를 특정하기 위한 matcher라는 개념이 존재한다.

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
// This function can be marked `async` if using `await` inside
export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url))
}
 
// See "Matching Paths" below to learn more
export const config = {
  matcher: '/about/:path*',
}

위 코드는 Next.js 13 공식 문서에 존재하는 예시를 가져온 것이다.

middleware 명으로 약속된 함수를 통해 미들웨어를 구성한다.

config 객체의 matcher를 통해 원하는 라우팅 경로의 Router Handler만 미들웨어를 경유하도록 할 수 있다.

 

matcher은 정규식을 적용하여 더 정교하게 작동시킬 수 있다.

단, 동적으로 작동하는 (런타임에 변하는) matcher는 적용할 수 없다.

 

동적으로 작동하는 matcher나 더 자세한 경로를 가지거나 조건마다 다른 수행이 필요한 미들웨어는 조건식을 사용할 수 있다.

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname.startsWith('/about')) {
    return NextResponse.rewrite(new URL('/about-2', request.url))
  }
 
  if (request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.rewrite(new URL('/dashboard/user', request.url))
  }
}

위의 예시와 같이 의도에 따라 동적 라우팅을 수행할 수도 있다.

유의할 점은 matcher의 조건식을 작성할때, matcher config에 해당 라우팅 주소가 선언되어 있어야 한다.

// See "Matching Paths" below to learn more
export const config = {
  matcher: ["/about/:path*", "/dashboard/:path*"],
}

위의 rewrite의 예제의 경우, 해당 config와 같이 matcher config의 선언이 있어야 정상적으로 작동한다.

 

NextResponse를 통한 미들웨어 이후 router handler 실행

express 라우터의 경우 use를 통해 미들웨어를 등록할 수 있다.

그 후 미들웨어에서 next() 메소드 실행을 통해 router handler에 응답 값을 요청 값으로 사용할 수 있도록 한다.

이와 유사한 개념으로, NextResponse 클래스의 경우 내부의 next() 메소드를 통해 router handler를 실행할 수 있다.

즉, NextResponse 응답을 통해 다음 router handler에게 그 응답을 요청(Request)로 사용할 수 있도록 한다.

출처 : https://velog.io/@jay/Next.js-13-master-course-middleware

export function middleware(request: NextRequest) {
  // Request가 받아들일 헤더를 정의할 수 있음.
  const newRequestHeaders = new Headers(request.headers)
    // set(key, value)의 설정임
    newRequestHeaders.set("some-thing", "something from headers")

  // next() 메소드는 인자로 headers를 받아들일 수 있음.
  const response = NextResponse.next({
    request: {
        headers: newRequestHeaders,
      },
    })
    
  // 응답 response는 cookie를 통해 값을 설정할 수 있음.
  response.cookies.set({
    name: "hi",
    value: "bye",
    path: "/",
  })
  
  return response
}

코드의 출처는 윗글입니다.

윗 코드의 주석을 확인해보자.

next() 를 통한 응답 인자로는 headers를 통해 커스텀 헤더를 지정할 수 있다.

또한, response.cookies.set을 통한 쿠키 값 지정을 통해 필요한 정보를 요청에 포함시킬 수 있다.

 

Router Handler에서는 두 가지 방법으로 미들웨어의 response에서 지정한 헤더를 읽어올 수 있다.

import { headers } from "next/headers"
import { NextRequest, NextResponse } from "next/server"

export async function GET(request: NextRequest) {
  const httpHeaders = headers()
  console.info("httpHeaders: ", httpHeaders)
  console.info("request.headers: ", request.headers)

1. next/headers 모듈의 headers() 함수

2. NextRequest의 request.headers 멤버 참조

httpHeaders:  HeadersList {
  cookies: null,
  [Symbol(headers map)]: Map(15) {
    'accept' => { name: 'accept', value: '*/*' },
    'accept-language' => { name: 'accept-language', value: '*' },
    'cache-control' => { name: 'cache-control', value: '' },
    'connection' => { name: 'connection', value: 'close' },
    ...
    'some-thing' => { name: 'some-thing', value: 'something from headers' },
    ...
  },

헤더의 값은 동일하며, some-thing 으로 지정한 커스텀 헤더의 값을 확인할 수있다.

 

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
 
export function middleware(request: NextRequest) {
  // Assume a "Cookie:nextjs=fast" header to be present on the incoming request
  // Getting cookies from the request using the `RequestCookies` API
  let cookie = request.cookies.get('nextjs')?.value;
  console.log(cookie); // => 'fast'
  const allCookies = request.cookies.getAll();
  console.log(allCookies); // => [{ name: 'nextjs', value: 'fast' }]
 
  request.cookies.has('nextjs'); // => true
  request.cookies.delete('nextjs');
  request.cookies.has('nextjs'); // => false
 
  // Setting cookies on the response using the `ResponseCookies` API
  const response = NextResponse.next();
  response.cookies.set('vercel', 'fast');
  response.cookies.set({
    name: 'vercel',
    value: 'fast',
    path: '/',
  });
  
  cookie = response.cookies.get('vercel');
  console.log(cookie); // => { name: 'vercel', value: 'fast', Path: '/' }
  // The outgoing response will have a `Set-Cookie:vercel=fast;path=/test` header.
 
  return response;
}

쿠키의 값은 request.cookies.get(key).value 를 통해 읽어올 수 있다.

 

추가적으로 NextRequest는 일반적인 Request를 extends 상속 받고 있기 때문에,

기존 Request의 멤버 및 메소드도 사용 가능하다.

 

Next.js 13 middleware가 호출이 되지 않는 문제

next.js - NextJS middleware does not seem to be triggered - Stack Overflow

NextJS middleware does not seem to be triggered

해당 게시글을 통하여 이미 많은 토론이 진행되었음을 확인할 수 있다.

 

가장 많은 추천 수를 받은 게시글의 내용은, 공식 문서에서 확인할 수 있듯 app 디렉토리를 사용 중이라면

{root}/src/middleware.ts 의 경로를 사용해보라는 내용이었다.

그러나 나는 이래도 호출이 되지 않았다 ...

계속 해서 버그와 고군분투 중이다. 참고로 버전은 Next.js 13.5.5

 

해당 경로에 위치하면 미들웨어가 작동되었다.

문제는 matcher를 잘못 준 것이었다. api route의 경우 /api 폴더 위에 작성 중이었는데 /api 경로를 빼고 엔드포인트만 작성한 것이 문제였다.

 

Error: The edge runtime does not support Node.js 'stream' module.

나 같은 경우 multer를 Next.js 미들웨어로 사용하려고 했을 시에 이러한 오류가 발생하였다.

Node.js의 런타임 기능을 포함하기 때문에 발생한 문제로, 호환 가능한 라이브러리를 사용하는 것이 추천된다.

 

문제는 Next.js의 미들웨어는 공식 문서 내용과 같이, 매칭이 완료되기 전 실행되므로 빌드시에 결정되는 미들웨어 값이

동적인 내용을 포함하면 안되기 때문이라고 생각한다.

 

해결 방법으로는 호환되는 다른 라이브러리를 이용하는 것이 추천된다.

 

또한 미들웨어를 직접 정의해서 사용할 수 있는데, 미들웨어를 정의하는 모듈 중 next-connect를 사용해도 된다.

next-connect - npm (npmjs.com)

next-connect

next-connect의 특징을 몇 가지 살펴보자

- 비동기 미들웨어  
- Express.js 보다 빠름
- 비동기 핸들러와 작동함

비동기 미들웨어이고 비동기 핸들러와 작동할 수 있으므로,

이는 일반적인 Express.js 미들웨어와 같이 런타임에 작동됨을 유추해볼 수 있다.

 

Next.js 13 이후의 App Router 방식도 npm 문서에 정리되어 있으므로, 최신 개발에도 이용가능할 듯 하다.

https://www.npmjs.com/package/next-connect?activeTab=readme%27#nextjs-app-router

 

단, Multer와 같은 Express.js Request와 유사한 NextApiRequest를 다루는 미들웨어를 작성하고 싶다면 

https://www.npmjs.com/package/next-connect?activeTab=readme%27#nextjs-api-routes

기존의 createRouter 방식을 이용하는 것이 좋겠다.