ComputerScience #2 next.js 13で個人開発 フロント開発を振り返る
こんにちは。今回は、前回に引き続く「next.js 13 で個人開発」シリーズになります。今回でフロントエンドの開発が大体終わったので、実際に個人で開発するのにnext.js 13は向いていたか。もっとこうすれば良かった！などの反省点なども...
ComputerScience
ComputerScience 
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)とは、...
ComputerScience reactとnext.js 13の再レンダリング速度は同じであるか？[chatGPT]
ReactとNext.jsの再レンダリングのメカニズムは同じReactとNext.jsの再レンダリングの基本的なメカニズムは、確かに同じです。両方ともReactの仮想DOMと差分検出のメカニズムを使用して効率的な再レンダリングを行います。し...
ComputerScience #1 next.js 13で個人開発
こんにちは。今回はnext.js 13以降を使って個人開発してみようということで、シリーズで初心者でも開発環境が整えられるような記事にしていこうと思います！next.js 13からは「App Router」が導入されて、ディレクトリ構造も大...