Client-side JS code

[mauricefaeh]

I'm fairly new to react and new to next.

With react I can easily access the navigator.language on the client side. F.ex.:

function BrowserLanguage() { return( <div>{navigator.language}</div> ) }

This doesn't work with next.
How would you do that?
How do you run client-side JS code like that?

Thank you in advance.

[jozsefsallai]

Next.js does server-side rendering, which means the underlying server cannot access things like navigator. You want to use the componentDidMount() hook:

componentDidMount() {
  console.log(navigator.language);
}

[mauricefaeh]

Thank you.

I had assumed that next.js would ONLY pre-render components in pages/ IF they received props from getStaticProps() or getServerSideProps().

I'm not sure what to make of this yet.

But I took your feedback and did the following, because I want to use react function components with hooks instead of classes:

import { useState, useEffect } from 'react';

export default function BrowserLanguage() {
  const [language, setLanguage] = useState();

  useEffect(() => {
    if(typeof window !== 'undefined') {
      setLanguage(navigator.language);
    }
  })

  return (
    <div>
      <p>You're main browser language is {language}</p>
    </div>
  )
}

[zackdotcomputer]

New versions of Next do what's called "Automatic Static Optimization" for pages that include neither getStaticProps or getServerSideProps. You can read more about it here in the docs.

The upside of ASO is that it makes your pages render much more quickly by handling a lot of the initial document tree rendering on the serverside. The downside is that SSR errors like this one have become a bit trickier to catch.

While you can disable ASO across your entire site, you don't have to. There is a simple workaround for gating code into either "client-only" or "server-only" code. If you wrap code in either of the following if checks, the ASO will recognize that it should be run only in one context (server/client) and will ignore it in the other:

if (typeof window === "undefined") {
  // This code will only run during SSR
}

if (typeof window !== "undefined") {
  // This code will only run on your client
}