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>
<section class="lesson-interview-qa" aria-labelledby="lessonIqaTitle">
<h2 id="lessonIqaTitle" class="h5 fw-bold mb-1"><i class="fas fa-microphone-lines me-2 text-warning"></i>Interview prep for this lesson</h2>
<p class="small text-secondary mb-3">Practice these questions aloud after reading—each links to a full structured answer.</p>
<a href="/tutorials/interview-qa/q/nextjs-tutorial-explain-javascript-in-the-context-of-nextjs" class="lesson-interview-qa-item">
<div class="d-flex flex-wrap gap-1 mb-1">
<span class="badge bg-secondary" style="font-size:0.7rem;">Junior</span>
<span class="badge bg-success" style="font-size:0.7rem;">Detailed</span>
</div>
<div class="fw-semibold small">Explain JavaScript in the context of Next.js.</div>
<div class="text-muted small mt-1">Short answer: JavaScript runs single-threaded with an event loop. Closures capture lexical scope; promises/async handle I/O without blocking the UI thread. Real-world example (ShopNest) On the ShopNest storefront UI, thi…</div>
</a>
<a href="/tutorials/interview-qa/q/nextjs-tutorial-what-are-common-mistakes-teams-make-with-components-whe" class="lesson-interview-qa-item">
<div class="d-flex flex-wrap gap-1 mb-1">
<span class="badge bg-secondary" style="font-size:0.7rem;">Mid</span>
<span class="badge bg-success" style="font-size:0.7rem;">Detailed</span>
</div>
<div class="fw-semibold small">What are common mistakes teams make with Components when using Next.js?</div>
<div class="text-muted small mt-1">Short answer: Interviewers want a crisp definition, a practical example from your projects, and awareness of trade-offs—not textbook dumps. Explain a bit more How to structure your answer (60–90 seconds) Define Component…</div>
</a>
<a href="/tutorials/interview-qa/q/nextjs-tutorial-how-would-you-debug-a-production-issue-related-to-state" class="lesson-interview-qa-item">
<div class="d-flex flex-wrap gap-1 mb-1">
<span class="badge bg-secondary" style="font-size:0.7rem;">Senior</span>
<span class="badge bg-success" style="font-size:0.7rem;">Detailed</span>
</div>
<div class="fw-semibold small">How would you debug a production issue related to State in a Next.js application?</div>
<div class="text-muted small mt-1">Short answer: Interviewers want a crisp definition, a practical example from your projects, and awareness of trade-offs—not textbook dumps. Explain a bit more How to structure your answer (60–90 seconds) Define State in…</div>
</a>
<a href="/tutorials/interview-qa/q/nextjs-tutorial-describe-a-real-world-scenario-where-performance-matter" class="lesson-interview-qa-item">
<div class="d-flex flex-wrap gap-1 mb-1">
<span class="badge bg-secondary" style="font-size:0.7rem;">Junior</span>
<span class="badge bg-success" style="font-size:0.7rem;">Detailed</span>
</div>
<div class="fw-semibold small">Describe a real-world scenario where Performance mattered in a Next.js project.</div>
<div class="text-muted small mt-1">Short answer: Interviewers want a crisp definition, a practical example from your projects, and awareness of trade-offs—not textbook dumps. Explain a bit more How to structure your answer (60–90 seconds) Define Performan…</div>
</a>
<div class="mt-3 d-flex flex-wrap gap-2">
<a href="/tutorials/interview-qa?course=nextjs-tutorial" class="btn btn-sm btn-outline-warning">All course Q&A</a>
<a href="/tutorials/interview-practice" class="btn btn-sm btn-outline-light">Practice exams</a>
</div>
</section>
<section class="lesson-qa-section mt-4" id="lessonQa" data-lesson-slug="nextjs-tutorial-metadata-and-seo-complete-guide" data-course-slug="nextjs-tutorial">
<div class="card border-0" style="border:1px solid var(--border-color)!important;">
<div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
<span><i class="fas fa-comments me-2 text-primary"></i>Questions on this lesson</span>
<span class="badge bg-primary" id="lessonQaCount">0</span>
</div>
<div class="card-body">
<p class="small text-muted mb-4"><a href="/auth/login?returnTo=%2Ftutorials%2Fnextjs-tutorial-metadata-and-seo-complete-guide%23lessonQa">Sign in</a> to ask a question or upvote helpful answers.</p>
<div id="lessonQaList">
<p class="text-muted small mb-0" id="lessonQaEmpty">No questions yet — be the first to ask!</p>
</div>
</div>
</div>
</section>
<script>
window.__LESSON_QA__ = {
loggedIn: false,
isAdmin: false,
lessonSlug: "nextjs-tutorial-metadata-and-seo-complete-guide",
courseSlug: "nextjs-tutorial"
};
</script>
<script src="/js/lesson-qa.js" defer></script>
</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>
<p class="tut-sidebar-w3-label mb-2">Next.js Tutorial</p>
<input type="search" class="form-control form-control-sm tut-sidebar-search mb-2" id="tutSidebarFilter" placeholder="Filter topics…" aria-label="Filter lesson topics" autocomplete="off">
<details class="tut-sidebar-section tut-sidebar-section--start-here" open>
<summary>Start here</summary>
<nav>
<a href="/tutorials/nextjs-tutorial-nextjs-complete-beginners-guide" class="tut-link tut-link--start-here " title="Next.js Complete Beginner's Guide" data-lesson-title="next.js complete beginner's guide">Next.js Complete Beginner's Guide</a>
</nav>
</details>
<details class="tut-sidebar-section" >
<summary>Module 1: Next.js Foundations</summary>
<nav>
<a href="/tutorials/nextjs-tutorial-introduction-to-nextjs-complete-guide" class="tut-link " title="Introduction to Next.js — Complete Guide" data-lesson-title="introduction to next.js">Introduction to Next.js</a>
<a href="/tutorials/nextjs-tutorial-installing-nextjs-complete-guide" class="tut-link " title="Installing Next.js — Complete Guide" data-lesson-title="installing next.js">Installing Next.js</a>
<a href="/tutorials/nextjs-tutorial-understanding-project-structure-complete-guide" class="tut-link " title="Understanding Project Structure — Complete Guide" data-lesson-title="understanding project structure">Understanding Project Structure</a>
<a href="/tutorials/nextjs-tutorial-app-router-basics-complete-guide" class="tut-link " title="App Router Basics — Complete Guide" data-lesson-title="app router basics">App Router Basics</a>
<a href="/tutorials/nextjs-tutorial-pages-and-layouts-complete-guide" class="tut-link " title="Pages and Layouts — Complete Guide" data-lesson-title="pages and layouts">Pages and Layouts</a>
<a href="/tutorials/nextjs-tutorial-react-components-in-nextjs-complete-guide" class="tut-link " title="React Components in Next.js — Complete Guide" data-lesson-title="react components in next.js">React Components in Next.js</a>
<a href="/tutorials/nextjs-tutorial-client-components-complete-guide" class="tut-link " title="Client Components — Complete Guide" data-lesson-title="client components">Client Components</a>
<a href="/tutorials/nextjs-tutorial-server-components-complete-guide" class="tut-link " title="Server Components — Complete Guide" data-lesson-title="server components">Server Components</a>
<a href="/tutorials/nextjs-tutorial-routing-fundamentals-complete-guide" class="tut-link " title="Routing Fundamentals — Complete Guide" data-lesson-title="routing fundamentals">Routing Fundamentals</a>
<a href="/tutorials/nextjs-tutorial-dynamic-routing-complete-guide" class="tut-link " title="Dynamic Routing — Complete Guide" data-lesson-title="dynamic routing">Dynamic Routing</a>
</nav>
</details>
<details class="tut-sidebar-section" >
<summary>Module 2: Layouts & Styling</summary>
<nav>
<a href="/tutorials/nextjs-tutorial-nested-layouts-complete-guide" class="tut-link " title="Nested Layouts — Complete Guide" data-lesson-title="nested layouts">Nested Layouts</a>
<a href="/tutorials/nextjs-tutorial-navigation-and-linking-complete-guide" class="tut-link " title="Navigation and Linking — Complete Guide" data-lesson-title="navigation and linking">Navigation and Linking</a>
<a href="/tutorials/nextjs-tutorial-static-assets-complete-guide" class="tut-link " title="Static Assets — Complete Guide" data-lesson-title="static assets">Static Assets</a>
<a href="/tutorials/nextjs-tutorial-css-modules-complete-guide" class="tut-link " title="CSS Modules — Complete Guide" data-lesson-title="css modules">CSS Modules</a>
<a href="/tutorials/nextjs-tutorial-tailwind-css-in-nextjs-complete-guide" class="tut-link " title="Tailwind CSS in Next.js — Complete Guide" data-lesson-title="tailwind css in next.js">Tailwind CSS in Next.js</a>
<a href="/tutorials/nextjs-tutorial-data-fetching-complete-guide" class="tut-link " title="Data Fetching — Complete Guide" data-lesson-title="data fetching">Data Fetching</a>
<a href="/tutorials/nextjs-tutorial-server-actions-complete-guide" class="tut-link " title="Server Actions — Complete Guide" data-lesson-title="server actions">Server Actions</a>
<a href="/tutorials/nextjs-tutorial-forms-in-nextjs-complete-guide" class="tut-link " title="Forms in Next.js — Complete Guide" data-lesson-title="forms in next.js">Forms in Next.js</a>
<a href="/tutorials/nextjs-tutorial-form-validation-complete-guide" class="tut-link " title="Form Validation — Complete Guide" data-lesson-title="form validation">Form Validation</a>
<a href="/tutorials/nextjs-tutorial-authentication-basics-complete-guide" class="tut-link " title="Authentication Basics — Complete Guide" data-lesson-title="authentication basics">Authentication Basics</a>
</nav>
</details>
<details class="tut-sidebar-section" open>
<summary>Module 3: Data & Forms</summary>
<nav>
<a href="/tutorials/nextjs-tutorial-middleware-complete-guide" class="tut-link " title="Middleware — Complete Guide" data-lesson-title="middleware">Middleware</a>
<a href="/tutorials/nextjs-tutorial-api-route-handlers-complete-guide" class="tut-link " title="API Route Handlers — Complete Guide" data-lesson-title="api route handlers">API Route Handlers</a>
<a href="/tutorials/nextjs-tutorial-database-integration-complete-guide" class="tut-link " title="Database Integration — Complete Guide" data-lesson-title="database integration">Database Integration</a>
<a href="/tutorials/nextjs-tutorial-file-upload-complete-guide" class="tut-link " title="File Upload — Complete Guide" data-lesson-title="file upload">File Upload</a>
<a href="/tutorials/nextjs-tutorial-image-optimization-complete-guide" class="tut-link " title="Image Optimization — Complete Guide" data-lesson-title="image optimization">Image Optimization</a>
<a href="/tutorials/nextjs-tutorial-metadata-and-seo-complete-guide" class="tut-link active" title="Metadata and SEO — Complete Guide" data-lesson-title="metadata and seo">Metadata and SEO</a>
<a href="/tutorials/nextjs-tutorial-performance-optimization-complete-guide" class="tut-link " title="Performance Optimization — Complete Guide" data-lesson-title="performance optimization">Performance Optimization</a>
<a href="/tutorials/nextjs-tutorial-deployment-complete-guide" class="tut-link " title="Deployment — Complete Guide" data-lesson-title="deployment">Deployment</a>
<a href="/tutorials/nextjs-tutorial-e-commerce-app-project-complete-guide" class="tut-link " title="E-Commerce App Project — Complete Guide" data-lesson-title="e-commerce app project">E-Commerce App Project</a>
<a href="/tutorials/nextjs-tutorial-saas-dashboard-project-complete-guide" class="tut-link " title="SaaS Dashboard Project — Complete Guide" data-lesson-title="saas dashboard project">SaaS Dashboard Project</a>
</nav>
</details>
<details class="tut-sidebar-section" >
<summary>Module 4: Auth & APIs</summary>
<nav>
<a href="/tutorials/nextjs-tutorial-ssr-vs-ssg-vs-isr-complete-guide" class="tut-link " title="SSR vs SSG vs ISR — Complete Guide" data-lesson-title="ssr vs ssg vs isr">SSR vs SSG vs ISR</a>
<a href="/tutorials/nextjs-tutorial-streaming-and-suspense-complete-guide" class="tut-link " title="Streaming and Suspense — Complete Guide" data-lesson-title="streaming and suspense">Streaming and Suspense</a>
<a href="/tutorials/nextjs-tutorial-loading-and-error-ui-complete-guide" class="tut-link " title="Loading and Error UI — Complete Guide" data-lesson-title="loading and error ui">Loading and Error UI</a>
<a href="/tutorials/nextjs-tutorial-route-groups-complete-guide" class="tut-link " title="Route Groups — Complete Guide" data-lesson-title="route groups">Route Groups</a>
<a href="/tutorials/nextjs-tutorial-parallel-routes-complete-guide" class="tut-link " title="Parallel Routes — Complete Guide" data-lesson-title="parallel routes">Parallel Routes</a>
<a href="/tutorials/nextjs-tutorial-intercepting-routes-complete-guide" class="tut-link " title="Intercepting Routes — Complete Guide" data-lesson-title="intercepting routes">Intercepting Routes</a>
<a href="/tutorials/nextjs-tutorial-edge-runtime-complete-guide" class="tut-link " title="Edge Runtime — Complete Guide" data-lesson-title="edge runtime">Edge Runtime</a>
<a href="/tutorials/nextjs-tutorial-caching-in-nextjs-complete-guide" class="tut-link " title="Caching in Next.js — Complete Guide" data-lesson-title="caching in next.js">Caching in Next.js</a>
<a href="/tutorials/nextjs-tutorial-revalidating-data-complete-guide" class="tut-link " title="Revalidating Data — Complete Guide" data-lesson-title="revalidating data">Revalidating Data</a>
<a href="/tutorials/nextjs-tutorial-tanstack-query-in-nextjs-complete-guide" class="tut-link " title="TanStack Query in Next.js — Complete Guide" data-lesson-title="tanstack query in next.js">TanStack Query in Next.js</a>
</nav>
</details>
<details class="tut-sidebar-section" >
<summary>Module 5: SEO & Deploy</summary>
<nav>
<a href="/tutorials/nextjs-tutorial-nextauthjs-complete-guide" class="tut-link " title="NextAuth.js — Complete Guide" data-lesson-title="nextauth.js">NextAuth.js</a>
<a href="/tutorials/nextjs-tutorial-clerk-authentication-complete-guide" class="tut-link " title="Clerk Authentication — Complete Guide" data-lesson-title="clerk authentication">Clerk Authentication</a>
<a href="/tutorials/nextjs-tutorial-oauth-and-social-login-complete-guide" class="tut-link " title="OAuth and Social Login — Complete Guide" data-lesson-title="oauth and social login">OAuth and Social Login</a>
<a href="/tutorials/nextjs-tutorial-protected-routes-complete-guide" class="tut-link " title="Protected Routes — Complete Guide" data-lesson-title="protected routes">Protected Routes</a>
<a href="/tutorials/nextjs-tutorial-prisma-orm-complete-guide" class="tut-link " title="Prisma ORM — Complete Guide" data-lesson-title="prisma orm">Prisma ORM</a>
<a href="/tutorials/nextjs-tutorial-mongodb-with-nextjs-complete-guide" class="tut-link " title="MongoDB with Next.js — Complete Guide" data-lesson-title="mongodb with next.js">MongoDB with Next.js</a>
<a href="/tutorials/nextjs-tutorial-postgresql-with-nextjs-complete-guide" class="tut-link " title="PostgreSQL with Next.js — Complete Guide" data-lesson-title="postgresql with next.js">PostgreSQL with Next.js</a>
<a href="/tutorials/nextjs-tutorial-environment-variables-complete-guide" class="tut-link " title="Environment Variables — Complete Guide" data-lesson-title="environment variables">Environment Variables</a>
<a href="/tutorials/nextjs-tutorial-unit-testing-complete-guide" class="tut-link " title="Unit Testing — Complete Guide" data-lesson-title="unit testing">Unit Testing</a>
<a href="/tutorials/nextjs-tutorial-integration-testing-complete-guide" class="tut-link " title="Integration Testing — Complete Guide" data-lesson-title="integration testing">Integration Testing</a>
</nav>
</details>
<details class="tut-sidebar-section" >
<summary>Module 6: Advanced Routing</summary>
<nav>
<a href="/tutorials/nextjs-tutorial-playwright-e2e-complete-guide" class="tut-link " title="Playwright E2E — Complete Guide" data-lesson-title="playwright e2e">Playwright E2E</a>
<a href="/tutorials/nextjs-tutorial-cicd-for-nextjs-complete-guide" class="tut-link " title="CI/CD for Next.js — Complete Guide" data-lesson-title="ci/cd for next.js">CI/CD for Next.js</a>
<a href="/tutorials/nextjs-tutorial-internationalization-complete-guide" class="tut-link " title="Internationalization — Complete Guide" data-lesson-title="internationalization">Internationalization</a>
<a href="/tutorials/nextjs-tutorial-accessibility-complete-guide" class="tut-link " title="Accessibility — Complete Guide" data-lesson-title="accessibility">Accessibility</a>
<a href="/tutorials/nextjs-tutorial-xss-and-csrf-protection-complete-guide" class="tut-link " title="XSS and CSRF Protection — Complete Guide" data-lesson-title="xss and csrf protection">XSS and CSRF Protection</a>
<a href="/tutorials/nextjs-tutorial-security-headers-complete-guide" class="tut-link " title="Security Headers — Complete Guide" data-lesson-title="security headers">Security Headers</a>
<a href="/tutorials/nextjs-tutorial-rate-limiting-complete-guide" class="tut-link " title="Rate Limiting — Complete Guide" data-lesson-title="rate limiting">Rate Limiting</a>
<a href="/tutorials/nextjs-tutorial-structured-data-complete-guide" class="tut-link " title="Structured Data — Complete Guide" data-lesson-title="structured data">Structured Data</a>
<a href="/tutorials/nextjs-tutorial-sitemap-and-robots-complete-guide" class="tut-link " title="Sitemap and Robots — Complete Guide" data-lesson-title="sitemap and robots">Sitemap and Robots</a>
<a href="/tutorials/nextjs-tutorial-zustand-state-complete-guide" class="tut-link " title="Zustand State — Complete Guide" data-lesson-title="zustand state">Zustand State</a>
</nav>
</details>
<details class="tut-sidebar-section" >
<summary>Module 7: Auth & Database</summary>
<nav>
<a href="/tutorials/nextjs-tutorial-redux-toolkit-in-nextjs-complete-guide" class="tut-link " title="Redux Toolkit in Next.js — Complete Guide" data-lesson-title="redux toolkit in next.js">Redux Toolkit in Next.js</a>
<a href="/tutorials/nextjs-tutorial-react-context-patterns-complete-guide" class="tut-link " title="React Context Patterns — Complete Guide" data-lesson-title="react context patterns">React Context Patterns</a>
<a href="/tutorials/nextjs-tutorial-monorepo-with-turborepo-complete-guide" class="tut-link " title="Monorepo with Turborepo — Complete Guide" data-lesson-title="monorepo with turborepo">Monorepo with Turborepo</a>
<a href="/tutorials/nextjs-tutorial-docker-for-nextjs-complete-guide" class="tut-link " title="Docker for Next.js — Complete Guide" data-lesson-title="docker for next.js">Docker for Next.js</a>
<a href="/tutorials/nextjs-tutorial-vercel-deployment-complete-guide" class="tut-link " title="Vercel Deployment — Complete Guide" data-lesson-title="vercel deployment">Vercel Deployment</a>
<a href="/tutorials/nextjs-tutorial-aws-amplify-complete-guide" class="tut-link " title="AWS Amplify — Complete Guide" data-lesson-title="aws amplify">AWS Amplify</a>
<a href="/tutorials/nextjs-tutorial-azure-static-web-apps-complete-guide" class="tut-link " title="Azure Static Web Apps — Complete Guide" data-lesson-title="azure static web apps">Azure Static Web Apps</a>
<a href="/tutorials/nextjs-tutorial-micro-frontends-complete-guide" class="tut-link " title="Micro Frontends — Complete Guide" data-lesson-title="micro frontends">Micro Frontends</a>
<a href="/tutorials/nextjs-tutorial-remix-vs-nextjs-complete-guide" class="tut-link " title="Remix vs Next.js — Complete Guide" data-lesson-title="remix vs next.js">Remix vs Next.js</a>
<a href="/tutorials/nextjs-tutorial-web-vitals-tuning-complete-guide" class="tut-link " title="Web Vitals Tuning — Complete Guide" data-lesson-title="web vitals tuning">Web Vitals Tuning</a>
</nav>
</details>
<details class="tut-sidebar-section" >
<summary>Module 8: Quality & Security</summary>
<nav>
<a href="/tutorials/nextjs-tutorial-font-optimization-complete-guide" class="tut-link " title="Font Optimization — Complete Guide" data-lesson-title="font optimization">Font Optimization</a>
<a href="/tutorials/nextjs-tutorial-bundle-analysis-complete-guide" class="tut-link " title="Bundle Analysis — Complete Guide" data-lesson-title="bundle analysis">Bundle Analysis</a>
<a href="/tutorials/nextjs-tutorial-blog-application-project-complete-guide" class="tut-link " title="Blog Application Project — Complete Guide" data-lesson-title="blog application project">Blog Application Project</a>
<a href="/tutorials/nextjs-tutorial-student-portal-project-complete-guide" class="tut-link " title="Student Portal Project — Complete Guide" data-lesson-title="student portal project">Student Portal Project</a>
<a href="/tutorials/nextjs-tutorial-job-portal-project-complete-guide" class="tut-link " title="Job Portal Project — Complete Guide" data-lesson-title="job portal project">Job Portal Project</a>
<a href="/tutorials/nextjs-tutorial-hospital-portal-project-complete-guide" class="tut-link " title="Hospital Portal Project — Complete Guide" data-lesson-title="hospital portal project">Hospital Portal Project</a>
<a href="/tutorials/nextjs-tutorial-food-delivery-frontend-project-complete-guide" class="tut-link " title="Food Delivery Frontend Project — Complete Guide" data-lesson-title="food delivery frontend project">Food Delivery Frontend Project</a>
<a href="/tutorials/nextjs-tutorial-banking-dashboard-project-complete-guide" class="tut-link " title="Banking Dashboard Project — Complete Guide" data-lesson-title="banking dashboard project">Banking Dashboard Project</a>
<a href="/tutorials/nextjs-tutorial-lms-course-player-project-complete-guide" class="tut-link " title="LMS Course Player Project — Complete Guide" data-lesson-title="lms course player project">LMS Course Player Project</a>
<a href="/tutorials/nextjs-tutorial-crm-admin-project-complete-guide" class="tut-link " title="CRM Admin Project — Complete Guide" data-lesson-title="crm admin project">CRM Admin Project</a>
</nav>
</details>
<details class="tut-sidebar-section" >
<summary>Module 9: Cloud & Scale</summary>
<nav>
<a href="/tutorials/nextjs-tutorial-real-time-chat-project-learnhub-project" class="tut-link " title="Real-Time Chat Project — LearnHub Project" data-lesson-title="real-time chat project — learnhub project">Real-Time Chat Project — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-multi-tenant-saas-project-learnhub-project" class="tut-link " title="Multi-Tenant SaaS Project — LearnHub Project" data-lesson-title="multi-tenant saas project — learnhub project">Multi-Tenant SaaS Project — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-inventory-dashboard-project-learnhub-project" class="tut-link " title="Inventory Dashboard Project — LearnHub Project" data-lesson-title="inventory dashboard project — learnhub project">Inventory Dashboard Project — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-travel-booking-project-learnhub-project" class="tut-link " title="Travel Booking Project — LearnHub Project" data-lesson-title="travel booking project — learnhub project">Travel Booking Project — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-news-portal-project-learnhub-project" class="tut-link " title="News Portal Project — LearnHub Project" data-lesson-title="news portal project — learnhub project">News Portal Project — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-portfolio-site-project-learnhub-project" class="tut-link " title="Portfolio Site Project — LearnHub Project" data-lesson-title="portfolio site project — learnhub project">Portfolio Site Project — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-enterprise-architecture-learnhub-project" class="tut-link " title="Enterprise Architecture — LearnHub Project" data-lesson-title="enterprise architecture — learnhub project">Enterprise Architecture — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-clean-folder-structure-learnhub-project" class="tut-link " title="Clean Folder Structure — LearnHub Project" data-lesson-title="clean folder structure — learnhub project">Clean Folder Structure — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-api-design-patterns-learnhub-project" class="tut-link " title="API Design Patterns — LearnHub Project" data-lesson-title="api design patterns — learnhub project">API Design Patterns — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-error-handling-patterns-learnhub-project" class="tut-link " title="Error Handling Patterns — LearnHub Project" data-lesson-title="error handling patterns — learnhub project">Error Handling Patterns — LearnHub Project</a>
</nav>
</details>
<details class="tut-sidebar-section" >
<summary>Module 10: Portfolio Projects</summary>
<nav>
<a href="/tutorials/nextjs-tutorial-logging-and-monitoring-learnhub-project" class="tut-link " title="Logging and Monitoring — LearnHub Project" data-lesson-title="logging and monitoring — learnhub project">Logging and Monitoring — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-stripe-payments-learnhub-project" class="tut-link " title="Stripe Payments — LearnHub Project" data-lesson-title="stripe payments — learnhub project">Stripe Payments — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-analytics-and-observability-learnhub-project" class="tut-link " title="Analytics and Observability — LearnHub Project" data-lesson-title="analytics and observability — learnhub project">Analytics and Observability — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-storybook-with-nextjs-learnhub-project" class="tut-link " title="Storybook with Next.js — LearnHub Project" data-lesson-title="storybook with next.js — learnhub project">Storybook with Next.js — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-graphql-with-nextjs-learnhub-project" class="tut-link " title="GraphQL with Next.js — LearnHub Project" data-lesson-title="graphql with next.js — learnhub project">GraphQL with Next.js — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-content-security-policy-learnhub-project" class="tut-link " title="Content Security Policy — LearnHub Project" data-lesson-title="content security policy — learnhub project">Content Security Policy — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-partial-prerendering-learnhub-project" class="tut-link " title="Partial Prerendering — LearnHub Project" data-lesson-title="partial prerendering — learnhub project">Partial Prerendering — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-server-actions-security-learnhub-project" class="tut-link " title="Server Actions Security — LearnHub Project" data-lesson-title="server actions security — learnhub project">Server Actions Security — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-production-checklist-learnhub-project" class="tut-link " title="Production Checklist — LearnHub Project" data-lesson-title="production checklist — learnhub project">Production Checklist — LearnHub Project</a>
<a href="/tutorials/nextjs-tutorial-nextjs-career-roadmap-learnhub-project" class="tut-link " title="Next.js Career Roadmap — LearnHub Project" data-lesson-title="next.js career roadmap — learnhub project">Next.js Career Roadmap — LearnHub Project</a>
</nav>
</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-3 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 tutorials, coding practice, career tools, and certifications. Level up your skills — built for professionals.</p>
<a href="/features" class="btn btn-sm btn-outline-primary mt-2"><i class="fas fa-compass me-1"></i>Explore all features</a>
<div class="social-links mt-3">
<a href="https://www.youtube.com/@toolliyo" target="_blank" rel="noopener noreferrer" title="YouTube" aria-label="YouTube">
<i class="fab fa-youtube"></i>
</a>
<a href="https://www.instagram.com/toolliyo" target="_blank" rel="noopener noreferrer" title="Instagram" aria-label="Instagram">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.facebook.com/people/Toolliyo/61575127572912/" target="_blank" rel="noopener noreferrer" title="Facebook" aria-label="Facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://www.linkedin.com/company/toolliyo-com" target="_blank" rel="noopener noreferrer" title="LinkedIn" aria-label="LinkedIn">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
<div class="col-lg-2 col-md-6">
<h6>Learn</h6>
<ul class="footer-links">
<li><a href="/features">All features</a></li>
<li><a href="/guide">How to use guide</a></li>
<li><a href="/tutorials">Tutorials</a></li>
<li><a href="/roadmaps">Roadmaps</a></li>
<li><a href="/coding-practice">Coding practice</a></li>
<li><a href="/tutorials/interview-qa">Interview Q&A</a></li>
<li><a href="/master-coaches">Master Coaches</a></li>
<li><a href="/videos">YouTube Videos</a></li>
<li><a href="/quizzes">Quizzes</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-6">
<h6>Career & tools</h6>
<ul class="footer-links">
<li><a href="/career">Career hub</a></li>
<li><a href="/career/interview">Mock interview</a></li>
<li><a href="/career/resume-builder">Resume builder</a></li>
<li><a href="/tools/explore">Developer tools</a></li>
<li><a href="/mentor">Mentor</a></li>
<li><a href="/programs">Programs</a></li>
<li><a href="/pricing">Pricing</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-6">
<h6>Community</h6>
<ul class="footer-links">
<li><a href="/blogs">Blog</a></li>
<li><a href="/community">Forum</a></li>
<li><a href="/tech-news">Tech news</a></li>
<li><a href="/about">About</a></li>
<li><a href="/support">Support</a></li>
<li><a href="/compare">Compare platforms</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6">
<h6>Legal & support</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>
<li><a href="/support">Support</a></li>
<li><a href="/help-center">Help Center</a></li>
<li><a href="/feedback">Bug report & feedback</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="w4HyWXgV-9xP7eN0df2ZR39RlTluOrDs1Osg">
<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>