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 making the error as:

Reference Error:Navigator not defined..

What is the solution?

Answer 1

Browser objects like window , navigator etc should be defined 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, you can use pageURL, isNativeShare in code