Nuxt3が正式にリリースされましたね！
みなさんこんにちは！
イザナギです。
さて、やっとNuxt3がやっとリリースされましたね！！
https://nuxt.com/
待ってたよ...
長かったな〜
rcバージョンから制作を続けて、10ヶ月くらい？にしてやっと正式にリリース。
※ちなみにこちらのブログもNuxt3で作成しております。
とりあえずrcから正式版にアップデートするか。
アップデートするとrc14がダウンロードされる？
npx nuxi upgardeを実施したところ、なぜかrc14のバージョンがダウンロードされた？
「npx nuxi clean」や「yarn.lock」を削除して、再ダウンロードしたら治ったし、まあいいか。
runtimeConfigの書き方がrcと変わっていた
アップデート対応が完了した後に、早速「yarn generate」を実施したら、なぜかAPIと通信できずに静的ファイルが作成されなかった...
原因調べたところ、「nuxt.config.ts」内の、「runtimeConfig」の書き方が多少変わったようで、APIのURLに使用していた環境変数が「undefind」となっていました。
rcバージョンまでは下記書き方だったと思いますが、
privateRuntimeConfig: {
MICRO_CMS_API_KEY: process.env.MICRO_CMS_API_KEY,
MICRO_CMS_SERVICE_DOMAIN: process.env.MICRO_CMS_SERVICE_DOMAIN,
},
publicRuntimeConfig: {
FORM_RUN_URL: process.env.FORM_RUN_URL,
TWITTER_MY_USER_ID: process.env.TWITTER_MY_USER_ID,
HOMEPAGE_ROOT_URL: process.env.HOMEPAGE_ROOT_URL,
CONNPASS_NICKNAME: process.env.CONNPASS_NICKNAME,
GOOGLE_ANALYTICS_ID: process.env.GOOGLE_ANALYTICS_ID,
RELETE_TITLES_API_URL: process.env.RELETE_TITLES_API_URL,
SUGGEST_API_URL: process.env.SUGGEST_API_URL,
SEARCH_API_URL: process.env.SEARCH_API_URL,
TOPIC_API_URL: process.env.TOPIC_API_URL,
RELETE_TITLES_API_URL_V2: process.env.RELETE_TITLES_API_URL_V2,
MY_EVENTS_API_URL: process.env.MY_EVENTS_API_URL,
HOLIDAY_JP_API_FILENAME: process.env.HOLIDAY_JP_API_FILENAME,
HOLIDAY_JP_API_URL: process.env.HOLIDAY_JP_API_URL,
ADSENCE_CLIENT_ID: process.env.ADSENCE_CLIENT_ID
},
しかし、正式リリース版では下記の書き方に変わっていました。
runtimeConfig: {
MICRO_CMS_API_KEY: process.env.MICRO_CMS_API_KEY,
MICRO_CMS_SERVICE_DOMAIN: process.env.MICRO_CMS_SERVICE_DOMAIN,
public: {
FORM_RUN_URL: process.env.FORM_RUN_URL,
TWITTER_MY_USER_ID: process.env.TWITTER_MY_USER_ID,
HOMEPAGE_ROOT_URL: process.env.HOMEPAGE_ROOT_URL,
CONNPASS_NICKNAME: process.env.CONNPASS_NICKNAME,
GOOGLE_ANALYTICS_ID: process.env.GOOGLE_ANALYTICS_ID,
RELETE_TITLES_API_URL: process.env.RELETE_TITLES_API_URL,
SUGGEST_API_URL: process.env.SUGGEST_API_URL,
SEARCH_API_URL: process.env.SEARCH_API_URL,
TOPIC_API_URL: process.env.TOPIC_API_URL,
RELETE_TITLES_API_URL_V2: process.env.RELETE_TITLES_API_URL_V2,
MY_EVENTS_API_URL: process.env.MY_EVENTS_API_URL,
HOLIDAY_JP_API_FILENAME: process.env.HOLIDAY_JP_API_FILENAME,
HOLIDAY_JP_API_URL: process.env.HOLIDAY_JP_API_URL,
ADSENCE_CLIENT_ID: process.env.ADSENCE_CLIENT_ID
}
},
コード的には多少直すだけだったので、さっさと直し、再度「yarn generate」を実施したところ、静的ファイルが作成されました！
これで自分のブログも正式リニューアルが完了しました。
まとめ
Nuxt3がリリースされて間もないですが、静的ファイルを作成するスピードが体感nuxt2に比べて早くなった気がしています。
これからもアップデートや、nuxt-communityのコンテンツも徐々にnuxt3に対応してくると思うので、対応次第、こちらのブログでも利用していこうかな？