Search code examples
javascriptreactjsnext.jsnavigator

React JS - How to detect navigator.platform in Next JS

I'm writing a small function in Next JS with react. When I use navigator, I get the following error.

ReferenceError: navigator is not defined

Here's my code:

import React from "react";

export default function App() {

const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;

  return (
   {isMac ? "I'm mac" : "I'm windows"}
  );
}

How do I get browser platform and then render a section based on that?

Solution

  • Essentially, this is what I need to write.

    const isMac = typeof window !== 'undefined' ? navigator.platform.toUpperCase().indexOf("MAC") >= 0 : false;