プログラミング Next.js 13 middlewareでトークン認証を実装した事を振り返る[firebase]
こんにちは。今回は、前回の記事の続きにあたります。 前回の記事では、firebaseのAuthを使って認証を得たユーザーのみページにアクセスできるようにページブロック機能を実装する方法を、セキュリティガン無視の入り口として書きました。 ただ...
next.js13
プログラミング 
プログラミング .env が上手く動かないを解決した話
こんにちは。今回は、Next.js 13で.envファイルを記述したら、なかなか上手くいかなかったので、備忘録として残します。 状況と問題点： Next.js を使っています。(これが解決キーでした。).envファイルには、 REACT_A...
プログラミング Next.js 13 middleware内でfirebase-admin SDKは使えない。
こんにちは。今回はmiddlewareを使って、ユーザーログイン後のトークン認証をmiddleware内で実装しようとしたが、エラーがでたことについて話していきます。 なお、本記事は、「Next.js 13でfirebaseを使ったログイン...
プログラミング firebaseでログイン後、ページブロックはどう行われるか。[初心者向け]
こんにちは。今回は、firebaseのauthを使ってログインは出来たけど、そのログイン状態をどう察知して、 ページブロック(例えばログインしていないユーザーがページに入れないようにする)を実装するか。 を書いていこうと思います。今回はその...
プログラミング Next.js 13 ではどのようにレンダリングされているのか？[初心者向けにまとめてみた]
こんにちは。今回はnext.js 13を扱うにあたって、レンダリングが実際どのように動いているか ちゃんと把握出来ていない人もしっかりここを把握しておこうということで、初心者にも分かりやすく、そして自分のまとめ用にこの記事を進めていこうと思...
プログラミング next.js 13 Hooksをサーバーサイドで使いたい
こんにちは。今回は、useStateやuseEffectをpage.tsxなどのサーバーサイドコンポーネントで使いたいが、 useStateとかはクライアントサイドでしか使えないからサーバーサイドでは使えないよとエラーを吐かれたので対処法と...
プログラミング Error: Event handlers cannot be passed to Client Component props. を出来るだけページ遷移速度を落とさずに解決する
はじめに こんにちは。今回はnext.js 13で開発しているときにに、on click()を実装したんですが、Error: Event handlers cannot be passed to Client Component props...
プログラミング next.13 フォントスタイルの変更方法について
こんにちは。今回はnext.13のlayout.tsxファイルを使って、googleフォントから選んできたフォントスタイルを適用したいと思います。 googleフォントサイトから好きなフォントを選ぶ フォントスタイルを以下のGoogle F...
プログラミング #1 next.js 13で個人開発
こんにちは。今回はnext.js 13以降を使って個人開発してみようということで、シリーズで初心者でも開発環境が整えられるような記事にしていこうと思います！ next.js 13からは「App Router」が導入されて、ディレクトリ構造も...