Describe default.js.

The default.js file is used to render a fallback within Parallel Routes when Next.js cannot recover a slot's active state after a full-page load. During soft navigation, Next.js keeps track of the active state (subpage) for each slot. However, for hard navigations (full-page load), Next.js cannot recover the active state. In this case, a default.js file can be rendered for subpages that don't match the current URL.

Difficulty: 5/10

Topics: page routing, default export, file conventions

Scenario Questions

0-2 years experience

1
If you add a file called about.js under pages, what does Next.js do with the default export inside it?
2
What happens if you forget to export a component as default from a page file?
3
How would you create a simple homepage using pages/index.js and its default export?

2-5 years experience

1
You notice that navigating to /profile returns a 404 even though pages/profile.js exists. The file exports a named component but not default. How would you fix it?
2
When adding getStaticProps to a page, why must the component still be the default export?
3
If you want to lazy‑load a child component inside a page, does the default export affect the bundle size or loading behavior?

5-8 years experience

1
In a large Next.js app, some teams use named exports for page components, causing routing failures. How would you enforce the default‑export convention across the repo and what trade‑offs does that introduce?
2
Discuss the performance implications of placing heavy data‑fetching logic inside the default exported component versus extracting it to a separate module.
3
When migrating a legacy React app to Next.js, you have files that export multiple components. How do you restructure them so routing works correctly?

8+ years experience

1
Your organization runs several micro‑frontends built on Next.js and wants a unified linting and CI pipeline to guarantee every page file has a proper default export. How would you design that system at scale?
2
You need to serve two variants of a page based on feature flags, but Next.js still requires a single default export for routing. How would you architect the solution while keeping the default‑export contract intact?
3
Consider a monorepo where shared UI components are versioned independently. How do you manage default‑export compatibility across teams when upgrading Next.js versions?

Follow-up Questions

❓What steps would you take to debug a page that returns a 404 because of an export issue?
❓How would you enforce the default‑export rule in a large codebase?
❓Can you discuss the trade‑offs of moving heavy logic out of the default component into helper modules?