Middleware

1
import { NextResponse } from 'next/server'
2
import type { NextRequest } from 'next/server'
3

4
// 만약 내부에서 `await`을 사용한다면, 이 함수는 `async`로 표시될 수 있습니다.
5
export function middleware(request: NextRequest) {
6
  return NextResponse.redirect(new URL('/home', request.url))
7
}
8

9
// 아래의 "경로 일치"를 참조하여 더 자세히 알아보세요.
10
export const config = {
11
  matcher: '/about/:path*',
12
}

1
export const config = {
2
  matcher: '/about/:path*',
3
}

1
export const config = {
2
  matcher: ['/about/:path*', '/dashboard/:path*'],
3
}

1
export const config = {
2
  matcher: [
3
    /*
4
     * 다음과 같이 시작하는 경로를 제외한 모든 요청 경로와 일치시킵니다.
5
     * - api (API 경로)
6
     * - _next/static (정적 파일)
7
     * - _next/image (이미지 최적화 파일)
8
     * - favicon.ico (파비콘 파일)
9
     */
10
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
11
  ],
12
}

1
export const config = {
2
  matcher: [
3
    /*
4
     * Match all request paths except for the ones starting with:
5
     * - api (API routes)
6
     * - _next/static (static files)
7
     * - _next/image (image optimization files)
8
     * - favicon.ico (favicon file)
9
     */
10
    {
11
      source: '/((?!api|_next/static|_next/image|favicon.ico).*)',
12
      missing: [
13
        { type: 'header', key: 'next-router-prefetch' },
14
        { type: 'header', key: 'purpose', value: 'prefetch' },
15
      ],
16
    },
17
  ],
18
}

1
import { NextResponse } from 'next/server'
2
import type { NextRequest } from 'next/server'
3

4
export function middleware(request: NextRequest) {
5
  if (request.nextUrl.pathname.startsWith('/about')) {
6
    return NextResponse.rewrite(new URL('/about-2', request.url))
7
  }
8

9
  if (request.nextUrl.pathname.startsWith('/dashboard')) {
10
    return NextResponse.rewrite(new URL('/dashboard/user', request.url))
11
  }
12
}

1
import { NextResponse } from 'next/server'
2
import type { NextRequest } from 'next/server'
3

4
export function middleware(request: NextRequest) {
5
  // 들어오는 요청에 "Cookie: nextjs=fast" 헤더가 있는 것으로 가정
6
  // `RequestCookies` API를 사용하여 요청에서 쿠키 가져오기
7
  let cookie = request.cookies.get('nextjs')
8
  console.log(cookie) // => { name: 'nextjs', value: 'fast', Path: '/' }
9
  const allCookies = request.cookies.getAll()
10
  console.log(allCookies) // => [{ name: 'nextjs', value: 'fast' }]
11

12
  request.cookies.has('nextjs') // => true
13
  request.cookies.delete('nextjs')
14
  request.cookies.has('nextjs') // => false
15

16
  // `ResponseCookies` API를 사용하여 응답에 쿠키 설정하기
17
  const response = NextResponse.next()
18
  response.cookies.set('vercel', 'fast')
19
  response.cookies.set({
20
    name: 'vercel',
21
    value: 'fast',
22
    path: '/',
23
  })
24
  cookie = response.cookies.get('vercel')
25
  console.log(cookie) // => { name: 'vercel', value: 'fast', Path: '/' }
26
  // 나가는 응답에는 `Set-Cookie: vercel=fast; path=/test` 헤더가 포함됨
27

28
  return response
29
}

1
import { NextResponse } from 'next/server'
2
import type { NextRequest } from 'next/server'
3

4
export function middleware(request: NextRequest) {
5
  // 요청 헤더를 복제하고 새로운 헤더 `x-hello-from-middleware1`를 설정
6
  const requestHeaders = new Headers(request.headers)
7
  requestHeaders.set('x-hello-from-middleware1', 'hello')
8

9
  // NextResponse.rewrite에서도 요청 헤더를 설정할 수 있음
10
  const response = NextResponse.next({
11
    request: {
12
      // 새 요청 헤더
13
      headers: requestHeaders,
14
    },
15
  })
16

17
  // 새 응답 헤더 `x-hello-from-middleware2` 설정
18
  response.headers.set('x-hello-from-middleware2', 'hello')
19
  return response
20
}

1
import { NextRequest, NextResponse } from 'next/server'
2
import { isAuthenticated } from '@lib/auth'
3

4
// 미들웨어를 `/api/`로 시작하는 경로로 제한
5
export const config = {
6
  matcher: '/api/:function*',
7
}
8

9
export function middleware(request: NextRequest) {
10
  // 요청을 확인하기 위해 인증 함수를 호출
11
  if (!isAuthenticated(request)) {
12
    // 오류 메시지를 나타내는 JSON으로 응답
13
    return new NextResponse(JSON.stringify({ success: false, message: 'authentication failed' }), {
14
      status: 401,
15
      headers: { 'content-type': 'application/json' },
16
    })
17
  }
18
}

1
import { NextResponse } from 'next/server'
2
import type { NextFetchEvent, NextRequest } from 'next/server'
3

4
export function middleware(req: NextRequest, event: NextFetchEvent) {
5
  event.waitUntil(
6
    fetch('https://my-analytics-platform.com', {
7
      method: 'POST',
8
      body: JSON.stringify({ pathname: req.nextUrl.pathname }),
9
    }),
10
  )
11

12
  return NextResponse.next()
13
}

1
module.exports = {
2
  skipTrailingSlashRedirect: true,
3
}

1
const legacyPrefixes = ['/docs', '/blog']
2

3
export default async function middleware(req) {
4
  const { pathname } = req.nextUrl
5

6
  if (legacyPrefixes.some(prefix => pathname.startsWith(prefix))) {
7
    return NextResponse.next()
8
  }
9

10
  // trailing slash 처리 적용
11
  if (!pathname.endsWith('/') && !pathname.match(/((?!\.well-known(?:\/.*)?)(?:[^/]+\/)*[^/]+\.\w+)/)) {
12
    req.nextUrl.pathname += '/'
13
    return NextResponse.redirect(req.nextUrl)
14
  }
15
}

1
module.exports = {
2
  skipMiddlewareUrlNormalize: true,
3
}

1
export default async function middleware(req) {
2
  const { pathname } = req.nextUrl
3

4
  // GET /_next/data/build-id/hello.json
5

6
  console.log(pathname)
7
  // 플래그가 있으면 /_next/data/build-id/hello.json
8
  // 플래그가 없으면 /hello로 정규화됨
9
}