Issue
I have an application with next.js, I would like to make a code spliting to reduce my bundle and so that the pages are loaded on demand.
However I didn’t find a way to do this seeing that I don’t care my routes. As an example using react-router, where we can use dynamic imports on routes.
Does anyone know a solution for this?
Solution
Next.js handles this out of the box in the build step.
Each route that can exist as an entry point will be built to have a First Load version and a delta that will be loaded by the router.
You can try this locally by running yarn build && yarn start instead of yarn dev.
If you still want to split and dynamically load parts of your JS, you can check out Next’s Dynamic Imports https://nextjs.org/docs/advanced-features/dynamic-import
Answered By – DBNZ
Answer Checked By – Willingham (BugsFixing Volunteer)