我在我的Next.js应用程序中遇到一个错误，当我试图使用TRPC（类型化RPC）库的useMutation钩子时。我得到的错误消息是TypeError: Cannot read properties of null (reading 'useContext')。它似乎与useContext挂钩有关，但我不确定如何解决它。
以下是Next.js组件中的相关代码片段，包括TRPC设置：

/// trpc router
import { api } from "~/utils/api";
import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
import { input, z } from "zod";

export const signUpRouter = createTRPCRouter({
  register: publicProcedure
    .input(z.object({ email: z.string().email(), password: z.string().min(8) }))
    .mutation(async ({ input }) => {
      try {
        // Code inside the mutation
      } catch (error) {
        console.log(error);
        return "An error occurred while processing the request.";
      }
    }),
});

/// this signup form

const mutation = api.user.register.useMutation();

const handleSignUp = (values: { email: string; password: string }) => {
  mutation.mutate({
    email: values.email,
    password: values.password,
  });
};

export const SignUpForm = () => {
  // ...
};

我已经检查了useMutation钩子的导入、依赖项和用法。但是，我仍然遇到这个错误。我怀疑这可能与TRPC库和Next.js之间的交互有关，或者与我在TRPC中使用useMutation钩子的方式有关。
有人在使用TRPC和Next.js时遇到过类似的问题吗？任何关于可能导致此错误的原因以及如何解决此错误的建议都将不胜感激。