Step 1: The Shell
Part of the Next.js Essentials section of Coddy's React journey — lesson 39 of 47.
Challenge
EasyBuild the shell in app/layout.jsx.
- Import
./globals.cssandLinkfromnext/link. - Export
metadatawith atitleobject:defaultofCoddy Eatsandtemplateof%s | Coddy Eats. - Inside
<body>, add a<nav className="nav">holding three links:className="brand"to/readingCoddy Eats,id="nav-menu"to/readingMenu, andid="nav-desserts"to/?category=dessertreadingDesserts. - Below the nav, wrap
{children}in a<div className="container">.
Try it yourself
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}