Conditional routes in NextJS - Mini Project: Build & Apply

Conditional Routes in Next.js

📖 Scenario: You are building a simple Next.js app that shows different pages based on whether a user is logged in or not. This is common in real websites where some pages are private and others are public.

🎯 Goal: Create a Next.js app with conditional routing that shows a Login page if the user is not logged in, and a Dashboard page if the user is logged in.

📋 What You'll Learn

Create a boolean variable isLoggedIn to represent user login status

Create two simple components: Login and Dashboard

Use conditional rendering in the main page to show Login if isLoggedIn is false

Show Dashboard if isLoggedIn is true

💡 Why This Matters

🌍 Real World

Many websites show different pages or content depending on whether a user is logged in. This project shows how to do that simply in Next.js.

💼 Career

Understanding conditional routes and rendering is essential for building user-friendly web apps that handle authentication and private content.

1

Set up login status variable

Create a boolean variable called isLoggedIn and set it to false to represent that the user is not logged in yet.

NextJS

# Create a boolean variable isLoggedIn and set it to false
# Your code here

Need a hint?

Use const isLoggedIn = false; to create the variable.

2

Create Login and Dashboard components

Create two React functional components called Login and Dashboard. Each should return a simple <div> with text: "Please log in" for Login and "Welcome to your dashboard" for Dashboard.

NextJS

const isLoggedIn = false;

// Create Login component
// Your code here

// Create Dashboard component
// Your code here

Need a hint?

Define two functions: function Login() { return <div>Please log in</div>; } and similarly for Dashboard.

3

Add conditional rendering in main component

Create a React functional component called HomePage. Inside it, use isLoggedIn to conditionally render the Dashboard component if isLoggedIn is true, or the Login component if isLoggedIn is false.

NextJS

const isLoggedIn = false;

function Login() {
  return Please log in;
}

function Dashboard() {
  return Welcome to your dashboard;
}

// Create HomePage component with conditional rendering
// Your code here

Need a hint?

Use a ternary operator inside the return of HomePage to choose which component to show.

4

Export HomePage as default

Add a default export for the HomePage component so Next.js can use it as the main page.

NextJS

const isLoggedIn = false;

function Login() {
  return Please log in;
}

function Dashboard() {
  return Welcome to your dashboard;
}

function HomePage() {
  return isLoggedIn ?  : ;
}

// Export HomePage as default
// Your code here

Need a hint?

Use export default HomePage; at the end of the file.