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


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


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

October 8, 2018 at 7:14pm
This would probably make a great first contribution, i.e.

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
<Component { ...pageProps} />
In pages/mypage.js
const MyPage = () => <div></div>
MyPage.Layout = MyLayout;
MyPage.getInitialProps = async () => ({});
export default MyPage;

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;

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?