Nuxt.jsで作成してNetlifyにデプロイしたポートフォリオサイトが遅いので、Next.jsに変更する

Nuxt.jsで作成して、Netlifyにデプロイしたほう

ブラウザリフレッシュをしています
画像表示が遅い...

パフォーマンス(Nuxt.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

なぜ移行したか

• Netlifyにデプロイした場合、画像表示が遅い
• TypeScriptをより活かしたいからReactにしたい
• React使うならNext.js使ってVercelにデプロイしたい

苦労したこと

• スタイル(CSS)
• 環境変数の使い方
• Nuxt.jsのasyncData関数はNext.jsでは何なのか

スタイル(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に含める。

https://nextjs.org/docs/basic-features/environment-variables

移行後のパフォーマンス

ブラウザリフレッシュをしています
爆速。（もはやブラウザリフレッシュしてるのかもわからないくらい）

記事化する前に問い合わせフォーム作る
の前にいったんモンハンする

問い合わせフォームはめんどくさくなったので、Googleフォームにする

問い合わせフォームも作った
明日記事化する...はず

VercelとNetlify比較してくださってた
https://zenn.dev/catnose99/scraps/6780379210136f