プログラミング #2 next.js 13で個人開発 フロント開発を振り返る
こんにちは。今回は、前回に引き続く「next.js 13 で個人開発」シリーズになります。 今回でフロントエンドの開発が大体終わったので、実際に個人で開発するのにnext.js 13は向いていたか。 もっとこうすれば良かった！などの反省点な...
プログラミング 
プログラミング css modules でif分岐をさせる方法
こんにちは。今回は、css modules を使っていた時、if分岐、つまり条件を満たしていれば、このクラスを適応させたい！を実現する方法を紹介します。 書き方 書き方は以下の画像を参考に説明していきます。 まず、isActiveで条件を指...
プログラミング スクロールバーのカスタムで詰まった話
こんにちは。今回は、ブラウザ等でよく見かけるスライドバー これをカスタムしたいと思ったのですが、検索してでてくる、::-webkit-scrollbarやら::-webkit-scrollbar-thumbやら::-webkit-scrol...
プログラミング next.js 13 でイベントハンドラを実装した方法
こんにちは。今回は、next.js 13 でページコンポーネントにイベントハンドラ(onclickとか)を実装しようとしたらエラー Unhandled Runtime ErrorError: Event handlers cannot be...
プログラミング next.js 13 のページ遷移速度は何故速いのか
こんにちは。今回はnext.js13でページ遷移速度が速いと言われているが、どうやってその速さを実現しているのかを調べてみました。 SSRとクライアントサイドナビゲーションを使う next.js では、ページの表示にSSR(サーバーサイドレ...
プログラミング next.js Linkタグによる下線を消す方法
こんにちは。今回は、next.js のLinkタグを使用したときに出る下線がtext-decoration: none;を使用してもなかなか消えないなかったので、備忘録として解決策を残しておきます。 問題点 next.jsでLinkタグを使...
プログラミング next.13 フォントスタイルの変更方法について
こんにちは。今回はnext.13のlayout.tsxファイルを使って、googleフォントから選んできたフォントスタイルを適用したいと思います。 googleフォントサイトから好きなフォントを選ぶ フォントスタイルを以下のGoogle F...
プログラミング next.js のレンダリングの仕組みを公式Docを元に理解してみた
こんにちは。今回は、next.jsのサーバーサイドレンダリング(SSR)とページ遷移時のレンダリング速度について理解した範囲で書いていければと思います。 何故SSRの方がレンダリング速度がはやいのか？ サーバーサイドレンダリング(SSR)と...
プログラミング reactとnext.js 13の再レンダリング速度は同じであるか？[chatGPT]
ReactとNext.jsの再レンダリングのメカニズムは同じ ReactとNext.jsの再レンダリングの基本的なメカニズムは、確かに同じです。両方ともReactの仮想DOMと差分検出のメカニズムを使用して効率的な再レンダリングを行います。...
プログラミング #1 next.js 13で個人開発
こんにちは。今回はnext.js 13以降を使って個人開発してみようということで、シリーズで初心者でも開発環境が整えられるような記事にしていこうと思います！ next.js 13からは「App Router」が導入されて、ディレクトリ構造も...