如何在 Nextjs 中间件中使用 Hook？

Question

我有这样的中间件

import type { NextFetchEvent, NextRequest } from "next/server";
import { NextResponse } from "next/server";
import { useCheckIsAdminQuery } from "../../generated/graphql";

export function middleware(req: NextRequest, ev: NextFetchEvent) {
    
    const {data,loading,error} = useCheckIsAdminQuery()
    if(data?.checkIsAdmin){
        return NextResponse.next()
    }else{
        const url = req.nextUrl.clone()
        url.pathname = '/404'
        return NextResponse.redirect(url)
    }

    
}

useCheckIsQuery() 只是一个钩子是由 codegen 包生成的，但我不能在中间件中调用这个钩子。错误显示

Invalid hook call. Hooks can only be called inside of the body of a function component.

我该如何解决？

Answer 1

根据 React 文档：“Don't call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns.”。

Nextjs 的中间件不是 React 函数，所以你不能在里面使用 hooks。解决你的问题的方法是用你的自定义逻辑创建一个钩子，并在你想要生效的页面中手动调用它。

如何在 Nextjs 中间件中使用 Hook？

How to use Hook inside Nextjs middleware?

graphql

next.js