Build the Multiple layouts based website with nextjs

NextJs + Multiple layouts

How to build Multiple layouts-based websites with nextjs?

Understanding the Multiple ( Nested) layouts and how it works with the Next 13 app folder.

The layout is an essential step in building a website. Nextjs provide a _app.js file to help to create a layout for your website. For multiple layouts, what I’m doing with nextjs?

I know multiple layouts are significant for large-scale websites. Nextjs help to build a multiple-layout website very quickly. You do not need config lots of stuff. You change in one file; that is the _app.jsfile.

To enable multiple layouts, you need a getLayout function. Which is help you to enable the Multiple layouts functionality in nextjs.

All the code is available on GitHub, and check out the live demo.

Note

App folder is the future for nextjs, and My recommendation focuses on the upcoming article, in which I will teach you how to use multiple layouts with an app folder.

Step

1. Configuration of the multiple layouts
2. How to use it

Configuration of the multiple layouts

Configuration of the multiple layouts is just a copy-paste code. The configuration change is based on typescript and javascript. We check the getLayout property (function) is attached or not.

In simple words, The<Component {…pageProps}/> is warp with the getLayout component. Because the getLayout property accepts a react component.

For JavaScript, multiple layouts configuration looks like this.

// pages/_app.js

export default function MyApp({ Component, pageProps }) {

  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout || ((page) => page)

  return getLayout(<Component {...pageProps} />)
}

For TypeScript, multiple layouts configuration looks like this.

import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import type { ReactElement, ReactNode } from 'react'
import type { NextPage } from 'next'

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode
}

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout
}

export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout ?? ((page) => page)

  return getLayout(<Component {...pageProps} />)
}

How to use it

In the single layout time, we wrap our <Component {…pageProps}/> with the Layout component. It works fine for a single layout system.

// pages/_app.js

// Old ways
import Layout from '../components/layout'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

With multiple layouts in your nextjs app, you add the getLayout property and define your layout logic within the current router, the react component. You do not need to export the getLayout .

Page.getLayout = function getLayout(page: ReactElement) {
  return (
    <Layout>
       {page}
    </Layout>
  )
}

The basically getLayout is react function component. Where you define or warp the layout component for a specific path. It does not affect any other path.

I design two layouts for my nextjs app for demo purposes.

1. Basic layout
2. Reading Layout

Basic layout

Basis layout

Basis layout is the most common layout for applications. It adds the Header and Footer components.

// components/Layout.tsx

import React from 'react';
import Footer from './Footer';
import Header from './Header';

function Layout({ children }: any) {
    return (
        <>
            <Header />
            {children}
            <Footer />
        </>
    );
}

export default Layout;

You can use basic layout to warp your layout component with the help of the getLayout function.

// pages/index.tsx

import type { ReactElement } from 'react'
import Layout from '@/components/Layout'
import PostCard from '@/components/Post-card';

const Page = () => {
  return <>
    <PostCard />
    <PostCard />
    <PostCard />
  </>
}

Page.getLayout = function getLayout(page: ReactElement) {
  return (
    <Layout>
       {page}
    </Layout>
  )
}


export default Page

The getLayout component effect the same path. For example, using getLayout in the index file does not affect the about or contact path.

Reading Layout

Reading Layout

The Reading layout is designed for the reading page. I add the ReadingHeader and Footer components.

import React from 'react';
import Footer from './Footer';
import ReadingHeader from '@/components/ReadingHeader';

function ReadingLayout({ children }: any) {
    return (
        <div>
            <ReadingHeader />
              {children}
            <Footer />
        </div>
    );
}

export default ReadingLayout;

You can use reading layout to warp your layout component with the help of the getLayout function.

import React from 'react';
import type { ReactElement } from 'react'

// design a layout for reading page
import ReadingLayout from '@/components/ReadingLayout';

function read() {
    return ( 
          
           <article className="format dark:format-invert mt-16 mx-auto">

                <h1>Understand The Android Features Before You Regret.</h1>
                <p className="lead">Lorem excepteur dolore ex veniam ad velit officia enim velit consequat consequat nulla eiusmod</p>
                <time className="mt-2" >
                    November 8th, 2022
                </time>

                <p>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, omnis accusantium! Hic ipsa repudiandae, quibusdam autem dolor earum labore vero voluptatem! Quaerat aliquam pariatur ex cumque sint quas ad rerum.
                </p>
                <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores quae culpa corporis quia ipsa saepe magni recusandae nihil impedit assumenda? Porro veniam consequatur adipisci, iure delectus cupiditate illo voluptate magni error aliquid vitae repudiandae, eligendi itaque, id explicabo corporis! Iusto vel minima, quam adipisci corporis incidunt. Saepe animi eaque natus vel provident velit autem officiis tenetur, eos fugit neque quia at ut odit iusto ea explicabo, totam blanditiis. Cum suscipit corporis in quae vel possimus eaque dolorum necessitatibus amet alias corrupti id, perspiciatis laudantium, numquam, iure fugiat. Laudantium rem id ipsam? Ipsa earum mollitia enim corporis pariatur repellendus magni numquam.</p>

                <p>Before going digital, you might benefit from scribbling down some ideas in a sketchbook. This way, you can think things through before committing to an actual design project.</p>
                <p>But then I found a <a href="#">component library based on Tailwind CSS called Flowbite</a>. It comes with the most commonly used UI components, such as buttons, navigation bars, cards, form elements, and more which are conveniently built with the utility classes from Tailwind CSS.</p>

            </article>

    );
}

export default read;

read.getLayout = function getLayout(page: ReactElement) {
    return (
        <ReadingLayout>
            {page}
        </ReadingLayout>
    )
}

FAQ

Do multiple layouts increase the bundle size?

Yes, it increases the bundle size; if you avoid that, you can combine Multiple layout functionality with the dynamic import.

What is the future of getLayout?

In the future release, getLayout will be deprecated, and you can find more focus on the nextjs APP folder.

Conclusion

The current article is a base that teaches you How multiple layout work with nextjs. In the following article, I teach you how multiple layout work with the nextjs app folder.

If you are interested in how multiple layout work with the app folder, please follow me and join the email list so that you can receive the email notification in your inbox.

You can share and follow us on Twitter and Linkedin. If you like my work, please read more content on the officialrajdeepsingh.dev, Nextjs, front-end web, and Sign up for a free newsletter.