How does Next.js routing auto-implement code splitting?
Tests route-based code splitting versus manual setup. Strong answers note each page/route becomes its own chunk automatically, while client-only apps need explicit React.lazy and Suspense.
What's really being asked
This question tests whether you understand the relationship between routing and bundling in Next.js, specifically how the framework leverages file-system conventions to eliminate boilerplate compared to a traditional single-page application. Interviewers want to see that you know Next.js automatically creates separate JavaScript chunks per route without developer intervention, and that you can contrast this with the explicit dynamic import configuration required in a client-side React app.
The full answer
A strong response hits four points in order. First, explain that Next.js treats each page.js file in the app directory or pages directory as a discrete entry point for the bundler, which produces separate chunks at build time. Second, clarify that the Next.js router dynamically imports these chunks on navigation, so the initial page load only fetches the code needed for the requested route. Third, contrast this with a client-side-only React app where you must manually call React.lazy, define Suspense boundaries, and configure a router to load chunks asynchronously. Fourth, mention that Next.js also prefetches route chunks in the background when links enter the viewport, but emphasize that prefetching is an optimization layered on top of the automatic splitting behavior.
The mistakes people make
Red flags to avoid include three misconceptions. One, stating that Next.js uses React.lazy under the hood for every page; it actually relies on its own router-level dynamic imports and bundler integration, not React.lazy directly. Two, confusing code splitting with prefetching; candidates sometimes describe prefetching without explaining that the chunks exist because of the file-system routing contract. Three, attributing the behavior solely to webpack or Turbopack without acknowledging that the Next.js file-system convention is what tells the bundler where to split.
What usually comes next
Interviewers often push deeper with three angles. They may ask how you would disable or customize splitting for specific routes, which touches on dynamic segments and loading.js boundaries. They may ask about the impact on shared components, leading to discussion of the common chunk strategy and module duplication. They may also ask how this behaves in the App Router versus the Pages Router, where the App Router uses React Server Components and can stream chunks differently.
A concrete example
Imagine a Next.js app with routes at app/dashboard/page.js and app/settings/page.js. During the build, the bundler emits dashboard-[hash].js and settings-[hash].js. When a user lands on dashboard, the browser downloads only the dashboard chunk plus shared runtime code. In a client-side Create React App setup achieving the same result requires wrapping the dashboard and settings components in React.lazy imports inside the router configuration, manually adding Suspense fallbacks, and ensuring the build tool supports dynamic imports.
Interview question
What mechanism allows Next.js to split routes into separate chunks without developers using React.lazy?
- a.The bundler scans the app directory and splits at every component boundary it detects.
- b.The file-system routing convention treats each page.js as an entry point, producing chunks at build time.Correct
- c.Next.js automatically wraps each page component in React.lazy during the build process.
- d.The router creates chunks by prefetching code in the background when links enter the viewport.
Why? this is the answer
Next.js uses its file-system routing convention to make each page.js a discrete bundler entry point, automatically emitting separate chunks at build time. It does not rely on React.lazy under the hood, and prefetching is only an optimization that loads chunks already created by the routing contract.
Just read this? Test yourself on what you have been reading.
Read the original → nextjs.org
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on next.js — each one lists the topics its interview covers.
See open roles