解决nextjs15使用useLocalStorage报错的问题

已经在组件中使用"use client"声明了，还是报错，错误如下:

Unhandled Runtime Error
Error: useLocalStorage is a client-only hook

1.解决方案1-使用 dynamic 导入

import dynamic from 'next/dynamic'
const useLocalStorageComponentNoSSR = dynamic(() => import('./useLocalStorage-component'), {
    ssr: false
})

export default useLocalStorageComponentNoSSR

2.再封装一层,判断是否在客户端环境

写一个ClientOnly组件

"use client";

import React from 'react';
import { useIsClient } from "@uidotdev/usehooks"

type ClientOnlyProps = {
    children: React.ReactNode;
};

export const ClientOnly: React.FC<ClientOnlyProps> = ({ children }) => {
    const isClient = useIsClient();

    // Render children if on client side, otherwise return null
    return isClient ? <>{children}</> : null;
};

然后在page中使用

import { ClientOnly } from "@/components/ClientOnly";
import { UseLocalStorageComponent } from "@/components/useLocalStorage-component";
export default function Page(){
    return (
      <ClientOnly>
         <UseLocalStorageComponent/>       
      </ClientOnly>)
}