middleware

미들웨어 사용 케이스

특징

1. 모든 request당 이 미들웨어가 실행
(페이지이동, css, js, 이미지, favicon 등..)

2. Edge runtime에서 실행됨. (node.js가 아님)
1. 미들웨어에서 사용되는 node.js의 경량 버전
2. 모든 요청에 middleware가 실행되다보니, 처리에 시간이 걸리는 nodeJS 전용 api(ex. prisma)는 실행할 수 없음
3. 호환 api 목록 : https://nextjs.org/docs/app/api-reference/edge

만드는 방법

1. app과 같은 레벨에 middleware.ts 파일을 만듦

2. middleware 이름을 가진 일반함수 작성 ㅇㅇ
• 비동기이든, 매개변수가 뭐든 상관없음
• request:NextRequest를 매개변수로 가질 수 있음
https://nextjs.org/docs/app/api-reference/functions/next-request

특정 요청에만 middleware가 실행되도록 하는법

1. 방법1. if-else

2. 방법2. matcher
1) middleware.ts 파일에 config 라는 이름의 객체 생성,
2) matcher key로 middleware를 거쳐갈 path 작성

export const config = {
	matcher: ["/", "/user/:path*",]
}

//정규식을 사용해서 제외할 수도 있음
// 브라우저가 요청하는 url 제외하기
export const config = {
	matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",]
}

• 이걸 하지 않고 리다이렉트 하는 응답을 리턴하면, css도 적용이 안되는 문제 발생~

middleware에서 할 수 있는 작업 예시

1. 응답 조작하기

//json데이터가 담긴 응답
return Response.json({error: "this is not available"})
//url(절대경로여야 함)로 이동하는 응답
return Response.redirect(new URL(”/”,request.url))

2. 사용자에게 주는 실제 응답에 쿠키를 넣기

• NextResponse : 표준 웹 API의 Response 객체를 확장한 형태
https://nextjs.org/docs/app/api-reference/functions/next-response

import { NextResponse } from 'next/server'

...
	const response = NextResponse.next() //요청을 그대로 진행. 실제응답을 리턴
	response.cookies().set("middleware-cookie") //응답에 쿠키 끼워넣기
	 
	return response
}

3. 세션 작업

import { NextRequest, NextResponse } from "next/server";
import getSession from "./libs/session";

const publicPathnames = new Set(["/", "/login", "/create-account", "/sms"]);

export async function middleware(request: NextRequest) {
  const session = await getSession();
  const isPublic = publicPathnames.has(request.nextUrl.pathname);
  if (!session.id && !isPublic) {
    return NextResponse.redirect(new URL("/", request.url));
  }
  if (session.id && isPublic) {
    console.log(request.url);

    return NextResponse.redirect(new URL("/products", request.url));
  }
}

export const config = {
  matcher: [
    "/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
  ],
};

• Next.js에는 애플리케이션에서 사용할 수 있는 두 가지 서버 런타임
1. Node.js 런타임(기본값): 생태계의 모든 Node.js API 및 호환 패키지에 액세스
2. Edge 런타임: 제한된 API를 지원하는 Edge 런타임

• new URL(url,baseUrl)는 baseUrl의 path이하를 뺀 링크를 의미