[Next.js@14] Vercel 배포 middleware 에러

개요

• Vercel 배포 과정 중 middleware.ts 에서 파생된 오류 관련

문제 및 해결

• 배포 과정 중 middleware.ts에서 local 서버 주소를 떼니
  상대 경로x 절대 경로만 써야 한다는 오류 메세지
• " Error : URL is malformed "/login". Please use only absolute URLs..."

// 기존 middleware.ts
import { NextRequest, NextResponse } from 'next/server'
import { cookies } from 'next/headers'
import { setHeaderToken } from './func/fetchCall'
export async function middleware(request: NextRequest) {
  const cookieStore = cookies()
  const accessToken = cookieStore.get('accessToken')
  if (!accessToken) {
    return NextResponse.redirect('/login')
  }
  if (
    accessToken &&
    (request.nextUrl.pathname.startsWith('/login') ||
    request.nextUrl.pathname.startsWith('/createAccount'))
  ) {
    return NextResponse.redirect('/home')
  }
}

export const config = {
  matcher: [
    '/',
    '/profile/:path*',
    '/home/:path*',
    '/explore/:path*',
    '/messages/:path*',
    '/member/:path*',
    '/mypage/:path*',
    '/notifications/:path*',
    '/record/:path*',
    '/recruit/:path*',

  ],
}

공식문서

• new URL(url)
• new URL(url, base)
• URL 생성자 함수로 새로운 URL 인스턴스(객체) 생성
  매개변수에는 url, base 순이므로 추후 배포 사이트 주소는 base에 들어가게 된다 (requst.url)

// 고친 후 middleware.ts
import { NextRequest, NextResponse } from 'next/server'
import { cookies } from 'next/headers'
import { setHeaderToken } from './func/fetchCall'
export async function middleware(request: NextRequest) {
  const cookieStore = cookies()
  const accessToken = cookieStore.get('accessToken')
  if (!accessToken) {
    return NextResponse.redirect(new URL('/login', request.url))
  }
  if (
    accessToken &&
    (request.nextUrl.pathname.startsWith('/login') ||
    request.nextUrl.pathname.startsWith('/createAccount'))
  ) {
    return NextResponse.redirect(new URL('/home', request.url))
  }
}

export const config = {
  matcher: [
    '/',
    '/profile/:path*',
    '/home/:path*',
    '/explore/:path*',
    '/messages/:path*',
    '/member/:path*',
    '/mypage/:path*',
    '/notifications/:path*',
    '/record/:path*',
    '/recruit/:path*',
  ],
}