DEV Community

Discussion on: Layout Persistence in Next.js

Collapse
 
macgyver98 profile image
MacGyver98

Hi! thanks for your effort and share us.

What about if I need to decide between two different layouts? Where should I put the logic and how should I export Layout from my page?

Collapse
 
nerdherd profile image
ali • Edited

You will assign the layout to the page in the page file.

Upon navigating to a page, _app.js will render the layout from the page component via Component.Layout as per the authors code.

// pages/home.js
import HomeLayout from '../layouts/home-layout.jsx

const HomePage = () => (
   <div>HomePage</div>
)

// assigning HomeLayout to the page property `Layout`
HomePage.Layout = HomeLayout

export default HomePage
Enter fullscreen mode Exit fullscreen mode
// pages/account.js
import AccountLayout from '../layouts/account-layout.jsx
const AccountPage = () => (
   <div>Account Page</div> 
)

AccountPage.Layout = AccountLayout

export default AccountPage
Enter fullscreen mode Exit fullscreen mode