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 :)

September 26, 2018 at 11:15am
idk what you mean by "persist", but you don't have to have the layout in _app.js, it can be a separate component that your pages use. In fact, it's not exactly a great idea to build a layout inside _app.js

September 26, 2018 at 7:19pm
I'd recommend passing your routes down to the component you're persisting, and have it render null when it's rendered on pages you'd rather it not be.

September 27, 2018 at 10:30pm
The most interesting way of doing this, which I don't think anyone implemented yet, is by adding a static property on the page component and then reading that in _app.js
like-fill
3
I actually do this! After a conversation with you ;)

September 28, 2018 at 11:40am
Hmm interesting! Thanks for the idea. Is there a next example repo demonstrating this??
Oh I guess it's as simple as passing a function from _app.js down haha. Sometimes when trying something new things seem like magic. Glad next is so simple. Thanks for this idea!
Here's an example:
_error.js:
import React from 'react'
export default class Error extends React.Component {
static getInitialProps ({ res, err }) {
const statusCode = res ? res.statusCode : err ? err.statusCode : null
return { statusCode }
}
static isErrorPage = true
render () {
return (
<h1>
{this.props.statusCode
? `An error ${this.props.statusCode} occurred on server`
: 'An error occurred on client'}
</h1>
)
}
}
Show more messages