27

How to not wrap a specific page with Layout component in _app.js?

For example, I have two pages as pages/home and pages/about, now how can I not wrap my pages/home page with Layout component?

pages/_app.js

import "../styles/globals.css";
import Layout from "../components/Layout";

function MyApp({ Component, pageProps }) {

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

export default MyApp;

What I have tried:

pages/_app.js

function MyApp({ Component, pageProps }) {
  console.log(typeof Component); // gives me a function

  switch (Component) {
    case Home():
      return <Component {...pageProps} />;
    default:
      return (
        <Layout>
          <Component {...pageProps} />{" "}
        </Layout>
      );
  }
}

pages/home.js

import React from 'react';
 
const Home= () => {
  return (<div>Hello</div>);
};
 
export default Home;
4
  • SO you want to render Home without Layout. and all other components except Home will be wrapped by Layout. right? Apr 2, 2021 at 5:36
  • Yup, I'm using Next.js BTW. Apr 2, 2021 at 5:37
  • Okok. can you please share the code where MyApp function is being called? Apr 2, 2021 at 5:38
  • 1
    it's called implicitly by Next.js from _app.js. But I think, I got it, that I have to use switch (Component.name) { } Apr 2, 2021 at 5:41

8 Answers 8

32

by checking the appProps.router.pathname property passed to it.

way 1

function MyApp({ Component, pageProps, ...appProps }: AppProps) {

  // make function that will return the children based on router.pathname

  const getContent = () => {
    // array of all the paths that doesn't need layout
    if ([`/dashboard`].includes(appProps.router.pathname))
      return <Component {...pageProps} />;

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

  return <ApplicationWrapper>{getContent()}</ApplicationWrapper>;
}

way 2

function MyApp({ Component, pageProps, ...appProps }: AppProps) {

    // use a LayoutComponent variable 
   // that switches to actual Layout or React.Fragment (no layout) 
   //accordingly to pathname


    const isLayoutNeeded = [`/dashboard`].includes(appProps.router.pathname);

    const LayoutComponent = isLayoutNeeded ? Layout : React.Fragment;

    


  return (<ApplicationWrapper> 
    <LayoutComponent>
        <Component />
    </LayoutCompnent>
    </ApplicationWrapper>);
}

TIP:

you can use path.startsWith to check all the paths, example

if(router.pathname.startsWith(`/dashboard`))
3
  • In development mode "Component.name" gets name but when I create build the value is empty for "Component.name". Any idea why this is happening?
    – Gurveer
    Sep 22, 2021 at 20:54
  • Maybe try adding a check for route name instead? Oct 4, 2021 at 5:10
  • 1
    @Gurveer try adding displayName instead like i specified in my answer below. it works with React, too :) Oct 6, 2021 at 7:41
22

I think there is cleaner way of doing this with Per-Page Layouts. I'm currently doing this simple by creating a default layout for all pages and override it for the pages that require specific layout, for example in my login and registration pages.

    export default function LoginPage() {
      return {
        /** Some JSX */
      }
    }
    // Return the page without additional layout.
    LoginPage.getLayout = (page) => page

    export default function MyApp({ Component, pageProps }) {
      // Use the specified page layout or fallback to the default one.
      const getLayout = Component.getLayout ?? defaultPageLayout

      return getLayout(<Component {...pageProps} />)
    }
2
  • This is the best answer. Very similar to what Next recommend.
    – user.io
    Mar 19, 2022 at 7:32
  • this is gold dust
    – Kachinga
    Jan 20 at 18:33
3

I use displayName static property. It works in any React.js component as well.

const OGImagePreview = () => <h1>OG Image Preview</h1>

OGImagePreview.displayName = 'OGImagePreview'

export default OGImagePreview

Then I use switch...case in _app.tsx like:

switch (Component.displayName) {
    case 'OGImagePreview':
        return (
            <>
                <Component {...pageProps} />
            </>
        )
    default:
        return (
            <>
                <Head>
                    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
                </Head>
                <ThemeProvider attribute="class" themes={['light', 'dark']}>
                    <Progress />
                    <Nav />
                    <Component {...pageProps} />
                </ThemeProvider>
                <ScrollToTop />
                <Analytics />
            </>
        )
}
2

what about this? Hope can save someone

import "../styles/globals.css";
import dynamic from "next/dynamic";
const Layout = dynamic(() => import("@layout/Layout"));
import { useRouter } from "next/router";

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  return (
    <>
      {router.pathname !== "/" ? (
        <Layout>
          <Component {...pageProps} />
        </Layout>
      ) : (
        <Component {...pageProps} />
      )}
    </>
  );
}

export default MyApp;

2

You can simply leverage useRouter from 'next/router' and get your job done easily.

import {useRouter} from 'next/router';

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

  if(router.asPath =='/dashboard')  {
     return (
       <Component {...pageProps} />
     )
  }

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

What about using higher order components . They are not part of react API but as react docs says, "They are a pattern that emerges from React’s compositional nature." Next uses react so it does make sense to use react patterns in next

The following code wraps a given component with a predefined Header and Footer component. Then a component that uses it is wrapped with the HOC when exported

    const withLayout = Comp =>  {
        const WrappedComp = (props) => {
            return (
                <div id='layout'>
                    <Header />
                    <Comp {...props} />
                    <Footer />
                </div>
            );
        }
        return WrappedComp;
    }

    const Section = () => {
        return ( 
            <section>
                Section content...
            </section>
        );
    }

    export default withLayout(Section);
1

I have tried my code in this way and its working fine for me.

`
    import { useRouter } from "next/router";
    function MyApp({ Component, pageProps}: AppProps) {
      const router = useRouter();
      return (
        <>
          {router.pathname !== "/contact" ? (
            <>
              <NavBar />
              <Component {...pageProps} />
              <JoinUsSection />
              <Footer />
            </>
          ) : (
            <>
              <NavBar />
              <Component {...pageProps} />
              <Footer />
            </>
          )}
        </>
      );

}`
0

When i use

class MyProfile extends React.Component {

    static noLayout = true;

    constructor(props){
        super(props);


    }
    render()
    {
        return (
            <a href="/test">test </a>

    )
}


 export default withRouter (connect(mapStateToProps, mapDispatchToProps)(MyProfile));

The static Variable noLayout is not accesible in _app.jsx

Component.noLayout.  // is undefined

Is undefined.

No way to "inject" static variable or props to determine which layout to use.

(maybe i can only use the router object)
When i look into:

console.log("Component:", Component);
console.log("Component props :", this.props);
console.log("Component page props :", pageProps);

enter image description here

So only what i see is this.props.router

if (this.props.router.pathname == "/ja/profil")
{
    return <Component {...pageProps} />;
}

Is there any better way?

1
  • If you have a new question, please ask it by clicking the Ask Question button. Include a link to this question if it helps provide context. - From Review
    – ruud
    2 days ago

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.