Layout
Each page in an application may have some common header, footer or navigation. That's why NextWeb.js prepare a simple layout system for you.
Just define the layout component here:
// src/components/_layouts/main/index.js
import Navigation from './Navigation'
function MainLayout({ children }) {
return (
<div>
<Navigation />
<main>{children}</main>
</div>
)
}
In this case, we add <Navigation />
besides the children
which refers to the rendered page.
Disable Layout
However, some pages may not need a layout. The solution is easy, just set the layout
option for withPage()
to false
.
// src/components/mypage/index.js
import React from 'react'
import withPage from '@lib/page/withPage'
function MyPage() {
return <div>My Page</div>
}
export default withPage({ layout: false })(MyPage)
Multiple Layout
If your app is more complex or a single layout is not enough, you can add alternative layouts.
src/
components/
_layouts/
main/
index.js // Main layout
custom-1/
index.js // Custom layout 1
custom-2/
index.js // Custom layout 2
And you have to edit withLayout.js
:
// src/lib/page/withLayout.js
import MainLayout from '@components/_layouts/main'
import CustomLayout1 from '@components/_layouts/custom-1'
import CustomLayout2 from '@components/_layouts/custom-2'
export default (hasLayout = 'main') => PageComponent => {
function EnhancedPageComponent(props) {
if (!hasLayout) {
return <PageComponent {...props} />
}
if (hasLayout === 'custom-1') {
<CustomLayout1>
<PageComponent {...props} />
</CustomLayout1>
}
if (hasLayout === 'custom-2') {
<CustomLayout2>
<PageComponent {...props} />
</CustomLayout2>
}
return (
<MainLayout>
<PageComponent {...props} />
</MainLayout>
)
}
...
return EnhancedPageComponent
}
Now choosing a layout is super easy:
// src/components/mypage/index.js
import React from 'react'
import withPage from '@lib/page/withPage'
function MyPage() {
return <div>My Page</div>
}
export default withPage({ layout: 'custom-2' })(MyPage)