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

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

PHPz

リリース： 2024-08-14 10:35:02

オリジナル

481 人が閲覧しました

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

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

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

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

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

Organize your components and layouts in your pages-based Next.js application this way.

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

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

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

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

Organize your components and layouts in your pages-based Next.js application this way.

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

Organize your components and layouts in your pages-based Next.js application this way.

レイアウトの追加

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

までご連絡ください。

さらに読む:

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

以上がこの方法で、ページベースの Next.js アプリケーション内のコンポーネントとレイアウトを整理します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。