Next.js 12 - Middleware

Next.js 12

 

✅ Middleware 생성 방법

---

기존: /pages/_middleware.ts

Next.js 12.2.0 변경 후: /middleware.ts

(함수는 꼭 export default일 필요는 없다.)

 

✅ 특정 route에서만 작동하는 Middleware 생성 방법

---

기존

원하는 route에서 _middleware.ts 생성 후 미들웨어 작성

 

변경 후

import type { NextRequest, NextFetchEvent } from "next/server";

export function middleware(req: NextRequest, ev: NextFetchEvent) {
  console.log(`it works! global middleware!`);
  if (req.nextUrl.pathname.startsWith("/chats")) {
    console.log(`this is chats ONLY middleware!`);
  }
}

 

 

Middleware로 유저가 봇이면 차단하는 방법

---

import { getIronSession } from "iron-session/edge";
import {
  type NextRequest,
  type NextFetchEvent,
  userAgent,
  NextResponse,
} from "next/server";

export const middleware = async (req: NextRequest, ev: NextFetchEvent) => {
  if (userAgent(req).isBot) {
    // 새로운 error 화면을 만들고 그쪽으로 rewrite 시켜줄것
  }