ポートフォリオサイトをNuxt.jsからNext.jsに置き換える
はじめに
社会人 3 年目に入り、何かしらアウトプットを作ろうかなということでポートフォリオサイトを作ることにしました。
最初は趣味で勉強していて Nuxt.js で作成し Netlify にデプロイしましたが、いろいろあって結局 Next.js に置き換えました。
モンハンライズを買ってしまったので、なかなか進まなかったですが無事置き換えることができたのでいろいろ詰まったところとか書こうと思います。
環境
-
以前
Nuxt.js 2.15.3
TypeScript 4.1.5
vuex-module-decorators 1.0.1
Vuetify -
移行後
Next.js 10.1.2
TypeScript 4.2.3
データ管理
API は micro CMS を利用しています。
職務経歴とかスキルは micro CMS 経由で取得しています。
Zenn の記事を表示しているのですが、こちらの記事を参考にさせていただきました。
なぜ移行したか
- Netlify にデプロイした場合、画像表示が遅い
- TypeScript をより活かしたいから React にしたい
- React 使うなら Next.js 使って Vercel にデプロイしたい
苦労したこと
スタイル(CSS)
Vuetify にゴリゴリに依存していたため、自前で実装する必要があった。
→ Vuetify のデザインが気に入ってたため、他の CSS フレームワークを選択しなかった。
環境変数の使い方
なんか「.env」とか「.env.local」とか種類多すぎてわからん。
以下 Next.js v9.4 以上の場合
| ファイル名 | 定義するもの |
|---|---|
| .env | すべての環境に対するデフォルト設定。 |
| .env.local | すべての環境に対する公開したくない設定。 |
| .env.[environment] | 特定の環境に対するデフォルト設定。 .env.developmentなど |
| .env.[environment].local | 特定の環境に対する公開したくない設定。.env.development.localなど |
クライアント側で使う環境変数はNEXT_PUBLIC_をつけないといけない。
NEXT_PUBLIC_SITENAME="Test"
ドキュメントを見る感じだと、
.envとか.env.[environment]はレポジトリに含めてデフォルト設定として利用する。
.env.localとか.env.[environment].localは公開したくない API キーとか変数を設定して、.gitignoreに含める。って感じでした。
Nuxt.js の asyncData 関数は Next.js では何なのか
SSG で作成する場合はgetStaticPropsでした。
getInitialPropsじゃないのね。
実装は以下を参考にすればできました。
百竜夜行はどう攻略するか
- 里守バリスタとか自動型の設備をちゃんと設置する
- 反撃の狼煙が出てるときは、武器で攻撃する。
- 青いマークが出てる関門を攻撃する敵を優先して倒す
- 気合
友達の少ない私は一人でイブシマキヒコに挑みました。
移行前のパフォーマンス
ブラウザリフレッシュをしています
画像表示が遅い...
移行後のパフォーマンス
ブラウザリフレッシュをしています
爆速。（もはやブラウザリフレッシュしてるのかもわからないくらい）
まとめ
Netlify 無料プランの CDN は日本リージョン未対応だからっていうのが原因なんですかね。
パフォーマンスが気になるなら Vercel がいいかなーって感じました。
あと React を一から勉強する必要がありましたが、チュートリアルやってあとはググればなんとかなりました。
個人的に使い分けがまだわからないと感じるのは、クラスコンポーネントと関数コンポーネントの使い分け。
感覚的には、関数コンポーネントが使いやすいのだがどう使い分けるのか。
まあなにより
一狩りいこうぜ！
Vercel と Netlify の比較は以下のスクラップがわかりやすいと思いました。
Discussion