メインコンテンツへスキップ
Ihab Khaled
メニュー
すべてのプロジェクト

オープンソースプロジェクト

NextRanger

アーキテクチャ上の意思決定を、文書化して忘れられるのではなく、ツールによって強制する厳格なNext.jsエンジニアリング基盤。

概要

NextRangerは、私が本格的なフロントエンド開発で使用する出発点です。前提となる考え方は、チームが合意しても強制できない規約は時間とともに崩れていくというもの。そのため重要なルールはすべて、READMEの一節としてではなく、lintルール、型、あるいは失敗するテストとして表現されます。

アーキテクチャ

Server Componentsをデフォルトとする Next.js App Router、厳格なTypeScript、そして一方向の依存関係を持つモジュールファーストの構成:ルートはモジュールに依存し、モジュールは共通コードに依存し、共通コードはベンダーラッパーに依存する、という一方通行の関係です。サードパーティパッケージにはそれぞれ唯一の責任を持つラッパーがあり、アップグレードとエラー処理は単一のレビュー済みファイルに集約されています。

エンジニアリング

カスタムESLintプラグインがレイヤーポリシー、パッケージの所有権、TSXのみに限定されたコンポーネント、翻訳のカバレッジを強制します。VitestとPlaywrightがユニット、統合、E2E、アクセシビリティ、ビジュアルテストをカバーし、RTL対応の国際化、nonceベースのCSP、そしてマージ前にすべてのセットを実行するCIゲートも備えています。

役割
著者。アーキテクチャモデル、カスタムESLintルールセット、品質ゲートを設計。
カテゴリ
フルスタック
スタック
Next.jsReactTypeScriptESLintVitestPlaywrightTailwind CSS
言語
TypeScript