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

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

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

パフォーマンス(Nuxt.js)

wattanx

環境

以前
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

wattanx

なぜ移行したか

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

wattanx

苦労したこと

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

wattanx

スタイル(CSS)

Vuetifyにゴリゴリに依存していたため、自前で実装する必要があった。
　→　Vuetifyのデザインが気に入ってたため、他のCSSフレームワークを選択しなかった。

wattanx

環境変数の使い方

なんか「.env」とか「.env.local」とか種類多すぎてわからん。

以下Next.js v9.4以上の場合

| ファイル名 | 定義するもの |
| ---- | ---- | ---- |
| .env | すべての環境に対するデフォルト設定。 |
| .env.local | すべての環境に対する公開したくない設定。 |
| .env.[environment] | 特定の環境に対するデフォルト設定。 .env.developmentなど |
| .env.[environment].local | 特定の環境に対する公開したくない設定。.env.development.localなど |

クライアント側で使う環境変数はNEXT_PUBLIC_をつけないといけない。

.env