Next JS is a fantastic framework, but it produces some eye-watering client-side JavaScript bundles, thanks to React JS’s notorious bundle sizes.
You can completely disable the client-side Javascript bundles with this little snippet:
- Code language
- js
export const config = { unstable_runtimeJS: false };
This is an experimental/beta feature, it seems, but I can vouch for how effective it is because every single page on this site is powered by Next JS and has 0kb of client-side React code!
Here’s an entire page component with this snippet in context, that you can use as a template for pages that you want client-side JavaScript to be disabled on:
- Code language
- js
export const config = { unstable_runtimeJS: false }; export default function MyLightweightPage({message}) { return ( <article> <p>{message}</p> </article> ); } export async function getStaticProps() { return { props: { message: 'Hello, world' } }; }