Projects
Loading...The webpage is currently loading, please wait...
When looking into the new NextJS (app) layout format, its important to look at all the different ways to format your website. One effective approach to intertwining elements within page.tsx and layout.tsx using flex and order properties. This method significantly reduces the amount of client-side code required for memorizing and caching props, especially since props in layout.tsx remain static and do not update upon page changes.
For example (this website), you want a dynamic Title/Introduction component on your website in page.tsx, then you want to statically declaring the Navigation component in layout.tsx, dynamically assigning the Content component based on page.tsx, and once again statically declaring the Footer component in layout.tsx, you can achieve a streamlined and efficient website structure while minimizing how much page and layout data gets sent to the user-end.
In this blog post, we will delve into a method that organizes page.tsx and layout.tsx elements and components cohesively, employing CSS flex and order properties to optimize your website's layout and enhance user experience.
Introduction | page.tsx |
Navigation | layout.tsx |
Content | page.tsx |
Footer | layout.tsx |
According to the Mozilla Developer, "The order CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order."
Lets look at an example in vanila HTML:
<html lang="en">
<head>
<title>Groceries List Example</title>
<style>
body {
color: white; /* Set default text color to white */
background-color: black; /* Set the webpage background to black */
}
.ordered-list {
display: flex; /* Set the display to flex */
flex-direction: column; /* Set the flex display to column; positioned the elements vertically in a column, allowing content to flow from top to bottom. */
}
.ordered-list div {
font-family: Arial, sans-serif; /* Set the font family */
font-size: 18px; /* Set the font size */
color: blanchedalmond; /* Set the color of the text */
margin-bottom: 10px; /* Adds space between items */
}
</style>
</head>
<body>
<h1>Top 5 Cities to Visit</h1>
<div class="ordered-list">
<div style="order: 3;">Bread</div>
<div style="order: 1;">Eggs</div>
<div style="order: 5;">Coffee</div>
<div style="order: 2;">Cereal</div>
<div style="order: 4;">Potatoes</div>
</div>
</body>
</html>
There are a couple things to take away from the example;
In order to seperate the content from the layout and form the page, we need to identify what we want as a "static" element (ie content that isnt page dependent) and elements that are "dynamic (ie content that is page dependent).
Element | Type | File |
Title | Dynamic | page.tsx |
Navigation | Static | layout.tsx |
Content | Dynamic | page.tsx |
Footer | Static | layout.tsx |
With the elements we want defined, we can start creating the stylesheet for our NextJS web page. We can set the body's display to flex with the direction to the column. Then we can set each element's order to whatever we want. Lets create the needed style code snippets:
body {
display: flex;
flex-direction: column;
background-color: white;
padding-left: 20%;
padding-right: 20%;
}
.title {
order: 1;
text-align: center;
}
.navigation {
order: 2;
display: flex;
justify-content: space-between;
}
.content {
order: 3;
}
.footer {
order: 4;
text-align: center;
}
Taking these code snippets we can create a new NextJS project and create a propper website. We can seperate the body code into globals.css, and all of the .title, .navigation, .content, etc. styles into layout.module.css and the body code in globals.css to reference the styles globally.
body {
display: flex;
flex-direction: column;
background-color: white;
padding-left: 20%;
padding-right: 20%;
}
.title {
order: 1;
text-align: center;
}
.navigation {
order: 2;
display: flex;
justify-content: space-between;
}
.content {
order: 3;
}
.footer {
order: 4;
text-align: center;
}
In the final example, we have created a NextJS 13 project with all of the code snippets in their propper files. We also have a live published demo to the right hand side, as well as all of the app/ files. Click on one of the files in the drop down menu or on the list to view the code.
globals.css |
layout.module.css |
layout.tsx |
page.tsx |
about / page.tsx |
contact / page.tsx |
Thats about it, you can find the full project at https://github.com/M4cgyver/NextJS-13-Flexbox-and-Order/.
body {
display: flex;
flex-direction: column;
background-color: white;
padding-left:10%;
padding-right: 10%;
}
.title {
order: 1;
font-weight: bold;
background-color: rgba(40, 156, 17, 0.452);
padding: 4px;
margin-bottom: 6px;
text-align: center;
}
.navigation {
order: 2;
display: flex;
justify-content: space-evenly;
background-color: rgba(156, 108, 17, 0.452);
margin-bottom: 12px;
}
.content {
order: 3;
background-color: rgba(40, 156, 17, 0.452);
margin-bottom: 8px;
text-align: center;
}
.footer {
order: 4;
font-size: 8px;
text-align: center;
background-color: rgba(156, 108, 17, 0.452);
}
import "./globals.css"
import styles from "./layout.module.css"
import Link from "next/link";
/*The main root layout*/
export default async function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
{ /* The navigation element for the layout */ }
<div className={styles.navigation}>
<Link href="/blogs/nextjs13-ordered-layout/exercise-2/">Index</Link>
<Link href="/blogs/nextjs13-ordered-layout/exercise-2/about">About</Link>
<Link href="/blogs/nextjs13-ordered-layout/exercise-2/contact">Contact</Link>
</div>
{ /* The footer element for the layout */ }
<div className={styles.footer}>
This is a footer! Super secret text down here!
</div>
{children}
</body>
</html>
)
}
import stylesLayout from "./layout.module.css"
export default function BlogsNextjs13OrderedLayoutsExample2Index() {
return <>
{/*The title element for the page*/}
<div className={stylesLayout.title}>
Title: Index page!
</div>
{/*The content for the page*/}
<div className={stylesLayout.content}>
This is the index page, Hello World!
</div>
</>
}
import stylesLayout from "../layout.module.css"
export default function BlogsNextjs13OrderedLayoutsExample2Contact() {
return <>
{/*The title element for the page*/}
<div className={stylesLayout.title}>
About this site
</div>
{/*The content for the page*/}
<div className={stylesLayout.content}>
This is an example site for flexbox and order in NextJS 13.
</div>
</>
}
import stylesLayout from "../layout.module.css"
export default function BlogsNextjs13OrderedLayoutsExample2Contact() {
return <>
{/*The title element for the page*/}
<div className={stylesLayout.title}>
Contact Us!
</div>
{/*The content for the page*/}
<div className={stylesLayout.content}>
I live at 3828 Piermont Dr, Albuquerque, NM. <br/><br/>
Pull up
</div>
</>
}
Hi
any and all criticism is welcome!
123