How does Next.js routing auto-implement code splitting?

WHAT THIS TESTS: 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.

A GOOD ANSWER COVERS: 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.

COMMON WRONG ANSWERS: 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.

LIKELY FOLLOW-UPS: 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.

ONE 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.