ポートフォリオサイトが完成しました！

空き時間を見てはちまちまとNext.jsで書いていたポートフォリオサイトを公開しました！

今後も追加する内容があればマイナーアップデートを続けていくつもりです😊

システム構成

AWS環境へデプロイしようというのは当初から思っていたので、お手軽にデプロイできるserverless-nextjsを使って、CloudFrontで配信しています。

Next.jsはデフォルトだとSSRを有効化して動作するので、SSR用のサーバを用意する必要がありますが、serverless-nextjsを使うと自動的にSSR用のLambdaを生成してくれるので、特にこちらでインフラの設定をする必要もなかったのが嬉しい。

ブラウザでデバッグ中に、ソースコードを修正すると再描写してくれる機能があるのですが、Angularと比較すると早く感じました。デザイン修正の時もストレスも少なくコーディングできたと思います。

一方で、今回画像のプレビュー表示用のライブラリとして「Luminous」を使ったのですが、Fast Refresh後にもRefresh前の処理が残存しているようで、二重にプレビュー表示が実行されてしまっていました。

外部のライブラリの挙動を確認する場合は、手動でブラウザリロードをした方が良いかもしれません。

pagesディレクトリにComponentを入れておけば、自動的にルーティングが設定されるのは嬉しい機能ですね。

HTMLElementのclassの命名でいつもどういうprefixを付けようかどういう単語にすべきか悩むのですが、CSS Modulesがサポートされているので、考える時間が減りました。

まだ全てのNext.jsの機能を使いこなせているわけでは無いですが、Componentの記法はReactそのままなので行き詰まることは無かったです。

ブラウザの開発者ツールまで開かなくてもエラー箇所が特定できるので必須ではないけど地味に有難い。そういえばRailsも似たような例外表示をしてくれましたね。

これは日頃Angularを書いている私の個人的な見解です😅

記述が少ないことが一概に正義ではないですが、限りなく必要な情報だけが書いてある方がやはり見やすいです。