next api middleware
v3.0.0
켈 이 라이브러리는 Next.js Pages 라우터를 사용하는 API 경로를 지원하기 위해 작성되었습니다. 앱 라우터로 테스트되지 않았습니다.
다음 .js API 경로는 REACT 앱에 백엔드 기능을 추가하는 엄청나게 재미 있고 간단한 방법입니다. 그러나 미들웨어를 추가 할 때가되면 쉽게 구현할 수있는 방법이 없습니다.
공식 Next.js Docs는 API 경로 핸들러 내부에 기능을 작성하는 것이 좋습니다. 이것은 Express.js 또는 Koa.js에서 제공하는 깨끗한 API에 비해 거대한 단계입니다.
이 라이브러리는 생산적이고 사용하기에 즐거운 최소한의 깨끗하며 종합 가능한 미들웨어 패턴을 제공하려고 시도합니다.
labeluse import { label , Middleware } from "next-api-middleware" ;
import * as Sentry from "@sentry/nextjs" ;
import nanoid from "nanoid" ;
// 1 – Create middleware functions
const captureErrors : Middleware = async ( req , res , next ) => {
try {
// Catch any errors that are thrown in remaining
// middleware and the API route handler
await next ( ) ;
} catch ( err ) {
const eventId = Sentry . captureException ( err ) ;
res . status ( 500 ) ;
res . json ( { error : err } ) ;
}
} ;
const addRequestId : Middleware = async ( req , res , next ) => {
// Let remaining middleware and API route execute
await next ( ) ;
// Apply header
res . setHeader ( "X-Response-ID" , nanoid ( ) ) ;
} ;
// 2 – Use `label` to assemble all middleware
const withMiddleware = label (
{
addRequestId ,
sentry : captureErrors , // <-- Optionally alias middleware
} ,
[ "sentry" ] // <-- Provide a list of middleware to call automatically
) ;
// 3 – Define your API route handler
const apiRouteHandler = async ( req , res ) => {
res . status ( 200 ) ;
res . send ( "Hello world!" ) ;
} ;
// 4 – Choose middleware to invoke for this API route
export default withMiddleware ( "addRequestId" ) ( apiRouteHandler ) ; 이 라이브러리가 미들웨어 기능을 처리하는 방법에 대한 내 정신 모델은 "와인딩 및 풀링 스택"의 것입니다.
label 사용하여 API 경로에 두 개의 미들웨어 기능을 추가한다고 상상해 봅시다.
요청이 들어 오면 해당 요청이 모든 미들웨어 기능, API 경로 처리기 자체를 통한 다음 미들웨어를 통해 백업하는 방법에 대한 대략적인 인상입니다.
|-----------------|-----------------|--------------------|
| Middleware #1 | Middleware #2 | API Route Handler |
|-----------------|-----------------|--------------------|
| | | |
Request ------|----> Setup -----|----> Setup -----|-->------| |
| | | | |
|-----------------|-----------------| V |
| | | |
| await next() | await next() | API stuff |
| | | |
|-----------------|-----------------| | |
| | | | |
Response <----|--- Teardown <---|--- Teardown <---|---------| |
| | | |
|-----------------|-----------------|--------------------|
이것은 어리석은 ASCII 다이어그램이지만 올바른 인상을 준다고 생각합니다. 요청은 각 미들웨어가 연속적으로 작동하지만 API 경로 핸들러에 도달 한 다음 스택을 통해 "풀림"으로 진행합니다.
모든 미들웨어 기능은 세 단계를 거칠 수 있습니다.
"설정"단계는 await next() . "대기"단계는 실제로 await next() . "Teardown"단계는 await next() .
이러한 단계가 모든 미들웨어 기능에 사용할 수 있지만 모든 것을 활용할 필요는 없다는 점은 주목할 가치가 있습니다.
예를 들어, 미들웨어를 잡는 오류가 발생하면 try / catch 블록으로 await next() 수 있습니다. 반면에 설정 단계에서 시작 시간을 캡처 한 타이밍 미들웨어를 요청하고 기다린 다음 파열 단계에서 마감 시간을 캡처 할 수 있습니다.
label이것은 많은 Next.js API 경로 전체에서 사용할 수있는 미들웨어 컬렉션을 생성하는 주요 유틸리티입니다.
const withMiddleware = label ( middleware , defaults ) ; middleware : 미들웨어 기능 또는 미들웨어 배열이 포함 된 개체defaults : (선택 사항) 자동으로 호출 될 middleware 키 배열 label 카레링을 사용하여 호출 할 withMiddleware 이름 목록을 수락 한 다음 Next.js API 처리기 기능을 반환합니다.
일반적으로 withMiddleware API Route 파일에서 가져오고 기본 내보내기 명령문에서 사용됩니다.
import { withMiddleware } from "../helpers/my-middleware" ;
const apiRouteHandler = async ( req , res ) => {
...
}
export default withMiddleware ( "foo" , "bar" , "baz" ) ( apiRouteHandler ) ; label 에는 많은 미들웨어 기능이 포함될 수 있지만 API 경로에서 호출 한 실제 미들웨어는 withMiddleware 에 전달 된 이름에 의해 결정됩니다.
const logErrors = async ( req , res , next ) => {
try {
await next ( ) ;
} catch ( error ) {
console . error ( error ) ;
res . status ( 500 ) ;
res . json ( { error } ) ;
}
} ;
const withMiddleware = label ( {
logErrors ,
} ) ;
// export default withMiddleware("logErrors")(apiRouteHandler); const withMiddleware = label ( {
error : logErrors ,
} ) ;
// export default withMiddleware("error")(apiRouteHandler); import { foo , bar , baz } from "./my-middleware" ;
const withMiddleware = label ( {
error : logErrors ,
myGroup : [ foo , bar , baz ] ,
} ) ;
// export default withMiddleware("error", "myGroup")(apiRouteHandler); const withMiddleware = label (
{
error : logErrors ,
myGroup : [ foo , bar , baz ] ,
} ,
[ "error" ]
) ;
// export default withMiddleware("myGroup")(apiRouteHandler);use 이 유틸리티는 미들웨어 기능을 직접 받아들이고 모든 것을 순서대로 실행합니다. 일회성 미들웨어 기능을 처리하는 데 유용 할 수있는 label 에 대한 간단한 대안입니다.
const withInlineMiddleware = use ( ... middleware ) ; middleware : 미들웨어 기능 및/또는 미들웨어 기능 배열 목록 use Next.js API 경로 처리기를 수락하는 함수를 반환합니다.
import { use } from "next-api-middleware" ;
import cors from "cors" ;
const apiRouteThatOnlyNeedsCORS = async ( req , res ) => {
...
}
export default use ( cors ( ) ) ( apiRouteThatOnlyNeedsCORS ) ; label 및 use 의 자세한 예제는 예제를 참조하십시오.
use 및 label 미들웨어 기능을 평가하는 값을 허용하기 때문에 사용자 정의 미들웨어 공장을 만들 수있는 기회를 제공합니다.
다음은 주어진 HTTP 방법으로 요청 만 허용하는 미들웨어 기능을 생성하는 공장의 예입니다.
import { Middleware } from "next-api-middleware" ;
const httpMethod = (
allowedHttpMethod : "GET" | "POST" | "PATCH"
) : Middleware => {
return async function ( req , res , next ) {
if ( req . method === allowedHttpMethod || req . method == "OPTIONS" ) {
await next ( ) ;
} else {
res . status ( 404 ) ;
res . end ( ) ;
}
} ;
} ;
export const postRequestsOnlyMiddleware = httpMethod ( "POST" ) ; Middleware Koa.js가 대중화 한 비동기 미들웨어 스타일에서 영감을 얻었습니다.
type Middleware < Request = NextApiRequest , Response = NextApiResponse > = (
req : Request ,
res : Response ,
next : ( ) => Promise < void >
) => Promise < void > ; 
