Mahamudul Hasan Rubel
Back to Blog
Lesson 4 of the Next.js: Build Full-Stack Apps with the App Router course
Next.jsJuly 15, 20264 min read

Building the Root Layout: Metadata, Fonts, and HTML in Next.js

Master the Next.js root layout. Learn how to define global metadata, optimize font loading, and structure a clean HTML skeleton for your blog project.

Next.jsWeb DevelopmentSEOFrontendLayouts

Previously in this course, we explored the App Router architecture to map files to routes. Now that you understand how folders define your URL structure, it’s time to build the foundation that wraps every page in your application: the Root Layout.

The root layout is the top-level wrapper for your entire site. It is the only place where you define the mandatory <html> and <body> tags. By mastering this file, you ensure a consistent look, feel, and SEO profile across your entire blog.

Structuring the HTML Skeleton

In the App Router, the app/layout.js file is a special component that persists across route transitions. Unlike standard React components that might unmount when you navigate, the root layout stays active, allowing you to maintain state (like a navigation bar or footer) without re-rendering.

To structure your HTML, you must define the RootLayout component. It receives a children prop, which represents the specific page being rendered.

JAVASCRIPT
// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <main>{children}</main>
      </body>
    </html>
  );
}

This simple structure is the backbone of every page in your project. If you need a global navigation bar or a site-wide footer, you would place those components directly inside the <body> tag here.

Managing Font Loading with next/font

Detailed view of different font styles printed on paper, showcasing typography.

Performance is a key concern for any blog. Loading fonts can cause "Layout Shift," where your text suddenly jumps as a new font file finishes downloading. Next.js solves this with the next/font module, which automatically optimizes fonts and removes external network requests for better privacy and speed.

To add a font, import it from next/font/google and apply its class to your <body> tag:

JAVASCRIPT
import { Inter } from CE9178">'next/font/google';

const inter = Inter({ subsets: [CE9178">'latin'] });

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

By applying inter.className to the <html> or <body> tag, you ensure the font is applied consistently site-wide without needing to write custom CSS @font-face rules.

Defining Global Metadata

Metadata is essential for SEO. While you can define metadata on individual pages, the root layout is where you set the "fallback" or global configuration for your site. This includes your site title, description, and Open Graph images for social media sharing.

You define this using a simple metadata object exported from your layout file:

JAVASCRIPT
export const metadata = {
  title: CE9178">'My Awesome Blog',
  description: CE9178">'A place where I share my thoughts on web development.',
};

When a user visits your site, the browser uses these values to populate the <title> and <meta name="description"> tags in the document <head>.

Worked Example: The Complete Root Layout

Let’s combine these concepts into a production-ready app/layout.js for our blog project.

JAVASCRIPT
import { Inter } from CE9178">'next/font/google';

const inter = Inter({ subsets: [CE9178">'latin'] });

export const metadata = {
  title: {
    default: CE9178">'My Tech Blog',
    template: CE9178">'%s | My Tech Blog',
  },
  description: CE9178">'Building the future with Next.js.',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>
        <header>
          <nav>My Blog Nav</nav>
        </header>
        <main>{children}</main>
        <footer>© 2023 My Tech Blog</footer>
      </body>
    </html>
  );
}

Using title.template allows you to dynamically append the page name to your site title (e.g., "About | My Tech Blog"), which is a best practice for SEO.

Hands-on Exercise

  1. Open your project from Setting Up Your First Next.js Project.
  2. Locate app/layout.js.
  3. Add a different Google Font (e.g., Roboto or Poppins) using next/font/google.
  4. Update the metadata object to include your own name or blog title.
  5. Wrap the {children} in a <div> with a max-width style to ensure the content doesn't stretch too wide on desktop screens.

Common Pitfalls

  • Forgetting the lang attribute: Always include lang="en" (or your target language) on the <html> tag. It is a requirement for accessibility and SEO.
  • Over-nesting: Keep your layout.js clean. If your layout becomes hundreds of lines long, move your header and footer into separate components—much like you learned when Creating Static Components.
  • Metadata conflicts: Remember that metadata defined in a specific page.js will override the metadata defined in the layout.js. Use the layout for broad defaults only.

FAQ

Can I have multiple root layouts? No. The app/layout.js is the absolute root. You can have nested layouts for specific route segments, but there is only one root layout for the entire application.

Do I need to import CSS files? Yes. You should import your global CSS file (usually globals.css) at the top of your root layout.

Why does my font look different? Ensure you are applying the font class to the <body> or <html> tag. If the class is applied to a deep child, the font might not inherit correctly.

Recap

You’ve successfully structured the foundation of your blog. By setting up the root layout, you’ve unified your metadata, optimized your typography, and created a consistent HTML shell. This setup ensures that your blog is performant, SEO-friendly, and easy to maintain as you add more pages.

Up next: Styling with Tailwind CSS — we’ll transform this skeleton into a beautiful, responsive interface.

Back to Blog

Similar Posts

Detailed view of a sturdy black metal chain outdoors on a blurred background.
Next.jsJuly 25, 20263 min read

Implementing Navigation with the Next.js Link Component

Learn how to implement client-side navigation in Next.js using the Link component. Master active links and build a professional navigation bar for your blog.

Read more
A minimalist image of keyboard keys spelling 'BLOG' on a coral background.
Next.jsJuly 17, 20264 min read

Creating the Blog Homepage: A Practical Guide with Tailwind

Learn how to build a professional blog homepage in Next.js. We'll cover routing, rendering static data, and structuring your UI with Tailwind CSS.

Read more
Next.jsJuly 4, 20264 min read

Next.js generateMetadata: Dynamic SEO for App Router

Master next.js generatemetadata to handle dynamic SEO tags in the App Router. Learn how to fetch server-side data for optimized, crawler-friendly pages.

Read more