Consider this Next.js page component that conditionally renders content based on authentication status.
import { useState, useEffect } from 'react';
export default function Dashboard() {
const [isAuthenticated, setIsAuthenticated] = useState(false);
useEffect(() => {
// Simulate auth check
setTimeout(() => setIsAuthenticated(false), 1000);
}, []);
if (!isAuthenticated) {
return <h1>Please log in to access the dashboard.</h1>;
}
return <h1>Welcome to your dashboard!</h1>;
}import { useState, useEffect } from 'react'; export default function Dashboard() { const [isAuthenticated, setIsAuthenticated] = useState(false); useEffect(() => { // Simulate auth check setTimeout(() => setIsAuthenticated(false), 1000); }, []); if (!isAuthenticated) { return <h1>Please log in to access the dashboard.</h1>; } return <h1>Welcome to your dashboard!</h1>; }
Think about the initial state and what the useEffect does after 1 second.
The component starts with isAuthenticated as false, so it renders the login message immediately. After 1 second, setIsAuthenticated(false) runs, which keeps the state false, so the message stays the same.
You want to redirect users to '/login' if they are not authenticated inside a server component using Next.js 14 App Router. Which code snippet is correct?
import { redirect } from 'next/navigation'; export default function Page() { const isAuthenticated = false; // Conditional redirect here }
Remember that redirect is a function that causes a server-side redirect and does not return JSX.
Option A correctly calls redirect('/login') without returning it. Option A incorrectly tries to return the redirect call, which is not valid. Option A uses client-side navigation which is not allowed in server components. Option A uses router.push which is a client-side method and undefined here.
Examine this Next.js page component:
import { useState, useEffect } from 'react';
export default function Profile() {
const [isLoggedIn, setIsLoggedIn] = useState(null);
useEffect(() => {
setIsLoggedIn(true);
}, []);
if (isLoggedIn === null) {
return <div>Loading...</div>;
}
if (!isLoggedIn) {
return <div>Please log in.</div>;
}
return <div>Welcome back!</div>;
}Why might this cause a hydration mismatch error?
import { useState, useEffect } from 'react'; export default function Profile() { const [isLoggedIn, setIsLoggedIn] = useState(null); useEffect(() => { setIsLoggedIn(true); }, []); if (isLoggedIn === null) { return <div>Loading...</div>; } if (!isLoggedIn) { return <div>Please log in.</div>; } return <div>Welcome back!</div>; }
Think about what the server renders vs what the client renders initially.
The server renders the component with isLoggedIn === null showing 'Loading...'. On the client, useEffect runs after hydration and sets isLoggedIn to true, so the client tries to render 'Welcome back!' immediately. This difference causes a hydration mismatch error.
Given this component, what will be displayed after 2 seconds?
import { useState, useEffect } from 'react';
export default function Home() {
const [user, setUser] = useState(null);
useEffect(() => {
setTimeout(() => setUser({ name: 'Alice' }), 2000);
}, []);
if (!user) {
return <h2>Redirecting to login...</h2>;
}
return <h2>Hello, {user.name}!</h2>;
}import { useState, useEffect } from 'react'; export default function Home() { const [user, setUser] = useState(null); useEffect(() => { setTimeout(() => setUser({ name: 'Alice' }), 2000); }, []); if (!user) { return <h2>Redirecting to login...</h2>; } return <h2>Hello, {user.name}!</h2>; }
Consider the initial state and when setUser updates the state.
The component starts with user as null, so it renders 'Redirecting to login...'. After 2 seconds, setUser updates the state to an object with name 'Alice', causing the component to re-render and display 'Hello, Alice!'.
Choose the correct statement about how conditional routing works in Next.js 14 App Router.
Think about where redirect() can be used and what it does.
Option A is correct: redirect() is a server-side function used in server components to redirect immediately. Option A is wrong because redirect() is not for client components. Option A is wrong because conditional routing can be done in components or middleware. Option A is false; Next.js supports conditional rendering and routing.