Next.js 15: TypeScriptフォームとPrismaとクリーンアーキテクチャ 🚀
利用可能な言語 :
Sébastien TIMONER
Web開発とチームマネジメントのエキスパートとして、高性能なデジタルソリューションの作成と最適化を専門としています。React.js、Node.js、TypeScript、Symfony、そしてIoT向けのZephyr OSなどの最新技術における豊富な専門知識を活かし、offroadLabsにて様々な業界の企業向けに、設計から本番環境までの複雑なSaaSおよびIoTプロジェクトの成功を確実にします。
offroadLabsでは、技術的専門知識と協力的なアプローチを組み合わせたカスタム開発サービスを提供しています。革新的なSaaSソリューションの作成、Zephyr OSを使用したIoTシステムの開発、既存アプリケーションの近代化、またはチームのスキルアップ支援など、各プロジェクトの特定のニーズに合わせた堅牢で高性能なソリューションの提供に取り組んでいます。
エクサンプロヴァンス地域またはフルリモートでのプロジェクトに対応可能です。
モダンなWebアプリケーションをどのように構築すべきでしょうか？時間とともにメンテナンス性を確保するにはどうすればよいでしょうか？このガイドでは、ヘキサゴナルアーキテクチャと堅牢なフォームバリデーションを使用してNext.jsアプリケーションを作成します。学習をより楽しくするために、ジェダイ・アカデミーの登録システムを作成しましょう！
ソースコードはGitHubで入手できます。
ヘキサゴナルアーキテクチャ（「ポートとアダプター」としても知られる）は、以下のようなビジネスコンポーネントを作成できるアーキテクチャパターンです：
アーキテクチャは3つの主要なレイヤーに分かれています：
[コンテンツは続く...]
bash
プロジェクト作成時には、以下の質問に答えてください：
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? Yes
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias (@/*)? Yes
Using Next.js version 15.0.0+ with Turbopack
プロジェクトが作成されたら、依存関係をインストールします：
bash
shadcn/uiの初期化時には、以下の質問に答えてください：
Would you like to use TypeScript (recommended)? Yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › src/app/globals.css
Would you like to use CSS variables for colors? › Yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › Yes
# 必要なコンポーネントのインストール
npx shadcn@latest add form input select textarea button card toast table
bash
src/
├── app/
│ ├── actions/
│ │ └── register-padawan.ts
│ ├── components/
│ │ ├── ui/ # shadcn/uiコンポーネント
│ │ ├── jedi-form.tsx
│ │ └── padawan-list.tsx
│ ├── lib/
│ │ └── utils.ts # shadcn/uiユーティリティ
│ └── page.tsx
├── core/
│ ├── domain/
│ │ ├── models/
│ │ │ └── padawan.ts
│ │ ├── ports/
│ │ │ └── padawan-repository.ts
│ │ ├── services/
│ │ │ └── padawan-eligibility.ts
│ │ ├── validation/
│ │ │ └── padawan-schema.ts
│ │ └── events/
│ │ └── padawan-registered.ts
│ └── usecases/
│ └── register-padawan.ts
└── infrastructure/
└── db/
├── prisma/
│ ├── migrations/
│ └── schema.prisma
├── prisma.ts
└── repositories/
└── prisma-padawan-repository.ts
この構造は、以下の明確なヘキサゴナルアーキテクチャに従っています：
app/ - Next.jsユーザーインターフェースレイヤーactions/ - フォーム処理用のサーバーアクションcomponents/ - UI/ビジネスの分離を持つReactコンポーネントlib/ - 共有ユーティリティcore/ - 純粋なビジネスロジックdomain/ - モデル、ポート、ビジネスサービスusecases/ - アプリケーションのユースケースinfrastructure/ - 技術的な実装db/ - Prisma設定とリポジトリの実装ドメインはアプリケーションの心臓部です。ここで、技術的な考慮事項とは独立してビジネスルールをコードに変換します。私たちの場合、ドメインはジェダイ・アカデミーへの登録を管理するすべてのルールを表します。
モデルは基本的なビジネス概念を表します。
typescript
イベントはドメインで発生した重要な事実を表します。
typescript
ポートはドメインが外部世界とどのように相互作用するかを定義します。
typescript
ドメインサービスは、エンティティに自然に適合しないビジネスロジックをカプセル化します。
typescript
ユースケースは、ビジネス機能を達成するために異なるドメイン要素間の相互作用を調整します。
typescript
インフラストラクチャは、外部世界と相互作用するためにドメインで定義されたポートを実装します。
prisma
typescript
入力データのバリデーションは、ドメインとの一貫性を確保するためにZodを使用します。
typescript
データベースを生成しましょう。
bash
さらなる探索のために、Prismaはデータベースを可視化するクライアントを提供しています。
bash
typescript
typescript
typescript
これらのコンポーネントはshadcn/uiを使用して、以下の特徴を持つモダンでアクセシブルなユーザーインターフェースを作成します：
すべてがプレゼンテーション層に留まりながら、ビジネスロジックを含まずにヘキサゴナルアーキテクチャに完璧に統合されています。
typescript
typescript
ヘキサゴナルアーキテクチャにより、以下のような特徴を持つアプリケーションを作成することができました：
さらなる展開として以下が考えられます：
覚えておいてください：良いアーキテクチャはフォースのようなもの - バランスが取れていなければなりません！ 🌟
[翻訳終了]