How to Use Multiple Layouts in Next.js

Published Apr 18, 2021  ∙  Updated May 2, 2022

What would be the best way to incorporate multiple layouts in our Next.js application?

Define Layouts

Suppose I have two layouts, Layout1 and Layout2, that I want rendered, depending on the page.

Layout1 might look something like this.

// layouts/Layout1.jsx
const Layout1 = ({ children }) => {
  return <div className="layout1">{children}</div>;
export default Layout1;

And Layout2 is a drastically different layout.

// layouts/Layout2.jsx
const Layout2 = ({ children }) => {
  return <div className="layout2">{children}</div>;
export default Layout2;

Example Usage

I considered changing layouts based on routes (i.e. all pages/layout1/* use Layout1), but it yielded suboptimal render performance.

I found that the easiest way to change layouts is to define it on the page level.

// pages/home.jsx
const Home = () => <div>Home</div>;
Home.layout = "L1";
export default Home;
// pages/about.jsx
const About = () => <div>About</div>;
About.layout = "L2";
export default About;

Then, inside our _app.jsx, we can handle all required imports.

// pages/_app.jsx
import Layout1 from "@/layouts/Layout1";
import Layout2 from "@/layouts/Layout2";
const layouts = {
  L1: Layout1,
  L2: Layout2,
const App = ({ Component, pageProps }) => {
  const Layout = layouts[Component.layout] || ((children) => <>{children}</>);
  return (
      <Component {...pageProps} />
export default App;

Nested Layouts

The provided solution will work very nicely if we don’t require any nested layouts.

If we need multiple, nested layouts, instead of returning a string identifying the layout a page needs, we can return a function of the expected layout.

// pages/home.jsx
import Layout1 from "@/layouts/Layout1";
import Layout2 from "@/layouts/Layout2";
Home.layout = (page) => (
// pages/about.jsx
import Layout2 from "@/layouts/Layout2";
import Layout1 from "@/layouts/Layout1";
About.layout = (page) => (

Inside _app.jsx, we can change how we render our components.

// pages/_app.jsx
const pageLayout = Component.layout || ((page) => page);
return pageLayout(<Component {...pageProps} />);