next.js 如何在nextjs中为服务器端编写中间件

i2loujxw 于 2022-11-05 发布在其他

关注(0)|答案(2)|浏览(351)

我需要一个中间件在我的nextjs项目，这是一个monorepo（前端和后端在同一个项目），我需要拦截通过中间件的请求，并做的东西，我基本上做的每一个API：我看了一下to this，但是我不知道如何得到实际的请求（头，体，查询字符串等）。
因此，我在/pages文件夹下创建了文件_middleware.ts，并执行以下操作：

import type { NextFetchEvent, NextRequest } from 'next/server';
import { NextResponse } from 'next/server';

export async function middleware(req: NextRequest, ev: NextFetchEvent) {
  console.log('request - - -- - >', req);
}

我以为在req参数中我有完整的请求，但事实上，如果我记录它，我会得到以下结果：

NextRequestHint [Request] {
  sourcePage: '/_middleware',
  [Symbol(internal body)]: { bodyInit: null, disturbed: false },
  [Symbol(internal request)]: {
    credentials: 'same-origin',
    headers: BaseHeaders [Headers] { [Symbol(map)]: [Object] },
    method: 'GET',
    referrer: 'about:client',
    redirect: 'follow',
    url: NextURL { [Symbol(NextURLInternal)]: [Object] }
  },
  [Symbol(internal request)]: {
    cookieParser: [Function: cookieParser],
    geo: {},
    ip: undefined,
    page: { name: '/[user]', params: [Object] },
    url: NextURL { [Symbol(NextURLInternal)]: [Object] }
  }
}

有没有办法在这里得到完整的请求？或者有没有其他的方法来做一个中间件，我可以做我为每个API做的一般事情？谢谢。

版本下一个js：12.0.9

next.js

来源：https://stackoverflow.com/questions/71654292/how-to-write-a-middleware-in-nextjs-for-serverside

2条答案

按热度按时间

c2e8gylq1#

NextRequest类扩展了一个基于its native counterpart的Request接口。您可以在以下文件中查看可用的不同属性：

node_modules/next/dist/server/web/spec-extension/request.js
node_modules/typescript/lib/lib.dom.d.ts

访问它们的方式如下所示：

// pages/api/_middleware.ts
import type { NextFetchEvent, NextRequest } from "next/server";
import { NextResponse } from "next/server";

const streamToString = async (stream: ReadableStream<Uint8Array> | null) => {
  if (stream) {
    const chunks = [];
    for await (const chunk of stream) {
      chunks.push(Buffer.from(chunk));
    }
    return Buffer.concat(chunks).toString("utf-8");
  }
  return null;
};

export async function middleware(req: NextRequest, ev: NextFetchEvent) {
  console.log("Method:", req.method);
  console.log("Content-Type:", req.headers.get("content-type"));
  console.log("Route:", req.nextUrl.pathname);
  console.log("Query String:", req.nextUrl.search);
  console.log("Query Parameters:", req.nextUrl.searchParams);
  console.log("Body:", await streamToString(req.body));

  // do your stuff on the `Request`

  const res = NextResponse.next();

  // do your stuff on the `Response`

  return res;
}

赞(0）回复(0）举报 2022-11-05

kgsdhlau2#

从几个月前开始，不赞成使用嵌套的_middleware.ts文件，而赞成使用位于项目根目录中的单个middleware.ts文件。
您可以在以下链接中找到更多信息：
https://github.com/vercel/next.js/pull/36772
https://nextjs.org/docs/messages/nested-middleware
此致！

赞(0）回复(0）举报 2022-11-05

我来回答

next.js 如何在nextjs中为服务器端编写中间件

2条答案

相关问题

热门标签

最新问答