menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

Next.js

A place to chat about Next.js and answer questions. For all other ZEIT products, check this out.

Channels
Team

Is there a way to persist a layout for a given set of routes?

September 26, 2018 at 11:04am
The Next.js community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

Is there a way to persist a layout for a given set of routes?

September 26, 2018 at 11:04am
I see that you can modify _app.js to persist a layout between pages. But lets say I have a /home, /about, and /login page that I don't want a persisted layout. But then I have /dashboard /dashboard/clients /dashboard/statistics where I want a dashboard layout to persist. Is there a way to achieve this? Thanks :)
Show previous messages

September 29, 2018 at 11:53am
Say if you have 2 or 3 layouts they'd all be shipped in _app.js to the client side, whereas when using static Layout = YourComponent would only have the specific layout needed to render the page
Using static Layout is also more flexible as the page defines what layout to render and it can be wrapped etc
Alternatively you could use next/dynamic to only load the javascript that has been rendered in _app.js
like-fill
1

October 8, 2018 at 6:31pm
Wow this great thank you
This would probably make a great first contribution, i.e. https://github.com/zeit/next.js/tree/master/examples

October 9, 2018 at 3:20am
How can I access these static property in "routeChangeStart(url)" event?
Do you have an example for that?

October 10, 2018 at 3:59pm
In _app.js
<Container>
<Component.Layout>
<Component { ...pageProps} />
</Component.Layout>
</Container>
In pages/mypage.js
const MyPage = () => <div></div>
MyPage.Layout = MyLayout;
MyPage.getInitialProps = async () => ({});
export default MyPage;
like-fill
6

August 15, 2019 at 10:20am
I really like this solution. Wrote a little type to make typescript stop complaining. But fairly uncertain these are correct.
type LayoutComponent = NextComponentType<NextPageContext, any, any> & {
Layout?: any;
};
interface Props extends AppProps {
Component: LayoutComponent;
}
Edited

August 21, 2019 at 2:43pm
So this works.. except now I have a server/client mismatch with Styled components. could this be a timing issue?

November 6, 2019 at 10:39am
The above solutions work, how could i do something similar to what proposed but for .mdx files?
Using a static true/false works, however is it possible to implement something like Page.Layout = Layout for .mdx files?
Edited