next firebase ssr

next.js + firebase + getServersideProps

このプロジェクトは、next.jsおよびfirebase認証を使用して、認証されたサーバー側のレンダリングを実装する方法を示しています。

2020年11月19日の更新：リフレッシュせずに1時間後に火ベーストークンが期限切れになる場所でバグが修正されました。すべてのトークンは、10分ごとにフォースリフレッシュされています。

2020年11月9日の更新：このレポは、 [email protected]で導入されたリダイレクト機能を使用するように更新されました。現在、このアプローチへのこのアプローチのために、次のcanaryリリースに参加している必要があります（ yarn add next@canary ）。

バージョン

• next@10
• react@17
• firebase@8
• [email protected]
• [email protected]

ドキュメント

完全なウォークスルーとドキュメントはこちら：next.jsとfirebaseを使用したサーバー側のレンダリングを認証します。

使い方

この例を実行するには：

• レポをクローンする： git clone [email protected]:vriad/next-firebase-ssr.git
• ディレクトリに移動する： cd next-firebase-ssr
• 依存関係をインストール： yarn
• まだいない場合は、FireBaseプロジェクトを作成します。コンソールの[認証]タブに移動し、「サインインメソッド」に移動し、「電子メール/パスワード」を有効にしてください。
• Firebaseクライアントの資格情報をfirebaseClient.tsに追加します。これらを取得するには、FireBaseコンソール>プロジェクトを開く> [ギアアイコン]> [プロジェクト設定]> [一般]> [アプリ]> [Firebase SDKスニペット]> [構成]ラジオボタン> [コピー/貼り付け]をクリックします。
• プロジェクトにサービスアカウント（管理者）資格情報を追加します。これを行うには、FireBaseコンソール>プロジェクトを開く> [ギアアイコン]> [プロジェクト設定]> [サービスアカウント]> [node.js]> [新しいプライベートキー]を生成します。ダウンロードするJSONファイルを開きます。次に.env.local.exampleのコピーを作成し、 .env.localに変更します。これは、秘密のFirebase資格情報を配置するファイルです。秘密キーJSONファイルから新しい.env.localファイルに値をコピー/貼り付けます： privateKeyはPRIVATE_KEYになり、 project_id PROJECT_IDになり、 clientEmail CLIENT_EMAILになります。
• yarn devを実行します
• localhost:3000にアクセスしてください