Next.js - route handler, middleware

Next.js - route handler, middleware

route handler

• 화면에 렌더링되는 페이지를 반환하지 않는 라우트를 설정하는 것.
• 보통 JSON데이터를 반환하거나 수신되는 JSON데이터를 수락하고 JSON응답을 반환한다.
• 따라서 라우트 핸들러의 목적은 API같은 라우트를 설정하여 데이터를 생성, 저장 등 필요한 작업을 전부 수행하되 클라이언트에서 내부적으로 호출하는 것이다.
• 동일한 파일에 라우트 핸들러를 여러 개 설정해서 같은 경로 내 다양한 요청을 처리할 수도 있다.
• 자동으로 요청 객체를 받는다.
• JSON응답이나 평문을 반환할 수 있다.(JSON응답은 유틸리티 메서드의 도움을 받아 반환할 수 있다.)

1. app폴더 내에 api라는 폴더를 생성한다.
2. route.js 파일을 생성한다.
3. 함수 이름은 HTTP method 이름이 있어야한다.
4. 자동으로 요청 객체를 받는다.
5. 반환한다.

export function GET(request) {
  console.log(request);

  // return Response.json(); // JSON응답
  return new Response("Hello!"); // 평문 반환
}

[참고] route handler 관련 문서

middleware

• 수신하는 요청을 살펴보고 변경하거나 차단해서 인증을 구현하고 다른 페이지로 리다이렉션하는 것이다.(사용자가 인증되지 않았다면!)
• 미들웨어는 페이지, 라우트 등 전체 웹사이트로 전송된 요청에서 실행할 코드를 설정하도록 허용한다.
• 따라서 해당 요청 블록을 검사하거나 리다이렉션할 수 있다.
• 자동으로 요청 객체를 받는다.
• .next() 메서드로 들어오는 요청을 실제 대상으로 전달하기도 한다.
• .redirect()로 리다이렉트를 처리한다.

1. 프로젝트 루트 경로에 middleware.js 파일을 생성한다.
2. 함수 이름은 middleware로 만든다.
3. 자동으로 요청 객체를 받는다.
4. NextResponse(next/server)를 반환한다.

import { NextResponse } from "next/server";

export function middleware(request) {
  console.log(request);

  return new NextResponse.next();
}

[참고] middleware 관련 문서

config

• config라는 이름의 변수 또는 상수이자 객체여야한다.
• 매처 프로퍼티를 설정할 수 있다.
• 미들웨어를 트리거하는 요청을 필터링하도록 한다.

export const config = {
  matcher: "/news",
};