What is the difference between \_app.js and \_document.js?
Assesses fundamental understanding of Next.js conventions, runtime behavior, and memory/performance considerations.
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
While both are root-level files in the Next.js Pages Router, they operate at fundamentally different layers:
| Dimension | _app.js | _document.js |
| :--- | :--- | :--- |
| Execution | Runs on both Server and Client | Runs only on Server |
| Scope | Wraps React component page hierarchy | Wraps initial HTML shell (<html>, <body>) |
| Interactivity | Supports React hooks, state, event listeners | Zero client interactivity (no hooks, no event handlers) |
| CSS | Can import global CSS files | Cannot import stylesheets directly |
| Purpose | Shared layouts, context providers, state | Document metadata, language tag, custom scripts |
### Modern App Router Note:
In the modern App Router (app/ directory), both files are replaced by a single, unified app/layout.tsx root layout file.
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.