在 next.js 中使用巢狀的 layout

通常我們的網站會有Topbar、Footer之類的,在next.js專案中我們會把這樣的layout寫在一起:

import Navbar from "components/navbar";
import Footer from "components/footer";
import { Box } from "@mui/material";

export default function Layout({ children }) {
  return (
    <Box>
      <Navbar />
      <main>
        {children}
      </main>
      <Footer />
    </Box>
  );
}

然後在_app.js中引入

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

這時候就會確保不管點到哪一頁,都會有Topbar跟Footer。

如果要在特定某幾頁加上另一種layout,例如Sidebar,我們要在要加入的那頁指定:

import Sidebar from "components/Sidebar";
export default function BlogPage() {
  return {...}
}

BlogPage.getLayout = function getLayout(page) {
  return <Sidebar>{page}</Sidebar>;
};

改寫_app.js

import Layout from '../components/layout'
export default function MyApp({ Component, pageProps }) {
  const getLayout = Component.getLayout || ((page) => page)
  return (
    <Layout>
      <Component {...pageProps}/>
    </Layout>
  )
}
0

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

加入Line立即聊聊:@539mjyid

0 回復

發表評論

想要加入討論嗎?
請盡情發表您的想法!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。