Performance improvement in an application with next.js

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