Opt out of Layout Component for specific pages

[shreyas-jadhav]

I have found out this cool trick to opt out of Layout component for specific pages from _app.js. That is, by using switch statement.

_app.js

import "../styles/globals.css";
import Layout from "../components/Layout";

function MyApp({ Component, pageProps }) {

  switch (Component.name) {
   
    //Component which do not need to be wrapped in Layout

    case "Home": //Exported function name here
      return <Component {...pageProps} />;

    //All other component to be wrapped inside Layout
    default:
      return (
        <Layout>
          <Component {...pageProps} />{" "}
        </Layout>
      );
  }
}

export default MyApp;

Just make sure to name your components uniquely.

[DiegoNG90]

Hi
I feel a little lost here, doing the Next JS tutorial (blog):
https://nextjs.org/learn/basics/dynamic-routes/implement-getstaticprops
So, basically, I got a Layout component like this:
`import Head from 'next/head'
import Image from 'next/image'
import styles from './layout.module.css'
import utilStyles from '../styles/utils.module.css'
import Link from 'next/link'

const name = 'Supa hot fire'
export const siteTitle = `I'm ${name}

export default function Layout({ children, home }) {
return (

<meta
property="og:image"
content={https://og-image.vercel.app/${encodeURI( siteTitle )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg}
/>




{home ? (
<>

{name}

</>
) : (
<>

{name}

</>
)}

{children}
{!home && (

← Back to home

)}

)
}`

And after this, I got my [id].js file where my different blog post should be render:
import Layout from '../../components/layout'
import { getAllPostIds, getPostData } from '../../lib/posts'

`export default function Post({ postData }) {
return (

{postData.title}


{postData.id}


{postData.date}

)
}

export async function getStaticPaths() {
const paths = getAllPostIds()
return {
paths,
fallback: false
}
}

export async function getStaticProps({ params }) {
const postData = getPostData(params.id)
return {
props: {
postData
}
}
}
`

As you can see, [id].js works with the Layout component. And the Layout component has a -exported -variable called "siteTitle", which should (?) be rendered at any page which uses this component.
Now, the problem is, when I open an [id].js page, such as http://localhost:3000/posts/ssg-ssr, the content is been rendered properly/as expected but the siteTitle is not being render.
Instead, I get as page title my url ("http://localhost:3000/posts/ssg-ssr").
Kind of don't understand why this is happening :/
Any ideas?

EDIT: After a couple of shots trying to make my code quotation better -and failed-, I pass my github repo to make it easier to look at the code in case it's neccesary.
https://github.com/DiegoNG90/nextjs-blog

[leerob]

Update: We’re excited to announce Next.js 13, which includes the new app/ directory (beta) with support for nested layouts, colocation of data fetching, streaming, Server Components by default, and much more.

Inside the app/ directory, there is a powerful new way to fetch data with React’s use() hook and the extended Web fetch() API. This allows you to colocate data fetching directly inside components for the most flexibility, including inside layouts.

You can leave feedback here: #41745