nextjs middleware rewrite를 통해 서브 도메인 적용하기

nextjs middleware rewrite를 통해 서브 도메인 적용하기

rewrite 기능을 사용하여 간단하게 사용자별 서브 도메인을 생성하는 방법

예를 들어 아래와 같이 path에 사용자 이름을 사용하지 않고 메인 도메인 앞에 사용자 이름이 붙는 형식이다

(티스토리가 사용자별 서브 도메인을 사용하고 있다)

localhost:3000/blog/[username] -> [username].localhost:3000

 

프로젝트 디렉토리 구조

 

미들웨어 적용하기

프로젝트 루트 경로(approuter에서 app 폴더와 같은 위치)에 "middleware.ts"을 생성

config는 페이지 요청 이외의 다른 요청에 대해서는 middleware를 적용하지 않도록 지정

// /middleware.ts

import { NextRequest, NextResponse } from 'next/server'

export const middleware = (req: NextRequest) => {
  const host = req.headers.get('host')!

  //서브 도메인이 없는 경우
  if (
    host === 'localhost:3000' ||
    host === process.env.NEXT_PUBLIC_ROOT_DOMAIN
  ) {
    return NextResponse.next()
  }
  //서브 도메인이 있는 경우
  const subdomain = host.replace('.localhost:3000', '')

  const searchParams = req.nextUrl.searchParams.toString()

  const path = `${req.nextUrl.pathname}${
    searchParams.length > 0 ? `?${searchParams}` : ''
  }`

  const nextURL = new URL(`/blog/${subdomain}${path}`, req.url)
  return NextResponse.rewrite(nextURL)
}

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
}

 

 

 

서브도메인 적용 후