Summary - Next.js basics

Set up a Next.js skeleton with home and about pages.

Summary - Next.js basics

In this group you saw what Next.js is, the App Router, and the page and layout structure. The app/ directory is the route root, page.js page content, layout.js the frame.

Layouts stack; {children} passes to the next level. The root layout must contain <html> and <body>.

Now combine what you learned: write a root layout and a home page.

Exercise Home page and layout

Write RootLayout: destructure { children }, return <html><body>{children}</body></html>, export default RootLayout. Write Home: render <main> with <h1>Welcome to Next.js</h1> and <p>Your first page.</p>, export default Home.

Show example solution

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

// app/page.js
export default function Home() {
  return (
    <main>
      <h1>Welcome to Next.js</h1>
      <p>Your first page.</p>
    </main>
  );
}

Test yourself

Which is NOT a Next.js advantage?
- File-based routing
- SSR and SSG support
- Server Components
- Being a database server
Show answer

Being a database server — Next.js is not a database server.

Root layout required tags

export default function RootLayout({ children }) {
  return (
    <____>
      <body>{children}</body>
    </html>
  );
}

Show answer

export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

Next lesson: What is SSR?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies