以這種方式在基於頁面的 Next.js 應用程式中組織元件和佈局。

建立 Next.js 應用程式時，有效組織元件和佈局對於維護乾淨、可擴展的程式碼庫至關重要。在這篇文章中，我們將研究一個受 Supabase 程式碼庫啟發的使用基於頁面的方法來建立元件和佈局的實際範例。

了解基於頁面的方法

Next.js 使用頁面目錄，其中每個檔案對應於應用程式中的一個路由。這種結構很直觀，但隨著應用程式的成長，以促進可重複使用性和清晰度的方式組織元件和佈局非常重要。

範例：登入頁面結構

讓我們透過檢查 Supabase 原始碼中 SignInPage 元件的結構來看看現實世界的範例。

我們正在建立一個教授最佳實踐的平台，並從開源社群中汲取靈感。在 Github 上給我們一顆星。

元件和佈局：清晰的分離

注意組件和佈局的組織方式：

• **components/interfaces/SignIn/SignInForm**：此目錄存放SignInForm元件，具體與Sign-In介面相關。透過在相關的介面資料夾中組織元件，您可以確保相關元件被分組在一起，從而使它們更易於找到和管理。
• **components/layouts/SignInLayout/SignInLayout**：SignInLayout 元件被分離到自己的佈局目錄中。這使佈局邏輯與各個元件不同，從而允許您在不同頁面上重複使用佈局。
• **lib/constants**：IS_PLATFORM 常數是從集中位置匯入的。這是管理可能跨多個元件使用的全域常數的良好實踐。

事實上，Supabase 元件資料夾對這種方法有很好的解釋。

新增佈局

Next.js 的優勢之一是它能夠在每頁的基礎上定義佈局。 SignInPage 元件包裝在 SignInLayout 中，定義頁面的整體結構：

SignInPage.getLayout = (page) => (
  <SignInLayout
    heading="Welcome back"
    subheading="Sign in to your account"
    logoLinkToMarketingSite={true}
  >
    {page}
  </SignInLayout>
)
export default SignInPage

結論

以這種方式在基於頁面的 Next.js 應用程式中組織元件和佈局可以促進乾淨、可擴展的結構。透過對相關元件進行分組並分離佈局邏輯，您可以建立一個可維護的程式碼庫，該程式碼庫可以隨著應用程式的成長而輕鬆擴展。

關於我們：

網址：https://thinkthroo.com/

Github：https://github.com/thinkthroo/thinkthroo（給我們一顆星！）

免費從頭開始建立開源專案

讓您的開發團隊學習最佳實務

需要專案協助嗎？請透過 thinkthroo@gmail.com 與我們聯絡

延伸閱讀：

1. https://github.com/supabase/supabase/blob/master/apps/studio/pages/sign-in.tsx
2. https://github.com/supabase/supabase/tree/master/apps/studio/components/interfaces
3. https://github.com/supabase/supabase/tree/master/apps/studio/components/layouts
4. https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts#per-page-layouts

以上是以這種方式在基於頁面的 Next.js 應用程式中組織元件和佈局。的詳細內容。更多資訊請關注PHP中文網其他相關文章！