Next.js middleware

Next.js middleware

• 간단하게 테스트
  • course/[id] 에 미들웨어를 만들기
  • id가 1이 아니면 404 화면을 띄우기
    • 404 화면 컴포넌트 필요
    • _middleware.ts 에선 리액트 컴포넌트 문법(jsx or tsx)를 사용할 수 없음
  • 서버쪽 코드라고 생각하면 될 것 같다
    • console.log도 서버(node.js) 터미널에 찍힘
  • 아직은 언제 어떻게 써야할지 지켜봐야겠다
  • 완전히 MVC 패턴처럼 서버에서 코딩하는 느낌이다
    • https://velog.io/@gth1123/MVC-MVP-MVVM
• Next.js 공식 예제 코드
  • https://github.com/vercel/examples/tree/main/edge-functions
• 미들웨어에서 redirect를 해당 미들웨어가 포함된 라우터 폴더로 보내면 무한 루프에 빠짐

공식 사이트 에제

auth

import { NextRequest, NextResponse } from 'next/server';
import { setUserCookie } from '@lib/auth'

export function middleware(req: NextRequest) {
  // Add the user token to the response
  return setUserCookie(req, NextResponse.next())
}

json

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

export function middleware(req: NextRequest) {
  return new Response(JSON.stringify({ message: 'hello world!' }), {
    status: 200,
    headers: {
      'Content-Type': 'application/json',
    },
  });
}

bot detected

import { botdEdge } from '@lib/botd';
import demoMiddleware from '@lib/demo-middleware';
import { first } from '@lib/utils';
import { NextRequest, NextResponse } from 'next/server';

async function handler(req: NextRequest) {
  // Do light bot detection for all requests excluding
  // all static files but favicon.ico.
  const res = await botdEdge(req, {
    // The request id is excluded for demo purposes because
    // Botd remembers your request id and will always show
    // you the /bot-detected page if you're a bot, and
    // never if you have been identified as a human
    useRequestId: false,
  });
  if (res && res.status !== 200) {
    // Bot detected!
    const rewrite = NextResponse.rewrite('/bot-detected');
    res.headers.forEach((v, k) => rewrite.headers.set(k, v));
    return rewrite;
  }
  return res;
}

// if you are using this example as reference,
// feel free to remove the wrapping here which
// is only here to serve this demo
export const middleware = first(demoMiddleware, handler);

// https://github.com/vercel/examples/tree/main/edge-functions/bot-protection-botd/pages