この方法で、ページベースの Next.js アプリケーション内のコンポーネントとレイアウトを整理します。

Next.js アプリケーションを構築する場合、クリーンでスケーラブルなコードベースを維持するには、コンポーネントとレイアウトを効率的に整理することが重要です。このブログ投稿では、Supabase のコードベースからインスピレーションを得た、ページベースのアプローチを使用してコンポーネントとレイアウトを構造化する実践的な例を見ていきます。

ページベースのアプローチを理解する

Next.js は、各ファイルがアプリケーション内のルートに対応するページ ディレクトリを使用します。この構造は直感的ですが、アプリが成長するにつれて、再利用性と明確さを促進する方法でコンポーネントとレイアウトを整理することが非常に重要になります。

例: サインイン ページの構造

Supabase ソース コードの SignInPage コンポーネントの構造を調べて、実際の例を見てみましょう。

私たちは、オープンソース コミュニティからインスピレーションを得て、ベスト プラクティスを教えるプラットフォームを構築しています。 Github でスターを付けてください。

コンポーネントとレイアウト: 明確な分離

コンポーネントとレイアウトがどのように構成されているかに注目してください:

• **components/interfaces/SignIn/SignInForm**: このディレクトリには、特にサインイン インターフェイスに関連する SignInForm コンポーネントが保持されます。関連するインターフェース フォルダー内でコンポーネントを整理すると、関連するコンポーネントが確実にグループ化され、検索と管理が容易になります。
• **components/layouts/SignInLayout/SignInLayout**: SignInLayout コンポーネントは、独自のレイアウト ディレクトリに分離されます。これにより、レイアウト ロジックが個々のコンポーネントから区別され、異なるページ間でレイアウトを再利用できるようになります。
• **lib/constants**: IS_PLATFORM 定数は集中管理された場所からインポートされます。これは、複数のコンポーネント間で使用される可能性のあるグローバル定数を管理するための良い方法です。

実際、Supabase コンポーネント フォルダーにこのアプローチについての詳しい説明があります。

レイアウトの追加

Next.js の強みの 1 つは、ページごとにレイアウトを定義できることです。 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 中国語 Web サイトの他の関連記事を参照してください。