Routing and Navigation

Level: Beginner to Intermediate

ℹ️ What You'll Learn

• File-based routing: folders become URLs
• Dynamic routes with [param] and [...slug]
• Creating pages with page.tsx files
• Navigation with Link component
• useRouter hook for programmatic navigation
• Route groups with (name) folders
• Nested routes and layouts
• SMS student list → detail routes

Why This Matters

Routing and Navigation is part of building production React applications with Next.js. You will use it when creating student dashboards, SEO-friendly pages, API-connected forms, route handlers, layouts, and deployments for .NET-backed systems.

Next.js creates routes from folders and page.jsx files inside the app directory.

The Problem

Beginners often treat Next.js like plain React and miss routing, rendering, server/client boundaries, environment variables, and deployment behavior. This lesson shows how Routing and Navigation works in a real School Management System frontend that talks to ASP.NET Core APIs.

Basic Routes

app/
  page.jsx
  students/
    page.jsx
  teachers/
    page.jsx

This creates:

• /
• /students
• /teachers

Students Page

app/students/page.jsx

export default function StudentsPage() {
  return (
    <main>
      <h1>Students</h1>
      <p>Student list will appear here.</p>
    </main>
  );
}

Navigation with Link

Use Link instead of normal <a> tags for internal navigation.

app/page.jsx

import Link from "next/link";

export default function HomePage() {
  return (
    <main>
      <h1>School Management System</h1>
      <nav>
        <Link href="/students">Students</Link>
        <Link href="/teachers">Teachers</Link>
      </nav>
    </main>
  );
}

Dynamic Routes

Use square brackets for route parameters.

app/
  students/
    [id]/
      page.jsx

This matches:

• /students/1
• /students/25
• /students/NCA-1001

app/students/[id]/page.jsx

export default function StudentDetailsPage({ params }) {
  return (
    <main>
      <h1>Student Details</h1>
      <p>Student ID: {params.id}</p>
    </main>
  );
}

Route Groups

Route groups organize files without changing the URL.

app/
  (dashboard)/
    students/
      page.jsx
    attendance/
      page.jsx

The URL remains /students and /attendance.

💡 Use folders as features

In a school project, keep feature routes like students, teachers, attendance, marks, and fees as separate folders.

Interview Questions

🎯 How does routing work in Next.js App Router?

Next.js maps folders inside app to URL segments. A route becomes public when the folder contains a page.jsx or page.tsx file.

🎯 Why should we use next/link?

next/link enables client-side navigation and prefetching for internal routes, making navigation faster than full page reloads.

Quick Definitions

• Routing and Navigation - The main Next.js concept explained in this lesson.
• App Router - The modern Next.js routing system based on the app folder.
• Server/Client boundary - The decision of whether code runs on the server or in the browser.
• ASP.NET Core integration - Calling or proxying backend APIs from a Next.js frontend.

Common Mistakes

• Treating every component as a Client Component without a reason
• Forgetting environment variables differ between local and production
• Calling ASP.NET Core APIs from the browser without handling CORS
• Putting secrets in NEXT_PUBLIC_ variables
• Skipping npm run build before deployment

Practice Task

Create a small Next.js example using Routing and Navigation. Keep it connected to a School Management System scenario.

Suggested practice:

1. Create or update a route, layout, form, or data-fetching example.
2. Use realistic student, teacher, attendance, or marks data.
3. Connect the example to an ASP.NET Core-style API URL or route handler.
4. Add one loading, empty, or error state where relevant.
5. Explain what runs on the server and what runs in the browser.

Quick Revision

Question	Answer
What is the main idea?	Use Routing and Navigation correctly in a Next.js App Router project.
Where is it used?	Pages, layouts, route handlers, forms, APIs, authentication, and deployment.
What should beginners watch carefully?	Server/client boundaries, environment variables, CORS, and production builds.
What is the best debugging habit?	Check terminal build output, browser console, network tab, and server logs.

🤖Use AI to Learn Faster

⚠️ Important for beginners: Do NOT use AI to write your code yet. Type every example yourself. Your brain learns by doing, not by reading AI output. Use AI only to explain and quiz you — not to code for you. Once you have strong fundamentals, AI becomes a powerful productivity tool for repetitive tasks.

Use ChatGPT, Claude, or Copilot to go deeper on Routing and Navigation. Try these prompts:

• "Explain Routing and Navigation with a Next.js and ASP.NET Core example"
• "Give me 5 practice tasks for Routing and Navigation in a School Management app"
• "Show common Next.js mistakes in Routing and Navigation and how to fix them"
• "Quiz me on Routing and Navigation with interview-style questions"

💡 Tip: After reading this article, paste your own code into AI and ask "What could go wrong here and why?" — fastest way to find edge cases and deepen understanding.

Next Article

Layouts and Shared UI ->