🗂
【Next.js】navigator is not defined の対処法
解決策
以下のようにdynamic
を使用してコンポーネントを読み込む
import dynamic from "next/dynamic";
const Hoge = dynamic(() => import(コンポーネントパス), { ssr: false });
function()でコンポーネント定義している場合
components/hoge.tsx
export default function Hoge() {
... navigator を使用した処理
return <p>hoge</p>;
}
index.tsx
import dynamic from "next/dynamic"
const Hoge = dynamic(() => import("components/hoge"),{ ssr: false });
export const Home: NextPage = () => {
return <Hoge />
}
const等でコンポーネント定義している場合
components/hoge.tsx
export const Hoge = () => {
... navigator を使用した処理
return <p>hoge</p>;
}
index.tsx
import dynamic from "next/dynamic"
const Hoge = dynamic(() => import("components/hoge").then((mod) => mod.Hoge),{ ssr: false });
export const Home: NextPage = () => {
return <Hoge />
}
Discussion