iDevMeet

Next.js · module 3 of 16

Layouts & Assets

// app/layout.jsx — Root layout (required)

Course map

What this module covers

4 steps · Next.js

  1. Step 1. Layouts & Assets

    // app/layout.jsx — Root layout (required) export const metadata = { title: 'My App' }; export default function RootLayout({ children }) { return ( <html><body> <Navbar /> {children} <Footer /> </body></html> ); } Layouts persist between navigations — they don't unmount, so a search input or a sidebar's open state survives as the user moves between pages. next/image auto-optimizes: resizing, compression, WebP conversion, lazy loading. import Image from 'next/image'; <Image src="/hero.jpg" alt="Hero" width={1200} height={600} priority /> Metadata API — export per-page metadata instead of a <Head> component: export const metadata = { title: 'Blog | My Site', description: 'Latest articles', openGraph: { images: ['/og.png'] } };

    The explicit width/height aren't just for display sizing — Next.js uses them to prevent layout shift while the real image is still loading. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [Next.js] Does Hero use next/image with alt text and explicit dimensions?

  2. Step 2. Quiz: Layouts & Assets

    Answer these questions about layouts, next/image, and metadata.

    Layouts persist across navigations without remounting; next/image runs a full optimization pipeline; metadata is exported per page/layout. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [Next.js] Answer the quiz below.

  3. Step 3. Dashboard Layout with Sidebar

    Create a nested layout for a /dashboard section that includes a persistent sidebar, so pages inside /dashboard automatically inherit it.

    Placing this file at app/dashboard/layout.jsx means every route under /dashboard automatically gets the sidebar for free — no need to import it into each page individually. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [Next.js] Does DashboardLayout render a sidebar alongside {children}?

  4. Step 4. Mini project: Layouts & Assets

    Create a nested layout for a /dashboard section that includes a persistent sidebar, so pages inside /dashboard automatically inherit it. Turn the completed challenge into a small standalone project. Add realistic content, clear naming, one edge case or error state, and a short README-style explanation of how the main idea works.

    Placing this file at app/dashboard/layout.jsx means every route under /dashboard automatically gets the sidebar for free — no need to import it into each page individually. This project stage asks you to apply the same idea without step-by-step scaffolding. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [Next.js] Does DashboardLayout render a sidebar alongside {children}?

Loading code lab...