Next.js Dynamic Imports: Preloading Guide

Updated 7 November 2026 · Standard formula, shown below

This guide shows you how to declare Next.js dynamic imports so that critical JavaScript chunks are preloaded, improving initial load performance. You’ll learn the syntax, when to use webpackPreload vs webpackChunkName, and how to verify the preload behavior in the browser. No prior Next.js knowledge beyond basic dynamic imports is needed.

What You’ll Need

A Next.js project (version 10 or newer is recommended, but the concepts apply to most versions)
Basic familiarity with next/dynamic and React components
A browser’s developer tools (to verify preloads in the Network tab)

Step-by-Step

Identify which components need preloading. Preload only components that are critical for the initial render or above-the-fold content. For example, a hero image carousel or a primary navigation component. Over-preloading can hurt performance by competing with other resources.
Convert your static import to a dynamic import. Replace import MyComponent from './MyComponent' with const MyComponent = dynamic(() => import('./MyComponent')) using next/dynamic. This alone creates a separate chunk that is loaded on demand.
Add a webpack chunk name. Inside the dynamic import, add the webpackChunkName magic comment. This gives the chunk a readable name, which makes it easier to track in the Network tab and helps with caching. Example: dynamic(() => import(/* webpackChunkName: "hero" */ './Hero')).
Add the preload directive. To tell webpack to preload this chunk, add /* webpackPreload: true */ to the same comment. The syntax becomes: dynamic(() => import(/* webpackChunkName: "hero", webpackPreload: true */ './Hero')). This tells webpack to generate a <link rel="preload"> for the chunk in the initial HTML.
Consider using webpackPrefetch instead. If the component is not needed immediately but will be needed soon (e.g., below the fold), use webpackPrefetch: true instead of preload. Preload fetches with high priority, while prefetch fetches with low priority after the page loads. Choose based on urgency.
Test with the ssr option. By default, dynamic components are server-side rendered. If you need to disable SSR (e.g., for components that rely on browser APIs), add { ssr: false } as a second argument to dynamic(). Note that preload still works with SSR disabled, but the component will only render on the client.
Verify in the browser. Run npm run build and then npm start. Open your page, go to the Network tab, and filter by “JS”. Look for the chunk name you set (e.g., hero.js). You should see it loaded with a “Preload” initiator. Also, view the page source and look for <link rel="preload" as="script" href="/_next/static/chunks/hero.js">.
Optimize further with a custom webpack config if needed. For advanced control, you can modify next.config.js to adjust the chunk filename pattern or add additional webpack plugins. However, the magic comments are usually sufficient.

Common Mistakes

Preloading everything. Preloading all dynamic chunks defeats the purpose of code-splitting. Only preload what’s critical for initial render.
Using preload for below-the-fold content. If a component is not visible immediately, use prefetch instead. Preloading it will waste bandwidth and delay other critical resources.
Forgetting the chunk name. Without a chunk name, webpack generates a random number, making it hard to identify the chunk in the network tab and leading to less predictable caching.
Placing comments incorrectly. The magic comments must be inside the import() call, directly before the module path. Putting them outside or after the path will not work.
Using preload with a component that is already imported statically elsewhere. If the same module is also imported statically, it will be included in the main bundle, and the dynamic import may not create a separate chunk. Ensure the component is only imported dynamically.

Tips

Combine preload with loading states. Use the loading prop of dynamic() to show a fallback UI while the chunk loads. This improves perceived performance.
Use suspense for React 18+. If you’re using React 18 or later, you can use suspense: true in the dynamic options to enable Suspense-based loading, which works well with preloaded chunks.
Check the size of the preloaded chunk. Use the Next.js build output (npm run build) to see the size of each chunk. If the preloaded chunk is very large, consider splitting it further.
Test on a slow network. Use Chrome’s throttling to simulate a 3G connection. This will show you the actual benefit of preloading versus lazy loading.
Remember that preload only works for client-side navigation. For initial page load, the chunk is fetched as part of the HTML, but for subsequent navigations, it’s fetched when the route is requested.

Troubleshooting

Preload link is not in the HTML. Check that the component is actually imported dynamically and that the magic comment is correct. Also, ensure the component is used on the page; if it’s conditionally rendered with false, it might not be included. Clear the .next folder and rebuild.
The chunk is not preloaded but is loaded on demand. This happens if you used webpackPrefetch instead of webpackPreload. Double-check the spelling. Also, if the component is rendered after a user interaction (e.g., click), webpack may treat it as a lazy load and ignore the preload directive. In that case, use a static import for that component.
Preload works in development but not in production. In development, webpack behaves differently. Always test in a production build (npm run build && npm start).
Multiple preloads for the same chunk. If you have multiple dynamic imports of the same module, webpack might generate multiple preloads. Consolidate them into a single dynamic import.
Chunk name is not applied. Make sure the comment is exactly /* webpackChunkName: "name" */ and that there is no space between the comment and the import path. Also, restart the dev server after changing the comment.

Frequently Asked Questions

Does preloading work with Next.js App Router?

Yes, the magic comments work in both Pages Router and App Router. In App Router, you can use next/dynamic similarly, and the preload directive will still generate the link tag.

Can I preload a component that is not used on the initial page?

Technically, you can, but it’s not recommended. If the component is not needed on the initial render, preloading it will waste bandwidth. Use webpackPrefetch instead to load it after the page becomes idle.

What’s the difference between preload and prefetch?

Preload fetches the resource with high priority as soon as the HTML is parsed, which is ideal for critical resources. Prefetch fetches with low priority after the page has loaded, which is ideal for resources needed soon (e.g., on scroll or click).

Does preloading affect SEO?

Preloading itself doesn’t directly affect SEO, but improving page load speed can indirectly improve Core Web Vitals, which are a ranking factor. However, over-preloading can slow down the page, so use it judiciously.

Can I preload a chunk that is not a React component?

Yes, you can use the same magic comments with any dynamic import, such as a utility library or a JSON file. However, for non-component resources, consider using <link rel="preload"> directly in the head for more control.

Will preloading work if I use a CDN?

Yes, the preload link is generated in the HTML, so it will work with any CDN that serves your static files. Ensure the CDN respects the Link header or the HTML link tag.

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.