See before and after exampleBeforecomponents/DashboardLayout.js export default function DashboardLayout({ children }) {
  return (
    <div>
      <h2>My Dashboard</h2>
      {children}
    </div>
  )
}pages/dashboard/index.js import DashboardLayout from '../components/DashboardLayout'
 
export default function Page() {
  return <p>My Page</p>
}
 
Page.getLayout = function getLayout(page) {
  return <DashboardLayout>{page}</DashboardLayout>
}After
Remove the Page.getLayout property from pages/dashboard/index.js and follow the steps for migrating pages to the app directory.
app/dashboard/page.js export default function Page() {
  return <p>My Page</p>
}
Move the contents of DashboardLayout into a new Client Component to retain pages directory behavior.