next.js - Reference Error:Navigator not defined with nextjs

Question

My code is like this:

import React, { useEffect } from 'react';

import alanBtn from '@alan-ai/alan-sdk-web';

const alanKey = my key;
const App = () => {
    useEffect(() => {
        alanBtn({
            key: alanKey,
            onCommand: ({ command }) => {
                    alert('This code was executed');
            }
        })
    }, []);
    return (
        <div><h1>Alan AI News Application</h1></div>);
}
export default App;

But i am getting the error as: Reference Error:Navigator not defined.. How to fix it?

Answer 1

Browser objects like window , navigator etc should be define in useEffect first before use.

  const [pageURL, setPageURL] = useState("");
  const [isNativeShare, setNativeShare] = useState(false);
  useEffect(() => {
    setPageURL(window.location.href);
    if (navigator.share) {
      setNativeShare(true);
    }
  }, []);

// Now, use can use pageURL , isNativeShare in code