[Nextjs] middleware

Server side에서 인증 과정을 통합하기 위해 찾아보다 Nextjs 12부터 middleware를 지원하는 것을 알았다.

 

프로젝트 폴더에 middleware.ts를 만들고 경로를 지정해주면 middleware로 동작한다.

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

const passingPath = ["/login", "/signup"];
const homePath = ["/"];
const checkingPath = ["/diary"];

export function middleware(req: NextRequest) {
  const { pathname, origin } = req.nextUrl;
  const token = req.cookies.get("Authorization")?.value;

  if (token && passingPath.includes(pathname)) {
    return NextResponse.redirect(origin);
  }

  if (
    !token &&
    (homePath.includes(pathname) ||
      checkingPath.some((path) => pathname.startsWith(path)))
  ) {
    return NextResponse.redirect(`${origin}/login`);
  }

  return NextResponse.next();
}

인증 과정을 통합할 것이기 때문에 따로 경로를 지정해주지 않았다.