Skip to content

NextJS Layouts - added general header and footer in the Layout.tsx. #141

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
arvish-codal merged 1 commit into from
Jun 22, 2024
Merged

NextJS Layouts - added general header and footer in the Layout.tsx. #141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions NOTES/NextJs-Notes.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,3 +129,32 @@ Private Folders :-

- Therefore, (auth) serves as a folder to help organize our code. However, we can have multiple levels of nested route groups if needed.


LAYOUTS :-
-----------

A page is UI that is unique to a route. A layout is UI that is shared between multiple pages in the app.

When building apps, it is common to have a consistent layout across different pages such as a header at the top and a footer at the bottom.
With the introduction of the layouts, achieving this becomes much easier in NextJS.


How do we create Layouts ?
---------------------------

You can define a layout by default exporting a React component from a `layout.js` or `layout.tsx` file.
That component should accept a children prop that'll be populated with a child page during rendering.

The file `Layout.tsx` in the app folder (i.e in the `hello-world` project) serves as the topmost layout and is referred to as the
root layout. The root layout is a mandatory layout for every NextJS application.

Every Layout component should accept a children prop that'll be replaced by a child component during rendering.
In `hello-world` project, the `page.tsx` in the app folder will replace the children prop when the layout is rendered in the browser.
The children prop here represents our `Home` component defined in `page.tsx` file.

Hence by defining a single `layout.tsx` file in the app folder, we can create a consistent layout for every page in our application.
- For `localhost:3000`, the JSX for `page.tsx` within the app folder gets rendered.
- When we do `localhost:3000/about`, the JSX for page.tsx in the about folder gets rendered.
- Similarly, when we do `localhost:3000/profile`, the JSX for page.tsx in the profile folder gets rendered.

The Layout component renders the children prop for `page.tsx` to render a unique UI corresponding to the route.
20 changes: 19 additions & 1 deletion NextJS/hello-world/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,25 @@ export default function RootLayout({
}>) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
<body>
<header
style = {{
backgroundColor: "lightblue",
padding: "1rem",
}}
>
<p>Header</p>
</header>
{children}
<footer
style={{
backgroundColor: "ghostwhite",
padding: "1rem",
}}
>
<p>Footer</p>
</footer>
</body>
</html>
);
}