Next.js
/Intermediate
Debugging Questions
Definition
Questions that test your ability to diagnose and fix common, frustrating errors unique to the Next.js environment.
Explain Like I'm New
Next.js throws very specific errors that confuse standard React developers (like Hydration errors). Interviewers want to know that you've seen these errors before and know exactly how to fix them.
Real World Example
Being asked: 'Why am I getting a Hydration Mismatch error, and how do I fix it?'
Common Use Cases
- •Practical coding interviews
- •Pair programming interviews
Interactive Example
/*
Debugging Scenario: Fixing 'window is not defined'
❌ BROKEN CODE:
export default function ThemeToggle() {
const theme = window.localStorage.getItem('theme'); // CRASHES SERVER!
return <div>{theme}</div>;
}
✅ FIXED CODE:
'use client';
import { useState, useEffect } from 'react';
export default function ThemeToggle() {
const [theme, setTheme] = useState(null);
// useEffect ONLY runs on the browser, safely after the server render!
useEffect(() => {
setTheme(window.localStorage.getItem('theme'));
}, []);
// Prevent hydration mismatch by returning nothing until client is ready
if (!theme) return null;
return <div>{theme}</div>;
}
*/Interview Questions
basic
- What causes a 'Hydration Mismatch' error in Next.js?
intermediate
- You get the error: `window is not defined`. Why did this happen and how do you fix it?