Menu Component in NextJS
In the next tutorials, we will study the special features of NextJS for creating a site menu. For this, we will need a component with the site menu. In this tutorial, we will make a template of this component, and we will insert the links in the next tutorials.
Our template will look as follows:
export default function Menu() {
return <>
...
</>;
}
Let's insert this template into the main site layout:
import Menu from '@/comps/menu/menu.jsx';
export default function RootLayout({children}) {
return (
<html lang="en">
<body>
<header>
<nav>
<Menu />
</nav>
</header>
<main>
{children}
</main>
<footer>
footer
</footer>
</body>
</html>
);
}
Create a component for the main menu.