Nextjs
Published in

Nextjs

NextJs

How to build a layout in nextjs

This article is full details article, how are layouting works and how it uses in nextjs. This article is part of next.js #SeriesPart10.

build a layout in nextjs By Rajdeep Singh
Build a layout in nextjs

Nextjs provide lots of functionality for developers. Next.js help to build layout very quickly.

In reactjs, we build a layout with the higher-order components. But in nextjs, we create a layout very quickly with a custom app.

For example, I build a layout for a blog website. The layout looks like in next.js.

Home page
Read page

Demo

Check out the project demo and code on codesandbox online ide run in your browser.

Open code in codesandbox Ide

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:-

  1. Navigating
  2. Error handling
  3. Pass additional data to page
  4. 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.js app 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.

It is a preview of the project. if check code, then click open sandbox button

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

Rajdeep singh

525 Followers

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Writer || https://officialrajdeepsingh.dev/