Dynamically Loading React Components with next-mdx-remote and Next.js Dynamic imports

Next.js is all about creating performant web applications. However, the more React components we pull into our MDX via next-mdx-remote, the heavier our JavaScript becomes which drains our site's performance. Also, while we might have quite a few React components to be included in our Markdown rendered content, we might not always use all of them in our articles.

In this lesson, we learn how to leverage Next.js dynamic imports to just pull the minimum necessary components into our final JavaScript bundle. Also, we look into why we might want to do deep imports into our Nx library setup to decrease the size of the bundle even more.

Prefer to read along as well? Here's the accompanying article.