Q4: What are the special file conventions in Next.js App Router?
The App Router reserves explicit file names inside route folders:
page.js: Defines route UI.layout.js: Defines shared UI surrounding child pages (persists state across navigation).template.js: Similar to layout, but creates a new instance on every page navigation.loading.js: Creates automatic Suspense fallback UI.error.js: Creates an Error Boundary wrapper.
Loading and Error Handlers
// app/dashboard/loading.js
export default function Loading() {
return <p>Loading dashboard stats...</p>;
}
// app/dashboard/error.js (Must be a Client Component)
'use client';
export default function Error({ error, reset }) {
return <button onClick={() => reset()}>Try Again</button>;
}💡 loading.js wraps pages in Suspense; error.js isolates route errors inside an Error Boundary.
Key Takeaways
layout.jsstays mounted and preserves internal component state during route navigation.template.jsre-mounts on every route transition, re-running effects.
Knowledge Check
What is the key functional difference between layout.js and template.js in the App Router?