next-app-layout
A tiny component to add persistent layouts to a Next.js app.
How to use
Page components can add a static Layout
property on the default export which
will be used by next-app-layout
as persistent layout.
Layout component in pages/_app.tsx
To render the layout, place thw following in pages/_app.tsx
:
import Layout from '@stefanprobst/next-app-layout'
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return (
<Layout>
<Component {...pageProps}>
</Layout>
)
}
The Layout
component accepts a default
prop, which will be rendered if no
Component.Layout
prop is found.
import Layout from '@stefanprobst/next-app-layout'
import type { AppProps } from 'next/app'
import PageLayout from 'layouts/PageLayout'
export default function App({ Component, pageProps }: AppProps) {
return (
<Layout default={PageLayout}>
<Component {...pageProps}>
</Layout>
)
}
All additional props passed to Layout
will be passed on to the layout
component.
Defining a page layout
In a page component, add the following:
import CustomLayout from 'layouts/CustomLayout'
export default function AboutPage() {
return <h1>About</h1>
}
AboutPage.Layout = CustomLayout
To explicitly render no persistent layout component (i.e. also bybassing any
default layout defined with <Layout default={DefaultLayout}>
), set the Layout
to React.Fragment
:
AboutPage.Layout = React.Fragment
A note on react refresh
Hot reloading with react refresh will work, as long as the layout component is imported from another file. Defining the layout component in the same file as the page component will not work with react refresh, as it does not register changes on static function properties.