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.