Layouts in Next.JS

As a aweb developer, I always come accross a fix pattern where I have to create and setup layouts, for the complete website, and even have to define, which pages will not have layouts, or setting up multiple layouts. In this article, I will share everything I know about layouts, and how to create it.

What is Layout in website development ?

Layouts could be anything in your website, which you want to show in every page, and dont want to render, with every page change. For example, "Top Navbar", "SideBar", "Footer" etc. It could be anything.

Layouts in Next.JS

Next.js allow you to Create and define layouts and set it up for every page.

// components/Layout.tsx

import Sidebar from "./Sidebar";

export default function Layout({ children }: any) {
  return (
    <>
      <div className="w-screen h-screen flex">
        <div className="w-[28%] border h-full">Sidebar</div>
        <main className="w-[82%] bg-[#F3F3F3] pt-6 pl-4 h-full">
          {children}
        </main>
      </div>
    </>
  );
}

The above code is your layout component, which now will be used to wrap around the component.

// pages/_app.tsx

import "../styles/globals.css";
import type { AppProps } from "next/app";
import Layout from "../components/Layout/Layout";
import { useRouter } from "next/router";

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();

  return (
    <>
        <Layout>
          <Component {...pageProps} />
        </Layout>
    </>
  );
}

export default MyApp;

With the above code, you are able to wrap up the layout around the components, which lets your layout be visible in every page.

But, now the question is, that how could you stop the layout to be rendered in some specific pages, like in register page, or signIn pages etc.

Limiting the range of layouts

For limiting the range of layouts, you have to define that in which page, you dont want layouts to be appeared, and then we will use "useRouter" and ternary operator to set up the range.

// pages/_app.tsx

import "../styles/globals.css";
import type { AppProps } from "next/app";
import Layout from "../components/Layout/Layout";
import { useRouter } from "next/router";

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();
  const withOutLayouts = ["/auth/signin", "/auth/register"];

  return (
    <>
      {withOutLayouts?.includes(router.pathname) ? (
        <Component {...pageProps} />
      ) : (
        <Layout>
          <Component {...pageProps} />
        </Layout>
      )}
    </>
  );
}

export default MyApp;

In the above code, withOutLayouts is the pathname of the pages, in which we don't want to render layouts.

---

I hope you love the article, and it helps to apply the same in your project.

Please like this article, give your feedback and share it, if it helps you.