Conditional routes in NextJS

Introduction

Conditional routes let your app show different pages or content based on rules like user login or role. This helps make your app smarter and safer.

Show a login page only if the user is not logged in.

Redirect users to a dashboard if they are already logged in.

Display admin pages only to users with admin rights.

Hide certain pages from visitors who don't have permission.

Change navigation links based on user status.

Syntax

NextJS

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

export default function Page() {
  const router = useRouter();
  const user = /* get user info, e.g. from context or state */;

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

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

Use useRouter from Next.js to navigate programmatically.

Put your condition inside useEffect to run after the component loads.

Examples

Redirects to login if the user is not logged in.

NextJS

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

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

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

  return <h1>Welcome Home</h1>;
}

Redirects non-admin users to a 'not authorized' page.

NextJS

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

export default function AdminPage() {
  const router = useRouter();
  const userRole = 'user';

  useEffect(() => {
    if (userRole !== 'admin') {
      router.push('/not-authorized');
    }
  }, [userRole, router]);

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

Sample Program

This component waits for user info. If the user is not logged in, it redirects to login. Otherwise, it shows a welcome message.

NextJS

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

export default function Dashboard() {
  const router = useRouter();
  const [user, setUser] = useState(null);

  // Simulate fetching user info
  useEffect(() => {
    setTimeout(() => {
      setUser({ name: 'Alice', loggedIn: true });
    }, 1000);
  }, []);

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

  if (!user) return <p>Loading user info...</p>;

  return <h1>Welcome to your dashboard, {user.name}!</h1>;
}

Important Notes

Always check user info or permissions before showing protected pages.

Use router.push() to change routes programmatically.

Remember to handle loading states while checking conditions.

Summary

Conditional routes help control who sees what in your app.

Use Next.js useRouter and useEffect to redirect based on conditions.

Always handle loading and permission checks carefully for good user experience.