quick torrent
I have this in my _app.tsx:
export default function App({ Component, pageProps }: AppProps) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
}
I'd like to pass variables like menu_bg=white, etc. to Layout here. For example, I'd like to change menu bar color per page.
should I just hack something like Component.data = {}?
wicked mortar
should I just hack something like Component.data = {}?
If the prop is sent from getStaticProps or getServerSideProps, it’s already available in pageProps. Otherwise yes, you do it that way
quick torrent
It works well, except for one bug: the <html> element inside <Head> in Layout.tsx doesn't update when navigating between pages.
That is: reloading the page makes it work, but simply navigating doesn't update the html.
Or for phrasing this question differently, I'm looking for the simplest possible Next.js app which has 2 pages, with with <html className="dark"> and one without. How would you do this?
wicked mortar
It works well, except for one bug: the <html> element inside <Head> in Layout.ts...
Are you using the app directory or the pages directory?
Your first message was for the pages directory but this one is for the app directory
They are very very different
quick torrent
pages
I'm following the Layout docs for pages, but added <html> inside <Head>
<Head>
<html className={clsx({ dark })} />
In the pages directory there is no such thing as layout.tsx? Or did you mean a custom layout component?
wicked mortar
I have this in my _app.tsx:
```
export default function App({ Component, pagePro...
anyway, it's like so
export default function App({ Component, pageProps }: AppProps) {
// if you use Page,title, it will be available here as Component.title
// if you return the prop from getStaticProps or getServerSideProps,
// it will be available here as pageProps.title
// use the way you prefer
return ...;
}