🗂

【Next.js】navigator is not defined の対処法

2023/01/17に公開

解決策

以下のように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