在 Next.js 應用程式中增加包裝組件
如何使用包裝組件並向其中添加常用的側邊欄或頂部欄 您網站上的所有頁面幾乎都是相同的，都有外觀元件和共同基礎層，您只需要更改其中的內容。 有導覽列、側邊欄和實際內容。 在 Next.js 中要如何建立這樣的系統？ 有兩種方法。一種是使用高階元件，通過創建components/Layout.js組件： export default Page => { return () => ( <div> <nav> <ul>....</ul> </nav> <main> <Page /> </main> </div> ) } 我們可以在其中匯入獨立的頁首和/或側邊欄組件，還可以添加所需的所有 CSS。 然後像這樣在每個頁面中使用它： import withLayout from '../components/Layout.js' const Page = () => <p>這是一個頁面!</p> export default withLayout(Page) 但是我發現這只適用於簡單的情況，不需要在頁面上調用getInitialProps()。 為什麼這樣做會有問題呢？ 因為getInitialProps()只在頁面組件上被呼叫。但如果我們從頁面中導出高階元件withLayout()，則不會調用Page.getInitialProps()，而會調用withLayout.getInitialProps()。 為了避免過於複雜化程式碼庫，另一種方法是使用 props： export default props => ( <div> <nav> <ul>....</ul> </nav> <main> {props.content} </main> </div> ) 現在我們在頁面中像這樣使用它： import Layout from '../components/Layout.js' const Page = () => ( <Layout content={( <p>這是一個頁面!...