Next.js · Junior · Question 4 of 75
How does layout.tsx differ from page.tsx?
- ✓Correct answer: A layout wraps pages and preserves state during navigation
- 2A layout renders only on the server, a page only in the browser
- 3A layout is only for metadata; you can't write markup in it
Explanation
A layout receives children and holds UI shared by nested routes (header, sidebar). When navigating between child pages, the layout doesn't remount: its state and DOM are preserved, and only the changed part renders. Both layout and page are Server Components by default.