ComputerScience next.js 13 Hooksをサーバーサイドで使いたい
こんにちは。今回は、useStateやuseEffectをpage.tsxなどのサーバーサイドコンポーネントで使いたいが、useStateとかはクライアントサイドでしか使えないからサーバーサイドでは使えないよとエラーを吐かれたので対処法と調...
ComputerScience 
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 #2 next.js 13で個人開発 フロント開発を振り返る
こんにちは。今回は、前回に引き続く「next.js 13 で個人開発」シリーズになります。今回でフロントエンドの開発が大体終わったので、実際に個人で開発するのにnext.js 13は向いていたか。もっとこうすれば良かった！などの反省点なども...
ComputerScience css modules でif分岐をさせる方法
こんにちは。今回は、css modules を使っていた時、if分岐、つまり条件を満たしていれば、このクラスを適応させたい！を実現する方法を紹介します。書き方書き方は以下の画像を参考に説明していきます。まず、isActiveで条件を指定し、...
ComputerScience スクロールバーのカスタムで詰まった話
こんにちは。今回は、ブラウザ等でよく見かけるスライドバーこれをカスタムしたいと思ったのですが、検索してでてくる、::-webkit-scrollbarやら::-webkit-scrollbar-thumbやら::-webkit-scroll...
ComputerScience next.js 13 でイベントハンドラを実装した方法
こんにちは。今回は、next.js 13 でページコンポーネントにイベントハンドラ(onclickとか)を実装しようとしたらエラーUnhandled Runtime ErrorError: Event handlers cannot be ...
ComputerScience next.js 13 のページ遷移速度は何故速いのか
こんにちは。今回はnext.js13でページ遷移速度が速いと言われているが、どうやってその速さを実現しているのかを調べてみました。SSRとクライアントサイドナビゲーションを使うnext.js では、ページの表示にSSR(サーバーサイドレンダ...
ComputerScience next.js Linkタグによる下線を消す方法
こんにちは。今回は、next.js のLinkタグを使用したときに出る下線がtext-decoration: none;を使用してもなかなか消えないなかったので、備忘録として解決策を残しておきます。問題点next.jsでLinkタグを使用し...
ComputerScience next.13 フォントスタイルの変更方法について
こんにちは。今回はnext.13のlayout.tsxファイルを使って、googleフォントから選んできたフォントスタイルを適用したいと思います。googleフォントサイトから好きなフォントを選ぶフォントスタイルを以下のGoogle Fon...
ComputerScience next.js のレンダリングの仕組みを公式Docを元に理解してみた
こんにちは。今回は、next.jsのサーバーサイドレンダリング(SSR)とページ遷移時のレンダリング速度について理解した範囲で書いていければと思います。何故SSRの方がレンダリング速度がはやいのか？サーバーサイドレンダリング(SSR)とは、...