NextJS Different Layouts for Different Pages

[tacit belfry]

Hi @vivid valve. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

In Next.js, you can define different layouts for different pages. Here are a few ways to do it:

1. Per-Page Layouts: You can add a property getLayout to your page, allowing you to return a React component for the layout. This allows you to define the layout on a per-page basis. Here's an example:

import Layout from '../components/layout'
import NestedLayout from '../components/nested-layout'
 
export default function Page() {
 return (
 /** Your content */
 )
}
 
Page.getLayout = function getLayout(page) {
 return (
 <Layout>
 <NestedLayout>{page}</NestedLayout>
 </Layout>
 )
}

When navigating between pages, we want to persist page state (input values, scroll position, etc.) for a Single-Page Application (SPA) experience. This layout pattern enables state persistence because the React component tree is maintained between page transitions. source (https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts)

2. Single Shared Layout with Custom App: If you only have one layout for your entire application, you can create a Custom App and wrap your application with the layout. Here's an example:

import Layout from '../components/layout'
 
export default function MyApp({ Component, pageProps }) {
 return (
 <Layout>
 <Component {...pageProps} />
 </Layout>
 )
}

source (https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts)

3. Nested Layouts: In the app directory, you can define layouts through the file system. Layouts share UI between multiple pages. On navigation, layouts preserve state, remain interactive, and do not re-render. Here's an example:

export default function BlogLayout({ children }) {
 return <section>{children}</section>;
}

source (https://nextjs.org/blog/next-13)

4. Migrating the getLayout() pattern to Layouts: If you're migrating from pages to app, you can replace the getLayout() pattern with native support for nested layouts in the app directory. Here's an example:

// Before
import DashboardLayout from '../components/DashboardLayout'
 
export default function Page() {
 return <p>My Page</p>
}
 
Page.getLayout = function getLayout(page) {
 return <DashboardLayout>{page}</DashboardLayout>
}

// After
export default function Page() {
 return <p>My Page</p>
}

import DashboardLayout from './DashboardLayout'
 
// This is a Server Component
export default function Layout({ children }) {
 return <DashboardLayout>{children}</DashboardLayout>
}

source (https://nextjs.org/docs/pages/building-your-application/upgrading/app-router-migration)

Remember, the top-most layout is called the Root Layout. This required layout is shared across all pages in an application. Root layouts must contain html and body tags. Any route segment can optionally define its own Layout. These layouts will be shared across all pages in that segment. Layouts in a route are nested by default. source (https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts)

I hope this helps! Let me know if you have any other questions.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@vivid valve kapa.ai is still learning and improving, please let us know how it did by reacting below

[fair sluice]

In which route you want to different layouts for different pages?

[fair sluice]

There are 2 routes in Next.js : 1. Page route, 2. App route

Page Route :
1 Create Layout Components:

// components/MainLayout.js
import React from 'react';

const MainLayout = ({ children }) => {
  return (
    <div>
      <header>Header</header>
      <main>{children}</main>
      <footer>Footer</footer>
    </div>
  );
};

export default MainLayout;

// components/AdminLayout.js
import React from 'react';

const AdminLayout = ({ children }) => {
  return (
    <div>
      <header>Admin Header</header>
      <main>{children}</main>
      <footer>Admin Footer</footer>
    </div>
  );
};

export default AdminLayout;

2 Use Layout Components in Pages:

// pages/index.js
import React from 'react';
import MainLayout from '../components/MainLayout';

const HomePage = () => {
  return (
    <MainLayout>
      <h1>Welcome to the Home Page</h1>
    </MainLayout>
  );
};

export default HomePage;

// pages/admin/dashboard.js
import React from 'react';
import AdminLayout from '../../components/AdminLayout';

const AdminDashboardPage = () => {
  return (
    <AdminLayout>
      <h1>Welcome to the Admin Dashboard</h1>
    </AdminLayout>
  );
};

export default AdminDashboardPage;

3 Dynamic Layouts with _app.js:

// pages/_app.js
import React from 'react';
import MainLayout from '../components/MainLayout';
import AdminLayout from '../components/AdminLayout';

function MyApp({ Component, pageProps }) {
  const getLayout = (pageComponent) => {
    if (pageComponent.name.startsWith('Admin')) {
      return <AdminLayout>{pageComponent}</AdminLayout>;
    }
    return <MainLayout>{pageComponent}</MainLayout>;
  };

  const Layout = getLayout(Component);
  return <Layout {...pageProps} />;
}

export default MyApp;