Can I use multiple Layouts for different pages?

Question

For Example: If I want to have two different types of Nav-Bars for the Shopping area & User settings area.

Answer 1

You can use pages/_app.js to share a layout across all pages, but if you have multiple layouts, you could either:

• Extract your layout to a child of _app.js. For example, pages/index.js would render your <Layout /> component there instead of in _app.js. Then, pages/blog.js could render a different layout <BlogLayout />.
• You could use the useRouter() hook inside _app.js to check which route you're on and conditionally change the layout.