Layouts and Shared UI
Level: Beginner to Intermediate
- Root layout for app-wide structure
- Nested layouts for section-specific UI
- layout.tsx file conventions
- Metadata API for SEO (title, description)
- Head and favicon management
- Shared header, sidebar, footer
- Layout composition patterns
- SMS dashboard shell layout
Why This Matters
Layouts and Shared UI is part of building production React applications with Next.js. You will use it when creating student dashboards, SEO-friendly pages, API-connected forms, route handlers, layouts, and deployments for .NET-backed systems.
Layouts let you share UI across multiple pages. Examples: header, sidebar, footer, dashboard shell, and common metadata.
The Problem
Beginners often treat Next.js like plain React and miss routing, rendering, server/client boundaries, environment variables, and deployment behavior. This lesson shows how Layouts and Shared UI works in a real School Management System frontend that talks to ASP.NET Core APIs.
Root Layout
Every App Router project has a root layout.
import "./globals.css";
export const metadata = {
title: "School Management System",
description: "Next.js frontend for ASP.NET Core Web API"
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<header>
<strong>NexCoding School</strong>
</header>
{children}
</body>
</html>
);
}
children is the current page content.
Dashboard Layout
Create a shared layout for dashboard pages:
app/
dashboard/
layout.jsx
students/
page.jsx
attendance/
page.jsx
import Link from "next/link";
export default function DashboardLayout({ children }) {
return (
<div className="dashboard">
<aside>
<Link href="/dashboard/students">Students</Link>
<Link href="/dashboard/attendance">Attendance</Link>
</aside>
<section>{children}</section>
</div>
);
}
Now both dashboard pages share the sidebar.
Metadata
Pages can export metadata for SEO.
export const metadata = {
title: "Students - School Management System"
};
export default function StudentsPage() {
return <h1>Students</h1>;
}
Next.js makes metadata, server rendering, and static pages easier than a plain React SPA.
Loading UI
Add loading.jsx beside a page to show a loading state.
export default function Loading() {
return <p>Loading students...</p>;
}
Error UI
Add error.jsx for route-level errors. It must be a client component.
"use client";
export default function Error({ error, reset }) {
return (
<div>
<h2>Unable to load students</h2>
<p>{error.message}</p>
<button onClick={reset}>Try again</button>
</div>
);
}
Interview Questions
A layout is shared UI that wraps one or more pages. It is useful for headers, sidebars, footers, and dashboard shells.
children represents the current route content that should render inside the shared layout.
Quick Definitions
- Layouts and Shared UI - The main Next.js concept explained in this lesson.
- App Router - The modern Next.js routing system based on the
appfolder. - Server/Client boundary - The decision of whether code runs on the server or in the browser.
- ASP.NET Core integration - Calling or proxying backend APIs from a Next.js frontend.
Common Mistakes
- Treating every component as a Client Component without a reason
- Forgetting environment variables differ between local and production
- Calling ASP.NET Core APIs from the browser without handling CORS
- Putting secrets in
NEXT_PUBLIC_variables - Skipping
npm run buildbefore deployment
Practice Task
Create a small Next.js example using Layouts and Shared UI. Keep it connected to a School Management System scenario.
Suggested practice:
- Create or update a route, layout, form, or data-fetching example.
- Use realistic student, teacher, attendance, or marks data.
- Connect the example to an ASP.NET Core-style API URL or route handler.
- Add one loading, empty, or error state where relevant.
- Explain what runs on the server and what runs in the browser.
Quick Revision
| Question | Answer |
|---|---|
| What is the main idea? | Use Layouts and Shared UI correctly in a Next.js App Router project. |
| Where is it used? | Pages, layouts, route handlers, forms, APIs, authentication, and deployment. |
| What should beginners watch carefully? | Server/client boundaries, environment variables, CORS, and production builds. |
| What is the best debugging habit? | Check terminal build output, browser console, network tab, and server logs. |
Use ChatGPT, Claude, or Copilot to go deeper on Layouts and Shared UI. Try these prompts:
"Explain Layouts and Shared UI with a Next.js and ASP.NET Core example""Give me 5 practice tasks for Layouts and Shared UI in a School Management app""Show common Next.js mistakes in Layouts and Shared UI and how to fix them""Quiz me on Layouts and Shared UI with interview-style questions"
💡 Tip: After reading this article, paste your own code into AI and ask "What could go wrong here and why?" — fastest way to find edge cases and deepen understanding.