個人サイトをリニューアルしました!
初版はVanilla Reactで作りましたが、Next.jsの勉強が進みましたので個人サイトのストラクチャーをNext.jsでリファクタリングしました。 ストラクチャーのみではなく、以下のような変更も行いました: 1.コードの整理→Next.jsの特性(SSR/CSR/ServerActionなど)に沿った処理ロジックの見直し、コードの煩雑性の低減と可読性の向上 2.メッセージボードのUX改善→メッセージ送信キーをEnterからCtrl(⌘)+Enterへ変更し、入力欄の高さを増え、Enterキーで改行できるようにした。 3.背景画像の変更と表示の最適化 4.ホームページ左側の展示内容の変更→「学習用リソース」を「作ったプロジェクト」を展示するようにした 5.ProjectページのGithub Repositoryカードの様式変更→よりモダンな様式へ変更 6.ナビゲーションバーのスタイリング変更→Issue:Next.jsの特性により、MaterialUIのようなCSS in JS式ライブラリとの統合性に問題が存在し、様式を上手く表示できない問題が発生する。(Material UI/Next.jsの公式ドキュメントで提示されたベストプラクティスを実践しても上手く解決できなかった、今後はTailwind CSSでリファクタリングするかどうかは検討中)