반응형
📝미들웨어
미들웨어를 사용하면 요청이 완료되기 전에 코드를 실행 할 수 있습니다.
그런 다음 들어오는 요청에 따라 요청 또는 응답 헤더를 다시 작성, 리디렉션, 수정하거나 직접 응답하여 응답을 수정할 수 있습니다.
미들웨어를 정의하려면 프로젝트 루트에 있는 파일 middleware.ts(또는 )을 사용한다
middleware.ts 예제
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
// This function can be marked `async` if using `await` inside
export function middleware(request: NextRequest) {
return NextResponse.redirect(new URL('/home', request.url))
}
// See "Matching Paths" below to learn more
export const config = {
matcher: '/about/:path*',
}
📝특정 경로만 허용
matcher를 이용한 특정 경로만 middleware 인정
export const config = {
matcher: '/about/:path*',
}
/** ----------------------- **/
export const config = {
matcher: ['/about/:path*', '/dashboard/:path*'],
}
/** ----------------------- **/
export const config = {
matcher: [
/*
* Match all request paths except for the ones starting with:
* - api (API routes)
* - _next/static (static files)
* - _next/image (image optimization files)
* - favicon.ico (favicon file)
*/
'/((?!api|_next/static|_next/image|favicon.ico).*)',
],
}
조건문을 이용한 특정 경로만 middleware 인정
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
export function middleware(request: NextRequest) {
if (request.nextUrl.pathname.startsWith('/about')) {
return NextResponse.rewrite(new URL('/about-2', request.url))
}
if (request.nextUrl.pathname.startsWith('/dashboard')) {
return NextResponse.rewrite(new URL('/dashboard/user', request.url))
}
}
📝쿠키 사용
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
export function middleware(request: NextRequest) {
// Assume a "Cookie:nextjs=fast" header to be present on the incoming request
// Getting cookies from the request using the `RequestCookies` API
let cookie = request.cookies.get('nextjs')
console.log(cookie) // => { name: 'nextjs', value: 'fast', Path: '/' }
const allCookies = request.cookies.getAll()
console.log(allCookies) // => [{ name: 'nextjs', value: 'fast' }]
request.cookies.has('nextjs') // => true
request.cookies.delete('nextjs')
request.cookies.has('nextjs') // => false
// Setting cookies on the response using the `ResponseCookies` API
const response = NextResponse.next()
response.cookies.set('vercel', 'fast')
response.cookies.set({
name: 'vercel',
value: 'fast',
path: '/',
})
cookie = response.cookies.get('vercel')
console.log(cookie) // => { name: 'vercel', value: 'fast', Path: '/' }
// The outgoing response will have a `Set-Cookie:vercel=fast;path=/test` header.
return response
}
손쉽게 쿠키 조작 가능
📝헤더 설정
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
export function middleware(request: NextRequest) {
// Clone the request headers and set a new header `x-hello-from-middleware1`
const requestHeaders = new Headers(request.headers)
requestHeaders.set('x-hello-from-middleware1', 'hello')
// You can also set request headers in NextResponse.rewrite
const response = NextResponse.next({
request: {
// New request headers
headers: requestHeaders,
},
})
// Set a new response header `x-hello-from-middleware2`
response.headers.set('x-hello-from-middleware2', 'hello')
return response
}
손쉽게 헤더 설정 가능
📝응답 설정
import { NextRequest } from 'next/server'
import { isAuthenticated } from '@lib/auth'
// Limit the middleware to paths starting with `/api/`
export const config = {
matcher: '/api/:function*',
}
export function middleware(request: NextRequest) {
// Call our authentication function to check the request
if (!isAuthenticated(request)) {
// Respond with JSON indicating an error message
return Response.json(
{ success: false, message: 'authentication failed' },
{ status: 401 }
)
}
}
손쉽게 응답 설정 가능
반응형
'[Next.js] > [Next 14]' 카테고리의 다른 글
[Next 14] 정적 데이터, 이미지, 폰트, 스크립트, 정적 메타데이터, Opengraph, 동적 메타데이터 (1) | 2024.01.02 |
---|---|
[Next 14] 외부 라이브러리, 런타임(Runtime), CSS Style (0) | 2024.01.02 |
[Next 14] Server Component (SSR), Client Component (CSR) (1) | 2024.01.02 |
[Next 14] 로딩, 서스펜스, 스트리밍 (0) | 2024.01.01 |
[Next 14] Next.js란, 폴더 및 파일 구조, 라우팅, 링크(페이지 연결), 정적 페이지 생성(SSG), 에러 핸들링 (0) | 2024.01.01 |