空き時間を見てはちまちまとNext.jsで書いていたポートフォリオサイトを公開しました！
今後も追加する内容があればマイナーアップデートを続けていくつもりです😊
システム構成
AWS環境へデプロイしようというのは当初から思っていたので、お手軽にデプロイできるserverless-nextjsを使って、CloudFrontで配信しています。
https://github.com/serverless-nextjs/serverless-next.js
Next.jsはデフォルトだとSSRを有効化して動作するので、SSR用のサーバを用意する必要がありますが、serverless-nextjsを使うと自動的にSSR用のLambdaを生成してくれるので、特にこちらでインフラの設定をする必要もなかったのが嬉しい。
Next.jsで開発してみての所感
Fast Refreshが早い
ブラウザでデバッグ中に、ソースコードを修正すると再描写してくれる機能があるのですが、Angularと比較すると早く感じました。 デザイン修正の時もストレスも少なくコーディングできたと思います。
一方で、今回画像のプレビュー表示用のライブラリとして「Luminous」を使ったのですが、Fast Refresh後にもRefresh前の処理が残存しているようで、二重にプレビュー表示が実行されてしまっていました。
外部のライブラリの挙動を確認する場合は、手動でブラウザリロードをした方が良いかもしれません。
ルーティング用の記述がいらないのでページの追加・削除が楽
pagesディレクトリにComponentを入れておけば、自動的にルーティングが設定されるのは嬉しい機能ですね。
CSS Modulesのおかげでクラス名に悩まない
HTMLElementのclassの命名でいつもどういうprefixを付けようかどういう単語にすべきか悩むのですが、CSS Modulesがサポートされているので、考える時間が減りました。
Reactの文法を知っていればそこまで勉強コストが高くない
まだ全てのNext.jsの機能を使いこなせているわけでは無いですが、Componentの記法はReactそのままなので行き詰まることは無かったです。
デバッグ時に例外をブラウザに出力してくれる
ブラウザの開発者ツールまで開かなくてもエラー箇所が特定できるので必須ではないけど地味に有難い。 そういえばRailsも似たような例外表示をしてくれましたね。
記述量が少ない
これは日頃Angularを書いている私の個人的な見解です😅
記述が少ないことが一概に正義ではないですが、限りなく必要な情報だけが書いてある方がやはり見やすいです。
