Conditional routes in NextJS - Step-by-Step Execution

Concept Flow - Conditional routes

User requests URL

↓

Check route condition

↓

Render route

↓

Display page

When a user visits a URL, Next.js checks if the route condition is met. If yes, it renders the page; if no, it redirects or shows a fallback.

Execution Sample

NextJS

import { useRouter } from 'next/router';
import { useEffect } from 'react';

export default function Page() {
  const router = useRouter();
  const isLoggedIn = false;

  useEffect(() => {
    if (!isLoggedIn) {
      router.push('/login');
    }
  }, [isLoggedIn, router]);

  if (!isLoggedIn) {
    return null;
  }

  return <div>Protected Content</div>;
}

This code checks if the user is logged in; if not, it redirects to the login page.

Execution Table

Step	Action	Condition Checked	Result	Route Rendered or Redirected
1	User visits /protected	isLoggedIn === false	True	Redirect to /login
2	Router pushes /login	N/A	N/A	Render /login page
3	User visits /protected again	isLoggedIn === false	True	Redirect to /login
4	User logs in and visits /protected	isLoggedIn === false	False	Render /protected page

💡 Redirect occurs when user is not logged in; protected page renders only if logged in.

Variable Tracker

Variable	Start	After Step 1	After Step 4
isLoggedIn	false	false	true
Current Route	/protected	/login	/protected

Key Moments - 2 Insights

Why does the page redirect instead of rendering the protected content when isLoggedIn is false?

Because the condition in step 1 of the execution_table is true, triggering router.push('/login') which redirects before rendering protected content.

What happens if router.push is called inside the component without a condition?

It causes an immediate redirect every render, potentially creating an infinite redirect loop, as shown by the redirect in step 1 and 3.

Visual Quiz - 3 Questions

Look at the execution_table, what route is rendered at step 2?

A /protected

B /login

C /home

D No route rendered

💡 Hint

Check the 'Route Rendered or Redirected' column at step 2.

At which step does the user successfully see the protected page?

A Step 4

B Step 2

C Step 3

D Step 1

💡 Hint

Look for when isLoggedIn is true and the protected page renders.

If isLoggedIn was always true, how would the execution_table change?

A Redirects to /login would still happen

B No pages would render

C Protected page would render immediately without redirects

D Router would push to /login after rendering

💡 Hint

Refer to the 'Condition Checked' and 'Result' columns for isLoggedIn values.

Concept Snapshot

Conditional Routes in Next.js:
- Check user or app state in component
- If condition fails, use router.push() to redirect
- Otherwise, render the protected page
- Prevent infinite redirects by guarding router.push
- Useful for auth, feature flags, or role-based pages

Full Transcript

Conditional routes in Next.js let you control which page a user sees based on conditions like login status. When a user visits a URL, the app checks if the condition is met. If not, it redirects to another page, like a login screen. This is done by calling router.push() inside the component. If the condition is true, the protected content renders. This prevents unauthorized access. The execution table shows steps where the user is redirected or allowed to see the page. Variables like isLoggedIn and current route change as the user navigates. Be careful to avoid redirect loops by only calling router.push when needed.

Practice

1. What is the main purpose of conditional routes in Next.js?

easy

A. To create static pages only

B. To style pages differently

C. To fetch data from an API

D. To control access and redirect users based on conditions

Solution

1. Step 1: Understand conditional routes concept

   Conditional routes let you decide which users can see certain pages or redirect them elsewhere.

2. Step 2: Identify the purpose in Next.js

   Next.js uses conditional routes mainly to protect pages or redirect users based on login or roles.

3. Final Answer:

   To control access and redirect users based on conditions -> Option D

4. Quick Check:

   Conditional routes = control access [OK]

Hint: Think: Who should see this page? Redirect if no permission. [OK]

Common Mistakes:

• Confusing conditional routes with styling or data fetching
• Thinking conditional routes create static pages
• Believing conditional routes only fetch data

2. Which Next.js hook is commonly used to perform client-side redirects in conditional routes?

easy

A. useState

B. useEffect

C. useRouter

D. useContext

Solution

1. Step 1: Identify hooks for routing

   Next.js provides useRouter to access routing methods like push for redirects.

2. Step 2: Confirm redirect usage

   While useEffect runs side effects, useRouter is needed to actually change routes.

3. Final Answer:

   useRouter -> Option C

4. Quick Check:

   Redirects use useRouter [OK]

Hint: Redirects need router methods, so useRouter is key. [OK]

Common Mistakes:

• Using useState to redirect (it manages state only)
• Confusing useEffect as the hook that changes routes
• Thinking useContext handles routing

3. Given this Next.js component, what will happen if isLoggedIn is false?

import { useRouter } from 'next/router';
import { useEffect } from 'react';

export default function Dashboard() {
  const router = useRouter();
  const isLoggedIn = false;

  useEffect(() => {
    if (!isLoggedIn) {
      router.push('/login');
    }
  }, [isLoggedIn]);

  return <h1>Dashboard</h1>;
}

medium

A. The user is redirected to the /login page

B. The page reloads infinitely

C. The page shows an error

D. The user stays on the Dashboard page

Solution

1. Step 1: Analyze the useEffect condition

   The effect checks if isLoggedIn is false, then calls router.push('/login').

2. Step 2: Understand router.push behavior

   This causes a client-side redirect to the login page when not logged in.

3. Final Answer:

   The user is redirected to the /login page -> Option A

4. Quick Check:

   False login triggers redirect [OK]

Hint: False login triggers router.push to /login. [OK]

Common Mistakes:

• Thinking the user stays on Dashboard despite redirect
• Assuming an error occurs without redirect
• Believing infinite reload happens here

4. Identify the error in this Next.js conditional route code:

import { useRouter } from 'next/router';
import { useEffect } from 'react';

export default function Profile() {
  const router = useRouter();
  const isAuthorized = false;

  if (!isAuthorized) {
    router.push('/unauthorized');
  }

  return <h1>Profile</h1>;
}

medium

A. Calling router.push inside the component body causes an error

B. Missing dependency array in useEffect

C. useRouter is not imported correctly

D. The component returns invalid JSX

Solution

1. Step 1: Check where router.push is called

   router.push is called directly inside the component body, which runs on every render and is not allowed.

2. Step 2: Correct usage with useEffect

   Redirects should be inside useEffect to avoid infinite loops or errors.

3. Final Answer:

   Calling router.push inside the component body causes an error -> Option A

4. Quick Check:

   Redirects must be inside useEffect [OK]

Hint: Put router.push inside useEffect, not directly in component body. [OK]

Common Mistakes:

• Calling router.push directly in component body
• Ignoring useEffect for side effects
• Assuming missing import causes error here

5. You want to create a Next.js page that only logged-in users can access. If the user is not logged in, redirect them to '/login'. Which is the best approach?

1. Use useRouter and useEffect to check login and redirect client-side.
2. Use Next.js middleware to check authentication before rendering.
3. Render a loading state while checking login status.
4. Avoid rendering protected content until login is confirmed.

Which combination correctly applies conditional routing best practice?

hard

A. Only 1 and 2

B. All 1, 2, 3, and 4

C. Only 2 and 4

D. Only 1, 3, and 4

Solution

1. Step 1: Understand client-side and server-side checks

   Client-side redirect with useRouter/useEffect (1) is common, but middleware (2) adds server-side protection.

2. Step 2: Consider user experience

   Showing a loading state (3) and avoiding rendering protected content before login confirmation (4) improve UX and prevent flicker.

3. Step 3: Combine all for best practice

   Using all four ensures secure, smooth conditional routing in Next.js.

4. Final Answer:

   All 1, 2, 3, and 4 -> Option B

5. Quick Check:

   Best practice = all steps combined [OK]

Hint: Combine client, server checks and loading states for best routing. [OK]

Common Mistakes:

• Relying only on client-side redirects
• Skipping loading states causing flicker
• Ignoring server-side middleware protection