Next JS 13 - Remove layout for specific page

Quick Fix: In Next.js 13, shared layouts are not re-rendered during navigation due to the inability to set Root Layout to a Client Component. To resolve this, create a layout page in your root directory that serves as a wrapper for Root Layout. Import this layout page in Root Layout and use the usePathname hook to conditionally render specific elements based on the current route. This approach ensures that the shared layout and its content are rendered correctly during navigation.

The Solutions:

Solution 1: Using Layout Provider

To remove the layout for a specific page in Next.js 13, you can use a custom layout provider. Follow these steps:

Create a Layout Provider:

In your root directory (/app), create a file named LayoutProvider.js with the following code:

// Use the client directive for using usePathname hook.
'use client'

// Use usePathname for catching route name.
import { usePathname } from 'next/navigation';

export const LayoutProvider = ({ children }) => {
  const pathname = usePathname();
  return (
    <>
      {pathname === "/posts" && <h1>Welcome to Posts page!</h1>}
      {children}
    </>
  );
};

Wrap the Root Layout:

In your root layout file (/app/layout.js), wrap the content with the LayoutProvider component:

// Import your layout page
import { LayoutProvider } from './LayoutProvider'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <LayoutProvider>
          {children}
        </LayoutProvider>
      </body>
    </html>
  );
}

This allows you to conditionally display content in the header depending on the current route. For example, you can show a different header on the "/posts" page.

Solution 2: Using ghost groups for general purpose

For general purposes, it’s recommended to use ghost groups. This involves creating groups of folders with the same layout at the app/ root, even if they don’t correspond to actual routes. This allows you to share layouts between common sections while maintaining a clean file structure.

Solution 3: Using LayoutProvider for dynamic header content

If you need different header content depending on the route, utilize the LayoutProvider. By wrapping your layout component with the LayoutProvider, you can dynamically provide different header contents based on the route you’re in.

Solution 3: Using LayoutProvider and Checking for specific routes

This solution involves using the LayoutProvider to conditionally render different layouts based on the route.

Explanation:

Create a custom app.tsx file at the root of your project.
Wrap the RootLayout component with the LayoutProvider component.
Within the RootLayout component, use the headers() function to access the request headers and retrieve the x-invoke-path header. This indicates the current route.
Use an if condition to check whether the current route is the specific route for which you want to remove the layout.
If the condition is met, do not render the layout components (e.g., Navbar and Footer) within the RootLayout component.
Otherwise, render the layout components as usual.

Example code:

// _app.tsx_
import { AppProps } from "next/app";
import { LayoutProvider } from "next-layout";

import RootLayout from "../components/layouts/RootLayout";

const App = ({ Component, pageProps }: AppProps) => {
  return (
    <LayoutProvider>
      <RootLayout>
        <Component {...pageProps} />
      </RootLayout>
    </LayoutProvider>
  );
};

export default App;

// _RootLayout.tsx_
import Header from "../components/Header";
import Footer from "../components/Footer";
import { getLayout } from "next-layout";

const RootLayout = ({ children }: any) => {
  const headersList = headers();
  const pathname = headersList.get("x-invoke-path") || "";
  const specificRoute = "/resume";

  return getLayout(
    (
      <>
        {pathname !== specificRoute && <Header />}
        {children}
        {pathname !== specificRoute && <Footer />}
      </>
    )
  );
};

export default RootLayout;

Q&A

Is there a way to remove the base layout for a specific page in NextJS 13 ?

—

Yes, you can use the LayoutProvider component to wrap the Root Layout and create a layout page in your root directory.

What is the NextJS 13 way to share layout in common sections?

—

Use Routing Groups to group pages that share a common layout.

Can you apply condition to display component or not on layout ?

—

Yes, you can check if the path matches a specific route and then apply or not the component on the layout.

Video Explanation:

The following video, titled "Fullstack Discord Clone: Next.js 13, React, Socket.io, Prisma ...", provides additional insights and in-depth exploration related to the topics discussed in this post.

05:24:55 Delete & Leave server modal 05:43:40 Search Server Modal 06:10:06 Server Channels List 06:50:06 Edit Channels 07:11:56 Channel ID Page ...

Next JS 13 – Remove layout for specific page – Node.js