ポートフォリオサイトを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の比較は以下のスクラップがわかりやすいと思いました。