Conditional routes in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Next.js route component render when user is not authenticated?

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>;
}

NextJS

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>;
}

A It first renders nothing, then after 1 second renders 'Please log in to access the dashboard.'.

B It renders 'Welcome to your dashboard!' immediately and stays that way.

C It first renders 'Please log in to access the dashboard.', then after 1 second stays the same.

D It renders 'Please log in to access the dashboard.' immediately and stays that way.

💡 Hint

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.

📝 Syntax

intermediate

Which option correctly implements a conditional redirect in Next.js 14 App Router?

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?

NextJS

import { redirect } from 'next/navigation';

export default function Page() {
  const isAuthenticated = false;

  // Conditional redirect here
}

A

if (!isAuthenticated) {
  redirect('/login');
}
return <h1>Dashboard</h1>;

B

if (!isAuthenticated) {
  router.push('/login');
}
return <h1>Dashboard</h1>;

C

if (!isAuthenticated) {
  return redirect('/login');
}
return <h1>Dashboard</h1>;

D

if (!isAuthenticated) {
  window.location.href = '/login';
}
return <h1>Dashboard</h1>;

💡 Hint

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.

🔧 Debug

advanced

Why does this conditional route cause a hydration error in Next.js?

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?

NextJS

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>;
}

A Because conditional rendering inside useEffect is not allowed.

B Because useEffect runs on server causing state to change before hydration.

C Because useState cannot be initialized with null in Next.js components.

D Because the initial render on server is 'Loading...' but client immediately changes to 'Welcome back!', causing mismatch.

💡 Hint

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.

❓ state_output

advanced

What is the output of this Next.js client component with conditional route logic?

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>;
}

NextJS

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>;
}

A Immediately shows 'Hello, Alice!' and never changes.

B Immediately shows 'Redirecting to login...', then after 2 seconds shows 'Hello, Alice!'.

C Immediately shows nothing, then after 2 seconds shows 'Redirecting to login...'.

D Immediately shows 'Redirecting to login...' and stays that way.

💡 Hint

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!'.

🧠 Conceptual

expert

Which statement about conditional routing in Next.js 14 App Router is TRUE?

Choose the correct statement about how conditional routing works in Next.js 14 App Router.

A You can use the <code>redirect()</code> function inside server components to perform immediate server-side redirects based on conditions.

B Client components can use <code>redirect()</code> to navigate users without page reloads.

C Conditional routing must always be handled in middleware, not in components.

D Next.js 14 App Router does not support conditional rendering based on user authentication.

💡 Hint

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.