我有一个Nextjs应用程序。我想使用Firebase对用户进行身份验证。但是我想要一些页面在客户端呈现，一些页面在服务器端呈现。但是，当我在_app.tsx中使用这个Hook时，所有页面都呈现在客户端。

如何在特定页面上使用此钩子，以便只在客户端呈现该页面？

_app.tsx

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <UserAuthContentProvider>
      <Layout>
        <Component {...pageProps} />
      </Layout></UserAuthContentProvider>
  );
}

授权上下文钩子

export const auth = getAuth(app);
const AuthContext = createContext<any>({});
export const useAuthContextProvider = () => useContext(AuthContext);

export const UserAuthContentProvider = ({
    children,
}: {
    children: React.ReactNode;
}) => {
    const router = useRouter();
    const [user, setUser] = useState<User | null>(null);
    const [loading, setLoading] = useState(true);
    const [isUserAuthenticated, setIsUserAuthenticated] = useState(false);

    useEffect(() => {
        const unsubscribe = onAuthStateChanged(auth, (user) => {
            if (user) {
                setUser(user);
                setIsUserAuthenticated(true);
            } else {
                setUser(null);
                setIsUserAuthenticated(false);
            }
            setLoading(false);
        });
        return () => unsubscribe();
    });
};

const signUp = async (email: string, password: string) => {
    await createUserWithEmailAndPassword(auth, email, password).then((result) => {
        if (!result.user.emailVerified) {
            router.push("/verification");
        } else {
            router.push("/dashboard");
        }
    });
};

const logIn = async (email: string, password: string) => {
    await signInWithEmailAndPassword(auth, email, password).then((result) => {
        if (!result.user.emailVerified) {
            router.push("/verification");
        } else {
            router.push("/dashboard");
        }
    });
};

const logOut = async () => {
    setUser(null);
    await auth.signOut().finally(() => {
        router.push("/");
    });
};

return (
    <AuthContext.Provider
        value={{
            user,
            logIn,
            signUp,
            logOut,
            isUserAuthenticated,
        }}
    >
        {loading ? null : children}
    </AuthContext.Provider>
);