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>