1. イントロダクション
このリポジトリについて
この Hands-on では、The Joke Mail Service という架空のメールサービスを作成しながら、Next.js を使ったアプリケーションを構築する方法を学べます。
対象者は、Next.js Learn を終えた方を想定しています。
そのため、Next.js の基本的な使い方や概念については説明しません。
(必要があれば都度説明しますので、ご安心ください)
それではまず、このリポジトリの構成を確認しましょう。
リポジトリの構成
このリポジトリはモノレポになっており、以下のディレクトリ構成で構成されています。
next-js-hands-on/├── README.md├── apps│ ├── solution│ └── workspace├── backend├── docs├── package.json├── biome.json├── lefthook.yml├── pnpm-lock.yaml└── pnpm-workspace.yamlモノレポとは、複数のプロジェクトを 1 つのリポジトリで管理する方法です。 詳しいメリットなどは割愛しますが、モノレポ構成にすることでアプリケーションのコードや設定をリポジトリないの他のパッケージ（アプリケーション）と共有することができます。
パッケージマネージャーには、pnpm を使用しています。
pnpm は、npm や yarn と同様にパッケージの管理を行うツールですが、pnpm はハードリンクを利用することで、ディスク容量を節約できるという特徴があります。
一般的に npm や yarn よりもpnpmの方が高速にパッケージのインストールができると言われています。
また、Linter と Formatter として、Biome を使用しています。
Biome は、比較的新しいツールで、ESLint や Prettier などで代表されるの Linter や Formatter の機能を一つに統合したツールです。
ESLint と Prettier を組み合わせる際に一部の機能が競合しますが、Biome ではそのような競合を解消する必要がありません。
よって、簡単に設定が完了するので今回は採用しました。
commit や push を hook して、lint と format を実行するようにしています。
このようにする場合は一般的には、huskyやlint-stagedを使うことが多いですが、今回はlefthookを使っています。
パッケージの紹介
改めて、リポジトリの構成を確認しましょう。
next-js-hands-on/├── README.md├── apps│ ├── solution│ └── workspace├── backend├── docs├── biome.json├── lefthook.yml├── package.json├── pnpm-lock.yaml└── pnpm-workspace.yaml今回注目していただきたいのは、
- apps/solution
- apps/workspace
- backend
- docs
の4つのディレクトリです。
apps/solution は、今回のHands-onで完成するアプリケーションのソースコードが格納されています。
何か迷ったり、わからないことがあれば、このディレクトリのソースコードを参照してみてください。
apps/workspace は、今回のHands-onで作業を行うディレクトリです。
このディレクトリで、アプリケーションの開発を行っていきます。
backend は、今回のHands-onで使用するバックエンドのソースコードが格納されています。
このHands-onでは直接触れることはありませんが、アプリケーションの動作には必要なので、気になる方は覗いてみてください。
docs は、このドキュメントが格納されています。
docs は、main ブランチに push されると、自動的にビルドされ、Github Pagesで公開されます。
ci/cd は、Github Actions を使用しています。
まとめ
このドキュメントでは、このリポジトリの構成について説明しました。 次のステップでは、このリポジトリをローカルにクローンして、アプリケーションの開発を始める準備をしましょう。
参考リンク
pnpmについてより詳しく知りたい方は公式サイトを見てみることをお勧めします。 https://pnpm.io/ja/
Biomeについてより詳しく知りたい方は公式サイトを見てみることをお勧めします。 https://biomejs.dev/