Next.js ベースのコンポーネントを条件付きでレンダリングする: リクエストが認証された Firebase ユーザーからのものであるかどうかを判断するにはどうすればよいですか?
<p><strong>注: </strong>Next.js 13 と <code>app/</code> ディレクトリを使用しています。 </p>
<p>私は Firebase と Next.js を学んでいて、おもちゃの問題を解決する方法を理解しようとしています。このような <code>Home()</code>Component</p> があるとします。 <p><strong><code>/app/page.jsx</code></strong></p> <pre class="brush:php;toolbar:false;">デフォルト関数 Home() をエクスポート { 戻る （ <メイン> <h1>Hello World</h1> <p>認証されたユーザーのみがこのテキストを表示できます</p> </メイン> ) }</pre> <p>私の目標は、ページをリクエストしているユーザーがログインしているユーザーかどうかに基づいて、<code><p>...</p></code> 内のすべてを条件付きでレンダリングすることです。 Firebase は、JWT、Next.js 13 を使用してこのコンポーネントをサーバー側でレンダリングするため、これは可能だと思いますが、その方法がわかりません。 </p> <p>onAuthStateChanged については知っていますが、私の知る限り、これはクライアント側でのみ使用できます。 (知識のあるユーザーは、引き続きこの保護されたコンテンツを表示できます。) このコンテンツを <em>サーバー側</em> で保護するにはどうすればよいですか? </p>
<p>私は Firebase と Next.js を学んでいて、おもちゃの問題を解決する方法を理解しようとしています。このような <code>Home()</code>Component</p> があるとします。 <p><strong><code>/app/page.jsx</code></strong></p> <pre class="brush:php;toolbar:false;">デフォルト関数 Home() をエクスポート { 戻る （ <メイン> <h1>Hello World</h1> <p>認証されたユーザーのみがこのテキストを表示できます</p> </メイン> ) }</pre> <p>私の目標は、ページをリクエストしているユーザーがログインしているユーザーかどうかに基づいて、<code><p>...</p></code> 内のすべてを条件付きでレンダリングすることです。 Firebase は、JWT、Next.js 13 を使用してこのコンポーネントをサーバー側でレンダリングするため、これは可能だと思いますが、その方法がわかりません。 </p> <p>onAuthStateChanged については知っていますが、私の知る限り、これはクライアント側でのみ使用できます。 (知識のあるユーザーは、引き続きこの保護されたコンテンツを表示できます。) このコンテンツを <em>サーバー側</em> で保護するにはどうすればよいですか? </p>
