Abstract
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 css 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 route 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.
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.
| Component | Declaired in |
|---|---|
| Introduction | page.tsx |
| Navigation | layout.tsx |
| Content | page.tsx |
| Footer | layout.tsx |
Vanilla HTML
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:
Example Code
<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>Example Code
There are a couple things to take away from the example;
- First we declare the style of the ordered list to be a flexbox with the flex-direction to be a column.
- Then (this step is not required), we declare all of the child div elements to have color, font size, and margins to make our example look neater.
- Finally, we set the order of the list in each div inline style. As we can see in the code we declared Bread first and Eggs second, though Eggs show up first in the list since we set the order for the Eggs to be the first (1).
NextJS Example
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, 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.Example NextJS Code
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>
</>
);
}.main {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 6rem;
min-height: 100vh;
}
.description {
display: inherit;
justify-content: inherit;
align-items: inherit;
font-size: 0.85rem;
max-width: var(--max-width);
width: 100%;
z-index: 2;
font-family: var(--font-mono);
}
/* Remaining CSS rules... */import "./globals.css";
import styles from "./layout.module.css";
import Link from "next/link";
const baseUrl = "http://localhost:3000/etc/nextjs-flexbox-ordered-layout-example";
export default async function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<div className={styles.navigation}>
<Link href={`${baseUrl}/`}>Index</Link>
<Link href={`${baseUrl}/about`}>About</Link>
<Link href={`${baseUrl}/contact`}>Contact</Link>
</div>
<div className={styles.footer}>
This is a footer! Super secret text down here!
</div>
{children}
</body>
</html>
);
}.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;
}
/* Remaining CSS rules... */import stylesLayout from "../layout.module.css";
export default function BlogsNextjs13OrderedLayoutsExample2Contact() {
return (
<>
<div className={stylesLayout.title}>
About this site
</div>
<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 BlogsNextjs13OrderedLayoutsExample2Index() {
return (
<>
<div className={stylesLayout.title}>
Title: Index page!
</div>
<div className={stylesLayout.content}>
This is the index page, Hello World!
</div>
</>
);
}Example NextJS Code