Protected Routes — Complete Guide
Protected Routes — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of Next.js Tutorial on Toolliyo Academy.
On this page
Next.js Tutorial (LearnHub) · Lesson 44 of 100
Protected Routes
Beginner ✓ → Intermediate ✓ → Advanced → Professional
Advanced · 3 — Production skills · ~18 min read · Module 5: SEO & Deploy
Introduction
This is advanced material: Protected Routes. It is what teams use on live products. Read the example carefully and try changing one line at a time to see what happens. Protected routes only render for signed-in users with the right role. In App Router you check the session in middleware, layouts, or Server Components. Paid LearnHub lessons and instructor analytics must not appear to guests or students without enrollment.
An app on your laptop is not finished until students can open it on the internet.
When will you use this?
Use when you are ready to put LearnHub online for users or employers to try.
- Publishing means pushing LearnHub to Vercel, Docker, or Azure so students can access it online.
- CI/CD runs npm test and npm run build automatically on every git push.
Real-world: Flipkart-style catalog
The E-commerce team building Flipkart-style catalog uses Protected Routes to apply Protected Routes when building search, filters, and fast product listing pages. shoppers never see the TypeScript files — they just get a fast, reliable search, filters, and fast product listing pages.
Production-style code
// app/dashboard/layout.tsx
import { redirect } from 'next/navigation';
import { getServerSession } from 'next-auth';
import { authOptions } from '@/lib/auth';
export default async function DashboardLayout({
children
}: { children: React.ReactNode }) {
const session = await getServerSession(authOptions);
if (!session) redirect('/login');
return <section className="dashboard-shell">{children}</section>;
}What happens in production: In Flipkart-style catalog, getting Protected Routes right means shoppers trust the search, filters, and fast product listing pages every day.
Lesson example (start here)
Copy this smaller example first. Once it works, compare it with the real-world code above.
// app/dashboard/layout.tsx
import { redirect } from 'next/navigation';
import { getServerSession } from 'next-auth';
import { authOptions } from '@/lib/auth';
export default async function DashboardLayout({
children
}: { children: React.ReactNode }) {
const session = await getServerSession(authOptions);
if (!session) redirect('/login');
return <section className="dashboard-shell">{children}</section>;
}Line-by-line walkthrough
| Code | What it means |
|---|---|
// app/dashboard/layout.tsx | Comment — notes for humans; the compiler ignores it. |
import { redirect } from 'next/navigation'; | Imports navigation hooks — useRouter, usePathname, useSearchParams in Client Components. |
import { getServerSession } from 'next-auth'; | Imports a module so you can use its exports in this file. |
import { authOptions } from '@/lib/auth'; | Imports a module so you can use its exports in this file. |
export default async function DashboardLayout({ | Default export — the main page or component this file provides to Next.js. |
children | Part of the Protected Routes example — read it together with the lines before and after. |
}: { children: React.ReactNode }) { | Closes a block started by { above. |
const session = await getServerSession(authOptions); | Part of the Protected Routes example — read it together with the lines before and after. |
if (!session) redirect('/login'); | Part of the Protected Routes example — read it together with the lines before and after. |
return <section className="dashboard-shell">{children}</section>; | Returns JSX — what the user sees in the browser. |
} | Closes a block started by { above. |
How it works (big picture)
- Layout runs on the server before children render.
- No session means immediate redirect — the dashboard HTML never leaks to guests.
Do this on your computer
- Add auth check to dashboard layout.
- Visit /dashboard logged out — confirm redirect.
- Log in and confirm access.
- Add role check for /instructor routes.
- Read the real-world section and name which part of LearnHub uses this topic.
- Run the example locally with npm run dev and confirm the same behavior.
- Change one value in the example (route, text, or course id) and predict what will happen before you save.
Experiments — try changing this
- Change a string or route in the example and save — watch the browser update.
- Break the code on purpose (remove a bracket), read the error overlay, then fix it.
- Change the API URL or course id and see how the page data changes.
- Use npm run dev while editing Protected Routes — the page hot-reloads on save.
Remember
Protect on the server first. Use middleware for broad path rules. Use layout session checks for nested dashboard areas.
Common questions
Middleware vs layout auth?
Middleware runs early for redirects; layout checks are fine for section-specific rules.
How long should I spend on Protected Routes?
Until you can explain it in your own words and run the example without looking at the answer. Beginners often need 30–60 minutes per new concept; setup lessons may take one afternoon.
What if I get stuck on Protected Routes?
Re-read the line-by-line walkthrough, check the terminal and browser overlay for errors, and compare your code character-by-character with the example. Search the exact error text — someone else had it too.
Where is Protected Routes used in real jobs?
See the real-world section above — the same pattern appears in LMS, e-commerce, SaaS, and dashboards. Interviewers ask you to explain it using one concrete example.