本記事では、Next.jsプロジェクトにFirebase Authenticationを組み込み、サインイン機能を実装するとともに、HOC(高階コンポーネント)を使用してサインインユーザーのみが閲覧できるページを作成していきます。 Next.jsプロジェクトの準備 サインインユーザーのみ見られるコンポーネントの作成 必要となるパッケージやDB接続ファイルの準備 FirebaseでAuthentication設定 index.jsの書き換え HOC(高階コンポーネント)の作成 引数でComponentを受ける ユーザー認証されるまではstateで読み込みが「Loading」 authUserで認証の可否を判別 dashboard.jsへ追記 index.jsに追記 サインインをしてみる Next.jsプロジェクトの準備 まずはNext.jsプロジェクトの準備をしていきましょう。 npx cr
![【Next.js】Firebase AuthenticationとHOCを使用してサインイン機能を実装する - Laravelとねころっけくん5.8](https://cdn-ak-scissors.b.st-hatena.com/image/square/9f52eababc1f10c2d8d435474a9730cff839c1c8/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fn%2Fnekorokkekun%2F20190925%2F20190925000003.png)