How do you set head metadata per-route with `head.js` / `head.tsx`?
Interviewer Expectations for this Question
01
Core Competency
Assesses fundamental understanding of Next.js conventions, runtime behavior, and memory/performance considerations.
02
Evaluation Criteria
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
Comprehensive Model Answer
Verified Solution
In the App Router you can create a head.js or head.tsx file inside a route segment to return <head> elements (title, meta, link) for that segment. This is preferred for complex/head-only components.
// app/about/head.js
export default function Head() {
return (
<>
<title>About Us</title>
<meta name="description" content="About page" />
</>
);
}
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.