Summary - Next.js basics
- React course
- Advanced
- Lesson 4/56
- 5 min
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.
Practice 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.
Starter code
// app/layout.js ve app/page.js
// RootLayout ve Home buraya yazSample 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>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which is NOT a Next.js advantage?
- File-based routing
- SSR and SSG support
- Server Components
- Being a database server Correct answer
Explanation: Next.js is not a database server.
2 Root layout required tags
export default function RootLayout({ children }) {
return (
<____>
<body>{children}</body>
</html>
);
}export default function RootLayout({ children }) {
return (
<html>
<body>{children}</body>
</html>
);
}Explanation: html and body are required in the root layout.