[React🌀] Next JS middleware / 미들웨어 / (Next JS 12.0.0)

Next JS 12

next js 12버전이 공개되었습니다.

이번 업데이트는 'rust 컴파일러로 변경' , '리액트 서버컴포넌트' 등 이전 버전들보다 더 혁신적인 기능들이 많은 것으로 보이는데요, 그 중에 눈에 띄는 부분인 미들웨어 부분을 소개드리고자 합니다.

 

 

Edge Function

 

Middleware는 Edge Function 을 런타임으로 해서 사용이 됩니다.

 

Vercel은 Edge Function 을 설명하기 위해 이런 스토리를 설명하고 있는데요,

속도가 빠르지만 정적인 컨텐츠만을 제공할 수 있는 CDN, 동적으로 매 요청마다 랜더링이 가능하지만 속도가 느린 동적 서버,

항상 양자 택일의 기로에 서있었다구요.

 

Edge Function을 이용한다면 이런 두가지 단점들을 극복할 수 있다고 합니다.

Vercel 의 Edge Network에 배포된 Edge Function들은 매우 빠르고 동적으로 개인화시킨 데이터를 전달할 수 있어, Server Side 로직을 Edge로 보내고, 두 마리 토끼를 모두 잡으라는 소리이죠.

 

그 Edge Function을 사용하는 방법중 하나가 오늘 소개드리는 MiddleWare 입니다.

 

Edge Funciton Doc

 

https://vercel.com/docs/concepts/functions/edge-functions

Edge Functions

 

About Edge Function

 

https://www.youtube.com/watch?v=yuxd2kurpzk&t=327s 

 

 

 

Next JS middleware 

 

설치

 

* Next JS 12.0.0 이상의 버전이 설치되어 있어야 합니다.

npm i next@latest

 

 

미들웨어 작성

import type { NextFetchEvent, NextRequest } from 'next/server'

export function middleware(req: NextRequest, ev: NextFetchEvent) {
  return new Response('Hello, world!')
}

req : next js 서버로 들어오는 요청 객체이고, ev 는 Fetch Event입니다.

next js 로 요청이 들어오면 이 함수를 거치게 된 후 페이지 컴퍼넌트로 들어간다고 생각하면 됩니다.

 

 

 

Next JS 의 미들웨어는 파일 단위로 구성할 수 있습니다.

파일 이름은 '_middleware.ts' 로 작성하면 되고, next js 의 다른 page, api 라우팅에서 그랬듯이 미들웨어 또한 파일이 위치하는 경로에 있는 페이지들의 미들웨어로 동작하게 됩니다. 

 

예를 들어, `/pages/_middleware.js`  에 위치한다고 했을 때, pages 하위 파일들로 라우팅 되기 전에 middleware 를 거치게 됩니다.

 

- package.json
- /pages (0)
    _middleware.ts # (1)
    index.tsx # (2)
    about.tsx # (2)
    teams.tsx # (2)

미들웨어는 중첩해서 사용도 가능합니다.

- package.json
- /pages
    index.tsx
    - /about
      _middleware.ts # Will run first
      about.tsx
      - /teams
        _middleware.ts # Will run second
        teams.tsx

 

위 예시처럼 미들웨어가를 적용시킬 파일들과 같은 경로에 _middleware.js 파일을 작성하면 됩니다.

teams 페이지에 접근하게 되면 두 미들웨어를 모두 실행 후 라우팅 되겠죠?

 

 

 

사용 예시

위 예시들과 같이 접근 제어, A/B 테스팅, 리다이렉트, 브라우저 지원, 로깅 등등 다양하게 활용이 가능합니다.

심지어 아래 링크를 보시면 케이스 하나하나에 대한 예시를 제공하고 있어 보고 따라하셔도 좋을 것 같습니다.

(역시 Vercel... 역시 Next JS......👍)

 

GitHub - vercel/examples: Enjoy our curated collection of examples and solutions. Use these patterns to build your own robust an