Project
# Layout
Layouts are used to share content across whole routes.
It means that all HTML elements and components defined in the layouts are visible across the routes and, most important, not "refreshed" when routes changes.
Nested Routes/Layout
It is possible to create children routes and layouts but we won't talk about these topics in this workshop:
For example we can create a new route
/shop/deals simply creating a new page.tsx file in shop/deals/page.tsx:
More info about nested routes and nested layouts
Anyway we use the root layout to share a navigation bar and a footer across all pages:
/app/layout.tsx
This is the preview of the application while the user is navigating the
/shop route:
# Navigation Bar
Create the new component to represents the Navigation Bar.
It will replace the
NavBar here label we added in the layout in the previous step.The first version we build use anchors
<a> but how soon you’ll understand is not the best approach:/components/widgets/navbar.tsx
We can now use the NavBar in the
layout.tsx file:
/app/layout.tsx
state is lost!
Using this approach we lose the application state and the "soft navigation", since we have an hard refresh every time a link is clicked
Add an
input text and run the application (npm run dev).Type something into the
input and change route clicking one of the buttons./components/widgets/navbar.tsx
Result
You'll see that the input content is lost every time the route changes:
# The Link component
To fix the problem we can use the
Link component instead, provided by NextJS:/components/widgets/navbar.tsx
We now create the main navigation bar.
You can copy-paste the following code and replace all the current content of
navbar.tsx.There are new concepts here.
We just copied a template from DaisyUI website and applied the
<Link> component to some buttons/anchors/components/widgets/navbar.tsx
# Footer
Create the footer bar
/components/widgets/footerbar.tsx
Use Navbar e Footerbar in
layout.tsxWe have also updated page
metadata and added a div element that act as a wrapper with some Tailwind classes used to center the content and avoid it takes the 100% of the viewport width/app/layout.tsx
Result:
New
Membership Plan, italian only!
Accedi a TUTTI I CORSI PREMIUM ad un unico prezzo!
