Next.js アプリに Cognito の認証を良い感じに設定する

Next.js はほとんど React アプリ開発のスタンダードになっているようですが、認証機能の実装に少し困りました。 要件は以下です🧐 AWS Cognito を使いたい なるべく早く構築したい セキュリティを犠牲にしたくない 今回は cognito を Next.js に良い感じに埋め込む方法をやってみたいと思います！！ 細かい部分の解説まではしませんので、コードを確認してみたい方はこちらをどうぞ🙌 やる Cognito 設定 ほとんどテンプレート通りなのでざっくりいきます！ ユーザープールを作成しますが、「デフォルトを確認する」でOKです。 基本はデフォルトですが、アプリクライアントだけは設定が必要なのでここで済ませましょう。名前を入力するだけでOKです。 ユーザープールが正常に作成されればOKです。 認証関係の画面には Hosted UIを利用するのでアプリクライアントを統合