Nuxt.jsmicroCMS

ブログをNuxt3にアップデートしました

更新日:2022-11-20 公開日:2022-11-20

このブログは今までNuxt2 + microCMSで運営をしていました。
去る11月16日に待ちに待ったNuxt3の正式リリースがされたこともあり、本日にNuxt3ベースに移行をしました。

移行方法について

結論から言うと、正確な意味での移行作業はほとんどしていなくて、Nuxt3で1から同じようなものを作り直した、という感じです。

ブログ記事と紐づくタグがあるだけの、規模の大きくないサイトなので、こういう方法がとれたのかと思います。
手順としてはNuxt3でアプリを作る→Githubにpush→Netlifyの連携リポジトリを変更というシンプルな流れで移行ができました。

つまづいた点について

rcバージョンのころから記事の表示だったり、ページネーションやキーワード検索といった基本的な機能は搭載できていました。
ただ、本番環境を動かすにあたりGoogle Adsenseだったり、Google Search Consoleに飛ばすsitemap周りの設定に不安がありました。

Google Adsense対応

Nuxt2でもお世話になっていたnuxtjs/google-adsenseがバージョン2.1.0からNuxt3に対応している感じがあったので、こちらを採用してみました。
使い方も特に変わってないみたいですが、今のところちゃんと動いている感じがします。

sitemap生成対応

こちらは生成ライブラリがまだNuxt3に対応していないみたいです。
自力でアプリから生成する方法もあるみたいですが、自分はどちらかというとPythonに慣れているので、Netlifyビルド時にPythonコードで生成する方法を採用しました。
以前に書いた記事に内容が詳しいです。
「Nuxt3 Netlifyビルド時にsitemapを生成する方法」

こちらも今のところ正常にGoogleにsitemapを送信できています。

今後の課題

なぜかSSGするとリンクがつながらない(?)エラーが起きました。
なので、現状はyarn buildする形でサイトを動かしています。
最終的にはSSGをしたいと思っているので、情報収集を続けてしっかりとやり切りたいです。

ブログのソースコード

Githubに公開しました。
https://github.com/qlitre/qlitre-weblog-nuxt3