I'm using Next JS 14 to make a static site, very basic at https://manifestorretreat.com/. Using next/link for the links and I've come across an oddly specific problem.
When I click a link (for example "Topics" in the menu) and use the browser 'back' button, the link is then broken. Other links still work, and this problem only occurs on Mac and iOS on the production site. I've tested my local dev site on my iPhone and it works fine, but the production site doesn't.
If I go bananas and spam click the broken link, the app eventually crashes with a React error code 482, https://react.dev/errors/482?invariant=482:
"async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client'
to a module that was originally written for the server."
Problem is I'm not using any client modules or components, it's just basic Next JSX with Link from 'next/link' and Image from 'next/image'.
The site is deployed on Netlify and I expect the browser back button to not break links even on Apple products.
I tried disabling minification in next config like this:
/** @type {import('next').NextConfig} */
const nextConfig = {
webpack: (config, { dev, isServer }) => {
config.optimization.minimize = false;
return config;
},
};
export default nextConfig;
But I still get the same minification error in production.
Here's the code for the menu:
import Link from 'next/link'
function Menu() {
return (
<nav className="p-1 sm:p-2 text-center text-theme-red font-bold text-lg bg-white">
<Link className="mr-5" href="/">Home</Link>
<Link className="mr-5" href="/topics">Topics</Link>
<Link className="mr-5" href="/about">About</Link>
<Link href="/practical-details">Practical Details</Link>
</nav>
)
}
export default Menu;
The Github repo is public at https://github.com/ChristianBlom84/manifestor-retreat.
Edit: I've tried publishing the site on Vercel, and it works fine, so it seems it's a Netlify issue.
Edit 2: Netlify support says they're "working on it", so I guess the answer is to use Vercel for Next JS sites and not Netlify.