NextJs
How to build a layout in nextjs
This article is full of details article how layouting works and how it uses in nextjs. This article is part of next.js #SeriesPart10.
Nextjs provide lots of functionality for developers. Next.js help to build a layout very quickly.
In reactjs, we build a layout with the higher-order components. But in nextjs, we quickly create a layout with a custom app.
For example, I build a layout for a blog website. The layout looks like in next.js.
Demo
Check out the project demo and code on codesandbox online ide run in your browser.
Why do we need layouting in nextjs?
The layout function helps build website layout and secondly organized code on one component in reactjs or nextjs.
Suppose you build a blog website with five pages. You import header, footer and another component on five pages, and suddenly something changes or add props in the component. Now you add props on five pages. At that time, layout functionality help to reduce code complexity and structure your code in one component.
How to add layout functionality in nextjs?
Nextjs Layout functionality help to organize code on one component. Nextjs provide a custom app component. Custom app component renders on every page. When page routes hit new routes, the custom app component renders and afterload another component on-page.
Custom _app.js in nextjs
Custom app component is high order component like reactjs higher-order component. but Nextjs custom _app.js the component provides lots of functionally for developers likes:-
- Navigating
- Error handling
- Pass additional data to page
- Add global CSS support.
You create the nextjs app help of create-next-app the npm command. npm create-next-app automatically set up your custom _app.js file in nextjs.
If you download separately now to create _app.js file in the pages folder and paste the following code.
// paste code in nextjs pages/_app.jsexport default function MyApp({ Component, pageProps }) {
return (
<Component {...pageProps} />
)
}How to Add layout In nextjs?
You build a layout using the custom app in nextjs. The custom app is a high order component.
- Firstly import the Header, Footer, Sidebar and Main component in the layout component.
// import custom components
import Footer from "./Footer";
import Header from "./Header";
import SideBar from "./Sidebar";export default function Layout({ children }) {// styles the main html tag
const styles = {
display: "flex",
flexDirection: "row"
};return (
<>
<Header />
<main style={styles}>
<section style={{ width: "1024px" }}>{children}</section>
<SideBar />
</main>
<Footer />
</>);}- Secondly, we import layout components in the custom
_app.jsapp and wrap the existing component with the layout component.
// import global css
import "../styles/globals.css";// import layout components form components folder
import Layout from "../Components/Layout";export default function MyApp({ Component, pageProps }) {return ( <Layout>
<Component {...pageProps} />;
</Layout>);}Wrong ways to add Layouting in nextjs
Suppose you use layout component inside pages folder and custom app file. After wrapping a pages folder, routes in the layout component. You see the Header, Footer and Sidebar show two times in browse UI. But you do not see any error in next.js.
import Head from "next/head";
import styles from "../styles/About.module.css";// wrong ways to use layout component in pages folderimport Layout from "../Components/Layout";export default function About() {
return (<>
<Head>
<title>About page</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2? family=Montserrat:wght@200;400&display=swap" rel="stylesheet" /></Head>{/* Layout wayper in nextjs */} <Layout>
<div className={styles.container}>
<main className={styles.main}>
<div className={styles.grid}>
<h1 className={styles.title}> About page </h1>
<p className={styles.paragraf}> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</main>
</div>
</Layout>
</>
);
Note
In this, Nextjs does not show any errors in the terminal. It is a developer mistake, not nextjs. reactjs show all components whatever place you define a component.
Demo
Check out the project demo and code on codesandbox online ide run in your browser.
Previous Articles
References
Conclusion
I hope you understand the basic concept of layouting. layouting is not an official term. I build it because I guide you properly, so I create layouting word.
Read More content at Nextjs. Sign up for a free newsletter and join the nextjs community on medium.