Why do onClick listeners not work with Static Site Generation?

[samwatts98]

Hi!
Forgive me if this is a silly question, still learning Next!

Take this code snippet for example:

import React from 'react'

export default function Home() {
  const [count, setCount] = React.useState(0);
  return (<button onClick={() => setCount(c => ++c)}>{count}</button>)
}

When I run the project in dev mode, this works as expected, on each click the value is incremented.
Now if I run next build and next export then the counter no longer works.

Essentially, I noticed this when porting a regular React project into a Next project, and the Dark Mode toggle button stopped working, along with the nav menu expand/collapse.
Is this more than SSG is cut out for, and should just stick to a regular serverless deployment?

Thanks!

[mattcarlotta]

Unable to replicate. My guess is that your production server isn't serving JS assets.

Working (local staging) example: https://github.com/mattcarlotta/with-static-counter

If you're still running into issues, please provide a working, minimal, and reproducible example of the problem.

[samwatts98]

Thanks for your quick response!

Yes if I serve the static build via express it works as expected.
However I had the intention of supplying the SSG build to GitHub pages, I was under the impression that the output of next export would work as it is without a production server. Perhaps I'm being too naive to expect that opening index.html from the build directory would work?

[mattcarlotta]

Github pages requires quite a few tweaks. You can take a look at the official example, but even that has some asset serving issues. When I was looking into deploying on Github, it required a few additional tweaks not mentioned in the official example (can't remember exactly what), and ultimately I found it to be not worthwhile. Instead, I'd highly recommend deploying to vercel. It's free, it has continuous integration (pushes to the master automatically rebuild the website), custom build commands, and it allows custom domains (provided that you've purchased one). Overall, just a much better DX than Github pages.

[samwatts98]

Brilliant, thank you for the recommendation Matt! In hindsight now that I've migrated the project to Next it does make more sense to make the most of it and move to Vercel.
Thanks again for your time!

[onmyway133]

@mattcarlotta I also have this problem. it works fine when in development, but once I export it, the onClick event does not trigger, and also the react-tweet-embed does not show

[Garamani]

@onmyway133
I have the same problem, did you find the source of this problem?

[Garamani]

I found the problem: Having all CSS styles for all pages in a single file!

Creating a separate CSS file for each page solved the issue.

[thamaraiselvam]

What? how come CSS conflicts with JS?