お問い合わせ・ご相談についてはこちら

next.js13

ComputerScience

Next.js 13 middlewareでトークン認証を実装した事を振り返る[firebase]

こんにちは。今回は、前回の記事の続きにあたります。前回の記事では、firebaseのAuthを使って認証を得たユーザーのみページにアクセスできるようにページブロック機能を実装する方法を、セキュリティガン無視の入り口として書きました。ただ、そ...
ComputerScience

.env が上手く動かないを解決した話

こんにちは。今回は、Next.js 13で.envファイルを記述したら、なかなか上手くいかなかったので、備忘録として残します。状況と問題点:Next.js を使っています。(これが解決キーでした。).envファイルには、REACT_APP_...
ComputerScience

Next.js 13 middleware内でfirebase-admin SDKは使えない。

こんにちは。今回はmiddlewareを使って、ユーザーログイン後のトークン認証をmiddleware内で実装しようとしたが、エラーがでたことについて話していきます。なお、本記事は、「Next.js 13でfirebaseを使ったログインと...
ComputerScience

firebaseでログイン後、ページブロックはどう行われるか。[初心者向け]

こんにちは。今回は、firebaseのauthを使ってログインは出来たけど、そのログイン状態をどう察知して、ページブロック(例えばログインしていないユーザーがページに入れないようにする)を実装するか。を書いていこうと思います。今回はその基礎...
ComputerScience

Next.js 13 ではどのようにレンダリングされているのか?[初心者向けにまとめてみた]

こんにちは。今回はnext.js 13を扱うにあたって、レンダリングが実際どのように動いているかちゃんと把握出来ていない人もしっかりここを把握しておこうということで、初心者にも分かりやすく、そして自分のまとめ用にこの記事を進めていこうと思い...
ComputerScience

next.js 13 Hooksをサーバーサイドで使いたい

こんにちは。今回は、useStateやuseEffectをpage.tsxなどのサーバーサイドコンポーネントで使いたいが、useStateとかはクライアントサイドでしか使えないからサーバーサイドでは使えないよとエラーを吐かれたので対処法と調...
ComputerScience

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....
ComputerScience

next.13 フォントスタイルの変更方法について

こんにちは。今回はnext.13のlayout.tsxファイルを使って、googleフォントから選んできたフォントスタイルを適用したいと思います。googleフォントサイトから好きなフォントを選ぶフォントスタイルを以下のGoogle Fon...
ComputerScience

#1 next.js 13で個人開発

こんにちは。今回はnext.js 13以降を使って個人開発してみようということで、シリーズで初心者でも開発環境が整えられるような記事にしていこうと思います!next.js 13からは「App Router」が導入されて、ディレクトリ構造も大...