Skip to content

Instantly share code, notes, and snippets.

@celeroncoder

celeroncoder/README.md

Created July 31, 2022 15:37
Show Gist options
  • Save celeroncoder/da54af8244fcbb2bb2593467ee6f981e to your computer and use it in GitHub Desktop.
Save celeroncoder/da54af8244fcbb2bb2593467ee6f981e to your computer and use it in GitHub Desktop.
Download ZIP
Exclude a page to inherit a wrapper or something else from custom app component aka `_app.ts`
Raw
README.md

Expempt a page to inherit something from the _app.ts

How to?

  • We make a conditional in the _app.ts to render something that we don't want to render only if the page says so.
  • To do the above we make use of the pageProps that are the props passed on the _app.ts before to the actual page component, we can pass something like noLayout and make a conditional to not show the layout if the props exists or is true.
Raw
_app.ts
function MyApp({ Component, pageProps }) {
return (
<Head>
<title>My App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<ThemeProvider theme={theme}>
{pageProps.noLayout ? <></> : <Header />}
<main>
<Component {...pageProps} />
</main>
</ThemeProvider>
)
}
Raw
page.ts
export async function getStaticProps(context) {
return {
props: { noLayout: true },
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment