Sign in to track progress and bookmark lessons.
Introduction
When will you use this?
Real-world: Swiggy-style delivery tracker
Production-style code
Lesson example (start here)
Line-by-line walkthrough
How it works (big picture)
Do this on your computer
Experiments — try changing this
Remember
Common questions
sitemap.xml?
How long should I spend on Metadata and SEO?
What if I get stuck on Metadata and SEO?
Where is Metadata and SEO used in real jobs?
Introduction
You know the basics now. Here we use Metadata and SEO in real LearnHub screens — layouts, data, and APIs. Still plain language, just a bit more depth. Metadata sets
, description, Open Graph, and Twitter cards. export const metadata or generateMetadata per route helps Google index LearnHub course pages. Students discover courses via search. A generic "Create Next App" title hurts click-through. Each course page needs unique metadata.</p>
<p class="mt-3">Data and forms power course lists, enrollments, and progress. Learn these patterns slowly — test in a small page first.</p>
</section>
<section id="when-to-use" class="mt-4">
<h2 class="h5" id="when-will-you-use-this">When will you use this?</h2>
<p>Reach for data fetching and Server Actions when pages need database content or form submissions.</p>
<ul class="lesson-plain-list mt-2">
<li>Enrollments, quiz scores, and course progress load from the server — often with Server Actions.</li><li>Forms that enroll a student in a course use Server Actions instead of a separate REST call.</li>
</ul>
</section>
<section id="real-world-example" class="mt-4">
<h2 class="h5" id="real-world-swiggy-style-delivery-tracker">Real-world: Swiggy-style delivery tracker</h2>
<p>The Food tech team building Swiggy-style delivery tracker uses Metadata and SEO to rank course landing pages on Google with proper titles and descriptions. customers and riders never see the TypeScript files — they just get a fast, reliable live order map and status updates.</p>
<h3 class="h6 mt-3" id="production-style-code">Production-style code</h3>
<pre class="lesson-code-block"><code class="language-typescript">// app/courses/[slug]/page.tsx
import type { Metadata } from 'next';
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const { slug } = await params;
return {
title: `${slug} — LearnHub`,
description: 'Enroll and start learning today.'
};
}</code></pre>
<p class="mt-2"><strong>What happens in production:</strong> In Swiggy-style delivery tracker, getting Metadata and SEO right means customers and riders trust the live order map and status updates every day.</p>
<aside class="alert alert-light border mt-3 mb-0">
<strong>Also used on: NewsDaily portal:</strong> The Media team uses Metadata and SEO to rank course landing pages on Google with proper titles and descriptions inside article pages, categories, and SEO metadata. The business domain differs, but the Next.js pattern matches this lesson.
</aside>
</section>
<section id="example" class="mt-4">
<h2 class="h5" id="lesson-example-start-here">Lesson example (start here)</h2>
<p class="text-muted small">Copy this smaller example first. Once it works, compare it with the real-world code above.</p>
<pre class="lesson-code-block"><code class="language-typescript">import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'LearnHub — Online courses that stick',
description: 'Build skills with structured Next.js and frontend courses.',
openGraph: {
title: 'LearnHub',
description: 'Toolliyo-style learning platform',
type: 'website'
}
};
// Dynamic — app/courses/[slug]/page.tsx
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const { slug } = await params;
return {
title: `${slug.replace(/-/g, ' ')} | LearnHub`,
description: `Enroll in ${slug} and track your progress.`
};
}</code></pre>
</section>
<section id="code-walkthrough" class="mt-4">
<h2 class="h5" id="line-by-line-walkthrough">Line-by-line walkthrough</h2>
<table class="table table-sm table-bordered lesson-walkthrough-table">
<thead><tr><th>Code</th><th>What it means</th></tr></thead>
<tbody>
<tr><td><code class="small">import type { Metadata } from 'next';</code></td><td class="small">Imports a module so you can use its exports in this file.</td></tr><tr><td><code class="small">export const metadata: Metadata = {</code></td><td class="small">Page metadata — title and description for SEO and social sharing.</td></tr><tr><td><code class="small">title: 'LearnHub — Online courses that stick',</code></td><td class="small">Part of the Metadata and SEO example — read it together with the lines before and after.</td></tr><tr><td><code class="small">description: 'Build skills with structured Next.js and frontend courses.',</code></td><td class="small">Part of the Metadata and SEO example — read it together with the lines before and after.</td></tr><tr><td><code class="small">openGraph: {</code></td><td class="small">Part of the Metadata and SEO example — read it together with the lines before and after.</td></tr><tr><td><code class="small">title: 'LearnHub',</code></td><td class="small">Part of the Metadata and SEO example — read it together with the lines before and after.</td></tr><tr><td><code class="small">description: 'Toolliyo-style learning platform',</code></td><td class="small">Part of the Metadata and SEO example — read it together with the lines before and after.</td></tr><tr><td><code class="small">type: 'website'</code></td><td class="small">Part of the Metadata and SEO example — read it together with the lines before and after.</td></tr><tr><td><code class="small">}</code></td><td class="small">Closes a block started by { above.</td></tr><tr><td><code class="small">};</code></td><td class="small">Closes a block started by { above.</td></tr><tr><td><code class="small">// Dynamic — app/courses/[slug]/page.tsx</code></td><td class="small">Comment — notes for humans; the compiler ignores it.</td></tr><tr><td><code class="small">export async function generateMetadata({ params }: Props): Promise<Metadata> {</code></td><td class="small">Exported async function — often a Server Action or API handler.</td></tr><tr><td><code class="small">const { slug } = await params;</code></td><td class="small">Part of the Metadata and SEO example — read it together with the lines before and after.</td></tr><tr><td><code class="small">return {</code></td><td class="small">Part of the Metadata and SEO example — read it together with the lines before and after.</td></tr>
</tbody>
</table>
</section>
<section id="how-it-works" class="mt-4">
<h2 class="h5" id="how-it-works-big-picture">How it works (big picture)</h2>
<ul class="lesson-plain-list">
<li>Static metadata on marketing pages.</li><li>generateMetadata fetches course title for dynamic SEO.</li><li>Open Graph improves link previews on WhatsApp and LinkedIn.</li>
</ul>
</section>
<section id="practice" class="mt-4">
<h2 class="h5" id="do-this-on-your-computer">Do this on your computer</h2>
<ol class="lesson-steps">
<li>Set metadata on root layout or home page</li><li>Add generateMetadata to course detail page</li><li>View page source — confirm title tag</li><li>Share URL in social debugger tool</li><li>Read the real-world section and name which part of LearnHub uses this topic.</li><li>Run the example locally with npm run dev and confirm the same behavior.</li><li>Change one value in the example (route, text, or course id) and predict what will happen before you save.</li>
</ol>
</section>
<section id="try-changing" class="mt-4">
<h2 class="h5" id="experiments-try-changing-this">Experiments — try changing this</h2>
<ul class="lesson-plain-list">
<li>Change a string or route in the example and save — watch the browser update.</li><li>Break the code on purpose (remove a bracket), read the error overlay, then fix it.</li><li>Change the API URL or course id and see how the page data changes.</li><li>Use npm run dev while editing Metadata and SEO — the page hot-reloads on save.</li>
</ul>
</section>
<aside class="lesson-tip alert alert-secondary border-0 my-4" role="note">
<strong>Tip:</strong> Duplicate titles on every page Also: Stale metadata when course title changes — tie to DB fetch
</aside>
<section id="remember" class="mt-4">
<h2 class="h5" id="remember">Remember</h2>
<p class="mb-0">metadata export for static SEO. generateMetadata for dynamic routes. Open Graph for social previews.</p>
</section>
<section id="faq" class="mt-4" itemscope itemtype="https://schema.org/FAQPage">
<h2 class="h5" id="common-questions">Common questions</h2>
<div class="mb-3" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<h3 class="h6" itemprop="name" id="sitemap-xml">sitemap.xml?</h3>
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<p class="small mb-0" itemprop="text">Covered in advanced SEO lessons — use app/sitemap.ts in App Router.</p>
</div>
</div>
<div class="mb-3" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<h3 class="h6" itemprop="name" id="how-long-should-i-spend-on-metadata-and-seo">How long should I spend on Metadata and SEO?</h3>
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<p class="small mb-0" itemprop="text">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.</p>
</div>
</div>
<div class="mb-3" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<h3 class="h6" itemprop="name" id="what-if-i-get-stuck-on-metadata-and-seo">What if I get stuck on Metadata and SEO?</h3>
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<p class="small mb-0" itemprop="text">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.</p>
</div>
</div>
<div class="mb-3" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<h3 class="h6" itemprop="name" id="where-is-metadata-and-seo-used-in-real-jobs">Where is Metadata and SEO used in real jobs?</h3>
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<p class="small mb-0" itemprop="text">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.</p>
</div>
</div>
</section>
<nav class="lesson-nav mt-5 pt-4 border-top border-secondary" aria-label="Lesson navigation">
<p class="mb-1"><strong>Previous:</strong> <a href="/tutorials/nextjs-tutorial-image-optimization-complete-guide">Image Optimization — Complete Guide</a></p>
<p class="mb-0"><strong>Next:</strong> <a href="/tutorials/nextjs-tutorial-performance-optimization-complete-guide">Performance Optimization — Complete Guide</a></p>
</nav>
</article>
</div>
<aside class="lesson-toc-col d-none d-xl-block border rounded-3" aria-label="Table of contents">
<nav class="lesson-toc" id="lessonToc">
<div class="lesson-toc-title">On this page</div>
<a href="#introduction" class="level-2">Introduction</a>
<a href="#when-will-you-use-this" class="level-2">When will you use this?</a>
<a href="#real-world-swiggy-style-delivery-tracker" class="level-2">Real-world: Swiggy-style delivery tracker</a>
<a href="#production-style-code" class="level-3">Production-style code</a>
<a href="#lesson-example-start-here" class="level-2">Lesson example (start here)</a>
<a href="#line-by-line-walkthrough" class="level-2">Line-by-line walkthrough</a>
<a href="#how-it-works-big-picture" class="level-2">How it works (big picture)</a>
<a href="#do-this-on-your-computer" class="level-2">Do this on your computer</a>
<a href="#experiments-try-changing-this" class="level-2">Experiments — try changing this</a>
<a href="#remember" class="level-2">Remember</a>
<a href="#common-questions" class="level-2">Common questions</a>
<a href="#sitemap-xml" class="level-3">sitemap.xml?</a>
<a href="#how-long-should-i-spend-on-metadata-and-seo" class="level-3">How long should I spend on Metadata and SEO?</a>
<a href="#what-if-i-get-stuck-on-metadata-and-seo" class="level-3">What if I get stuck on Metadata and SEO?</a>
<a href="#where-is-metadata-and-seo-used-in-real-jobs" class="level-3">Where is Metadata and SEO used in real jobs?</a>
</nav>
</aside>
</div>
<footer class="tut-reader-extras">
<a href="/tutorials/interview-qa?course=nextjs-tutorial" class="tut-extra-link">
<i class="fas fa-microphone-lines"></i> Interview Q&A for this course
</a>
<section class="tutorial-quiz-cta">
<div class="d-flex align-items-start gap-3 mb-3">
<span class="tutorial-quiz-cta-icon">
<i class="fas fa-brain"></i>
</span>
<div>
<h2 class="h6 fw-bold mb-1">Test your knowledge</h2>
<p class="small text-secondary mb-0">Quizzes for this course—pass to earn certificates.</p>
</div>
</div>
<div class="row g-2">
<div class="col-md-6">
<a href="/quizzes/reactjs-practice-quiz" class="tutorial-quiz-card">
<div class="fw-bold mb-1">React.js — Practice Quiz</div>
<div class="small text-muted mb-2">Test your understanding of React.js Tutorial. Components, hooks, state, and modern Re…</div>
<span class="badge bg-secondary">Intermediate</span>
</a>
</div>
<div class="col-md-6">
<a href="/quizzes/nodejs-practice-quiz" class="tutorial-quiz-card">
<div class="fw-bold mb-1">Node.js — Practice Quiz</div>
<div class="small text-muted mb-2">Test your understanding of Node.js Tutorial. JavaScript on the server with Express an…</div>
<span class="badge bg-secondary">Intermediate</span>
</a>
</div>
<div class="col-md-6">
<a href="/quizzes/modern-javascript-es6-for-beginners-practice-quiz" class="tutorial-quiz-card">
<div class="fw-bold mb-1">Modern JavaScript (ES6+) for Beginners — Practice Quiz</div>
<div class="small text-muted mb-2">Test your understanding of Modern JavaScript (ES6+) for Beginners. ES6+ essentials wi…</div>
<span class="badge bg-secondary">Beginner</span>
</a>
</div>
<div class="col-md-6">
<a href="/quizzes/mern-stack-practice-quiz" class="tutorial-quiz-card">
<div class="fw-bold mb-1">MERN Stack — Practice Quiz</div>
<div class="small text-muted mb-2">Test your understanding of MERN Stack Tutorial. MongoDB, Express, React, and Node.js …</div>
<span class="badge bg-secondary">Intermediate</span>
</a>
</div>
<div class="col-md-6">
<a href="/quizzes/mean-stack-practice-quiz" class="tutorial-quiz-card">
<div class="fw-bold mb-1">MEAN Stack — Practice Quiz</div>
<div class="small text-muted mb-2">Test your understanding of MEAN Stack Tutorial. MongoDB, Express, Angular, and Node.j…</div>
<span class="badge bg-secondary">Intermediate</span>
</a>
</div>
<div class="col-md-6">
<a href="/quizzes/jquery-practice-quiz" class="tutorial-quiz-card">
<div class="fw-bold mb-1">jQuery — Practice Quiz</div>
<div class="small text-muted mb-2">Test your understanding of jQuery Tutorial. DOM manipulation and AJAX with jQuery.</div>
<span class="badge bg-secondary">Intermediate</span>
</a>
</div>
</div>
<a href="/quizzes" class="btn btn-outline-primary btn-sm mt-3">All quizzes</a>
</section>
</footer>
</article>
</div>
<!-- Sticky lesson navigation -->
<nav class="tut-reader-navbar" aria-label="Lesson navigation">
<div class="tut-reader-navbar-inner">
<a href="/tutorials/nextjs-tutorial-image-optimization-complete-guide" class="tut-nav-btn tut-nav-prev">
<i class="fas fa-arrow-left"></i>
<span class="d-none d-sm-inline">Previous</span>
</a>
<a href="/tutorials/course/nextjs-tutorial" class="tut-nav-btn tut-nav-syllabus d-none d-md-inline-flex" title="Course syllabus">
<i class="fas fa-list"></i>
</a>
<a href="/tutorials/nextjs-tutorial-performance-optimization-complete-guide" class="tut-nav-btn tut-nav-next btn-primary">
<span class="d-none d-sm-inline">Next lesson</span>
<span class="d-sm-none">Next</span>
<i class="fas fa-arrow-right"></i>
</a>
</div>
</nav>
</main>
</div>
<div class="modal fade" id="codePlayground" tabindex="-1" aria-labelledby="codePlaygroundLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content code-playground-modal border-secondary">
<div class="modal-header border-secondary">
<h5 class="modal-title" id="codePlaygroundLabel"><i class="fas fa-terminal me-2 text-warning"></i>Try code</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<textarea id="playgroundCode" class="form-control font-monospace code-playground-input mb-3" rows="12" spellcheck="false"></textarea>
<div class="d-flex justify-content-between align-items-center mb-2">
<span class="small text-muted">Output</span>
<button type="button" class="btn btn-primary btn-sm" id="runCodeBtn"><i class="fas fa-play me-1"></i> Run</button>
</div>
<pre id="playgroundOutput" class="code-playground-output p-3 rounded small mb-0">Ready.</pre>
</div>
</div>
</div>
</div>
<div class="offcanvas offcanvas-start offcanvas-theme tut-offcanvas-sidebar" tabindex="-1" id="mobileTutSidebar" aria-labelledby="mobileTutSidebarLabel">
<div class="offcanvas-header border-bottom">
<h5 class="offcanvas-title fw-bold h6" id="mobileTutSidebarLabel">Next.js Tutorial</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<a href="/tutorials/course/nextjs-tutorial" class="sidebar-tutorial-back mb-3"><i class="fas fa-arrow-left"></i> Course syllabus</a>
<details class="tut-sidebar-section" >
<summary>Start Here</summary>
<a href="/tutorials/nextjs-tutorial-nextjs-complete-beginners-guide" class="tut-link ">Next.js Complete Beginner's Guide</a>
</details>
<details class="tut-sidebar-section" >
<summary>Module 1: Next.js Foundations</summary>
<a href="/tutorials/nextjs-tutorial-introduction-to-nextjs-complete-guide" class="tut-link ">Introduction to Next.js — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-installing-nextjs-complete-guide" class="tut-link ">Installing Next.js — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-understanding-project-structure-complete-guide" class="tut-link ">Understanding Project Structure — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-app-router-basics-complete-guide" class="tut-link ">App Router Basics — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-pages-and-layouts-complete-guide" class="tut-link ">Pages and Layouts — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-react-components-in-nextjs-complete-guide" class="tut-link ">React Components in Next.js — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-client-components-complete-guide" class="tut-link ">Client Components — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-server-components-complete-guide" class="tut-link ">Server Components — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-routing-fundamentals-complete-guide" class="tut-link ">Routing Fundamentals — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-dynamic-routing-complete-guide" class="tut-link ">Dynamic Routing — Complete Guide</a>
</details>
<details class="tut-sidebar-section" >
<summary>Module 2: Layouts & Styling</summary>
<a href="/tutorials/nextjs-tutorial-nested-layouts-complete-guide" class="tut-link ">Nested Layouts — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-navigation-and-linking-complete-guide" class="tut-link ">Navigation and Linking — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-static-assets-complete-guide" class="tut-link ">Static Assets — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-css-modules-complete-guide" class="tut-link ">CSS Modules — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-tailwind-css-in-nextjs-complete-guide" class="tut-link ">Tailwind CSS in Next.js — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-data-fetching-complete-guide" class="tut-link ">Data Fetching — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-server-actions-complete-guide" class="tut-link ">Server Actions — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-forms-in-nextjs-complete-guide" class="tut-link ">Forms in Next.js — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-form-validation-complete-guide" class="tut-link ">Form Validation — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-authentication-basics-complete-guide" class="tut-link ">Authentication Basics — Complete Guide</a>
</details>
<details class="tut-sidebar-section" open>
<summary>Module 3: Data & Forms</summary>
<a href="/tutorials/nextjs-tutorial-middleware-complete-guide" class="tut-link ">Middleware — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-api-route-handlers-complete-guide" class="tut-link ">API Route Handlers — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-database-integration-complete-guide" class="tut-link ">Database Integration — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-file-upload-complete-guide" class="tut-link ">File Upload — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-image-optimization-complete-guide" class="tut-link ">Image Optimization — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-metadata-and-seo-complete-guide" class="tut-link active">Metadata and SEO — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-performance-optimization-complete-guide" class="tut-link ">Performance Optimization — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-deployment-complete-guide" class="tut-link ">Deployment — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-e-commerce-app-project-complete-guide" class="tut-link ">E-Commerce App Project — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-saas-dashboard-project-complete-guide" class="tut-link ">SaaS Dashboard Project — Complete Guide</a>
</details>
<details class="tut-sidebar-section" >
<summary>Module 4: Auth & APIs</summary>
<a href="/tutorials/nextjs-tutorial-ssr-vs-ssg-vs-isr-complete-guide" class="tut-link ">SSR vs SSG vs ISR — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-streaming-and-suspense-complete-guide" class="tut-link ">Streaming and Suspense — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-loading-and-error-ui-complete-guide" class="tut-link ">Loading and Error UI — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-route-groups-complete-guide" class="tut-link ">Route Groups — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-parallel-routes-complete-guide" class="tut-link ">Parallel Routes — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-intercepting-routes-complete-guide" class="tut-link ">Intercepting Routes — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-edge-runtime-complete-guide" class="tut-link ">Edge Runtime — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-caching-in-nextjs-complete-guide" class="tut-link ">Caching in Next.js — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-revalidating-data-complete-guide" class="tut-link ">Revalidating Data — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-tanstack-query-in-nextjs-complete-guide" class="tut-link ">TanStack Query in Next.js — Complete Guide</a>
</details>
<details class="tut-sidebar-section" >
<summary>Module 5: SEO & Deploy</summary>
<a href="/tutorials/nextjs-tutorial-nextauthjs-complete-guide" class="tut-link ">NextAuth.js — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-clerk-authentication-complete-guide" class="tut-link ">Clerk Authentication — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-oauth-and-social-login-complete-guide" class="tut-link ">OAuth and Social Login — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-protected-routes-complete-guide" class="tut-link ">Protected Routes — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-prisma-orm-complete-guide" class="tut-link ">Prisma ORM — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-mongodb-with-nextjs-complete-guide" class="tut-link ">MongoDB with Next.js — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-postgresql-with-nextjs-complete-guide" class="tut-link ">PostgreSQL with Next.js — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-environment-variables-complete-guide" class="tut-link ">Environment Variables — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-unit-testing-complete-guide" class="tut-link ">Unit Testing — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-integration-testing-complete-guide" class="tut-link ">Integration Testing — Complete Guide</a>
</details>
<details class="tut-sidebar-section" >
<summary>Module 6: Advanced Routing</summary>
<a href="/tutorials/nextjs-tutorial-playwright-e2e-complete-guide" class="tut-link ">Playwright E2E — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-cicd-for-nextjs-complete-guide" class="tut-link ">CI/CD for Next.js — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-internationalization-complete-guide" class="tut-link ">Internationalization — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-accessibility-complete-guide" class="tut-link ">Accessibility — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-xss-and-csrf-protection-complete-guide" class="tut-link ">XSS and CSRF Protection — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-security-headers-complete-guide" class="tut-link ">Security Headers — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-rate-limiting-complete-guide" class="tut-link ">Rate Limiting — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-structured-data-complete-guide" class="tut-link ">Structured Data — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-sitemap-and-robots-complete-guide" class="tut-link ">Sitemap and Robots — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-zustand-state-complete-guide" class="tut-link ">Zustand State — Complete Guide</a>
</details>
<details class="tut-sidebar-section" >
<summary>Module 7: Auth & Database</summary>
<a href="/tutorials/nextjs-tutorial-redux-toolkit-in-nextjs-complete-guide" class="tut-link ">Redux Toolkit in Next.js — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-react-context-patterns-complete-guide" class="tut-link ">React Context Patterns — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-monorepo-with-turborepo-complete-guide" class="tut-link ">Monorepo with Turborepo — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-docker-for-nextjs-complete-guide" class="tut-link ">Docker for Next.js — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-vercel-deployment-complete-guide" class="tut-link ">Vercel Deployment — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-aws-amplify-complete-guide" class="tut-link ">AWS Amplify — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-azure-static-web-apps-complete-guide" class="tut-link ">Azure Static Web Apps — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-micro-frontends-complete-guide" class="tut-link ">Micro Frontends — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-remix-vs-nextjs-complete-guide" class="tut-link ">Remix vs Next.js — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-web-vitals-tuning-complete-guide" class="tut-link ">Web Vitals Tuning — Complete Guide</a>
</details>
<details class="tut-sidebar-section" >
<summary>Module 8: Quality & Security</summary>
<a href="/tutorials/nextjs-tutorial-font-optimization-complete-guide" class="tut-link ">Font Optimization — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-bundle-analysis-complete-guide" class="tut-link ">Bundle Analysis — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-blog-application-project-complete-guide" class="tut-link ">Blog Application Project — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-student-portal-project-complete-guide" class="tut-link ">Student Portal Project — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-job-portal-project-complete-guide" class="tut-link ">Job Portal Project — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-hospital-portal-project-complete-guide" class="tut-link ">Hospital Portal Project — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-food-delivery-frontend-project-complete-guide" class="tut-link ">Food Delivery Frontend Project — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-banking-dashboard-project-complete-guide" class="tut-link ">Banking Dashboard Project — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-lms-course-player-project-complete-guide" class="tut-link ">LMS Course Player Project — Complete Guide</a>
<a href="/tutorials/nextjs-tutorial-crm-admin-project-complete-guide" class="tut-link ">CRM Admin Project — Complete Guide</a>
</details>
<details class="tut-sidebar-section" >
<summary>Module 9: Cloud & Scale</summary>
<a href="/tutorials/nextjs-tutorial-real-time-chat-project-learnhub-project" class="tut-link ">Real-Time Chat Project — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-multi-tenant-saas-project-learnhub-project" class="tut-link ">Multi-Tenant SaaS Project — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-inventory-dashboard-project-learnhub-project" class="tut-link ">Inventory Dashboard Project — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-travel-booking-project-learnhub-project" class="tut-link ">Travel Booking Project — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-news-portal-project-learnhub-project" class="tut-link ">News Portal Project — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-portfolio-site-project-learnhub-project" class="tut-link ">Portfolio Site Project — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-enterprise-architecture-learnhub-project" class="tut-link ">Enterprise Architecture — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-clean-folder-structure-learnhub-project" class="tut-link ">Clean Folder Structure — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-api-design-patterns-learnhub-project" class="tut-link ">API Design Patterns — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-error-handling-patterns-learnhub-project" class="tut-link ">Error Handling Patterns — LearnHub Project</a>
</details>
<details class="tut-sidebar-section" >
<summary>Module 10: Portfolio Projects</summary>
<a href="/tutorials/nextjs-tutorial-logging-and-monitoring-learnhub-project" class="tut-link ">Logging and Monitoring — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-stripe-payments-learnhub-project" class="tut-link ">Stripe Payments — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-analytics-and-observability-learnhub-project" class="tut-link ">Analytics and Observability — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-storybook-with-nextjs-learnhub-project" class="tut-link ">Storybook with Next.js — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-graphql-with-nextjs-learnhub-project" class="tut-link ">GraphQL with Next.js — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-content-security-policy-learnhub-project" class="tut-link ">Content Security Policy — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-partial-prerendering-learnhub-project" class="tut-link ">Partial Prerendering — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-server-actions-security-learnhub-project" class="tut-link ">Server Actions Security — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-production-checklist-learnhub-project" class="tut-link ">Production Checklist — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-nextjs-career-roadmap-learnhub-project" class="tut-link ">Next.js Career Roadmap — LearnHub Project</a>
</details>
</div>
</div>
<script src="/js/tutorial-lesson.js"></script>
<script src="/js/tutorial-playground.js" defer></script>
<footer class="site-footer">
<div class="container">
<div class="row g-4">
<div class="col-lg-4 col-md-6">
<span class="footer-brand d-inline-flex align-items-center gap-2">
<img src="/images/toolliyo-logo.png" alt="" class="brand-logo">
Toolliyo
</span>
<p class="footer-desc">The premium developer platform for ebooks, quizzes, and certifications. Level up
your skills — built for professionals, not beginners.</p>
<div class="social-links mt-3">
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="GitHub"><i class="fab fa-github"></i></a>
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
<a href="#" aria-label="Discord"><i class="fab fa-discord"></i></a>
</div>
</div>
<div class="col-lg-2 col-md-6">
<h6>Platform</h6>
<ul class="footer-links">
<li><a href="/tutorials">Tutorials</a></li>
<li><a href="/ebooks">Ebooks</a></li>
<li><a href="/quizzes">Quizzes</a></li>
<li><a href="/pricing">Pricing</a></li>
<li><a href="/about">About</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-6">
<h6>Resources</h6>
<ul class="footer-links">
<li><a href="/blogs">Blog</a></li>
<li><a href="/community">Community</a></li>
<li><a href="/tools">Developer tools</a></li>
<li><a href="/career">Career hub</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-6">
<h6>Legal</h6>
<ul class="footer-links">
<li><a href="/privacy-policy">Privacy Policy</a></li>
<li><a href="/terms-of-service">Terms of Service</a></li>
<li><a href="/cookie-policy">Cookie Policy</a></li>
<li><a href="/refund-policy">Refund Policy</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-6">
<h6>Support</h6>
<ul class="footer-links">
<li><a href="/support">Support</a></li>
<li><a href="/help-center">Help Center</a></li>
<li><a href="/contact">Contact Us</a></li>
<li><a href="mailto:care@toolliyo.com">care@toolliyo.com</a></li>
<li><a href="/status">Status Page</a></li>
<li><a href="/faq">FAQ</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 Toolliyo. All rights reserved. Built with <i class="fas fa-heart"
style="color:#ef4444;"></i> for Developers.</p>
</div>
</div>
</footer>
<div id="site-chatbot" class="site-chatbot" data-csrf="XecksWsY-MV_CEa_JuSjVESGrFR57arj6GkU">
<button id="site-chatbot-toggle" class="site-chatbot-toggle" type="button" aria-label="Open support chat">
<i class="fas fa-comments"></i>
</button>
<section id="site-chatbot-panel" class="site-chatbot-panel" aria-label="Website support assistant">
<header class="site-chatbot-header">
<strong>Toolliyo Assistant</strong>
<button id="site-chatbot-close" class="site-chatbot-close" type="button" aria-label="Close chat">×</button>
</header>
<div id="site-chatbot-messages" class="site-chatbot-messages">
<div class="site-chatbot-msg bot">
<div class="site-chatbot-bubble">
Ask about tutorials, ebooks, training, pricing, mentor services, and support. I use public site content only—not admin or internal tools.
</div>
</div>
</div>
<form id="site-chatbot-form" class="site-chatbot-form">
<input id="site-chatbot-input" type="text" maxlength="500" placeholder="Type your question..." autocomplete="off" required>
<button type="submit" class="btn btn-primary btn-sm">Send</button>
</form>
<button id="site-chatbot-enquiry-toggle" type="button" class="site-chatbot-enquiry-toggle">
Contact support team
</button>
<p class="site-chatbot-support-email"><a href="mailto:care@toolliyo.com">care@toolliyo.com</a></p>
<form id="site-chatbot-enquiry-form" class="site-chatbot-enquiry-form site-chatbot-enquiry-hidden">
<div class="site-chatbot-enquiry-title">Need callback? Share your details</div>
<div class="site-chatbot-enquiry-grid">
<select id="site-chatbot-enquiry-type" required>
<option value="query">Query</option>
<option value="enquiry">Enquiry</option>
<option value="complaint">Complaint</option>
</select>
<input id="site-chatbot-enquiry-name" type="text" maxlength="120" placeholder="Full name" required>
<input id="site-chatbot-enquiry-email" type="email" maxlength="180" placeholder="Email" required>
<input id="site-chatbot-enquiry-phone" type="text" maxlength="20" placeholder="Phone" required>
<textarea id="site-chatbot-enquiry-message" maxlength="2000" rows="2" placeholder="Your query/enquiry/complaint" required></textarea>
</div>
<button type="submit" class="btn btn-outline-primary btn-sm w-100">Submit request</button>
</form>
</section>
</div>
<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Prism.js for syntax highlighting -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-csharp.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-typescript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup.min.js"></script>
<script src="/js/main.js"></script>
<script src="/js/site-chatbot.js"></script>
</body>
</html>