nuxt-seo-kit から @nuxtseo/module へ移行する

Hiratake Web は Vue のフレームワークである Nuxt を使用して実装をしています。その Nuxt で、検索エンジン最適化（SEO）をいい感じにしてくれる Nuxt SEO Kit というありがたいパッケージを導入しているのですが、これが 新機能や不具合の修正などを行い Nuxt SEO へ名前を変更してリリース されていました。

Nuxt SEO

新しいバージョンの開発が進められていることは以前から認識はしていたのですが、いつの間にか以前のバージョンのリポジトリの README に「新規で導入するなら、新しい方を導入したほうがいいよ」的な文言が追加されていたのと、現在使用している機能はだいたい揃ってそうということで、新しい方へ移行してみることに。

まだベータ版ではありますが、移行ガイドのページを参考に作業したので、備忘録的な感じで書いておこうと思います。

パッケージの削除と追加

以前のバージョンである nuxt-seo-kit をアンインストールして、新しく @nuxtseo/module をインストールします。私は pnpm を使用しているので、以下のコマンドを実行しました。

$ pnpm remove nuxt-seo-kit
$ pnpm add -D @nuxtseo/module

新しいバージョンのパッケージをインストールした後、nuxt.config.ts でモジュールを読み込みます。

export default defineNuxtConfig({
  // extends: ['nuxt-seo-kit'],
  modules: ['@nuxtseo/module'],
  ...
})

サイト構成の変更

以前のバージョンである nuxt-seo-kit では、ウェブサイトの名前やドメインなどの情報を nuxt.config.ts の runtimeConfig 内に設定していましたが、@nuxtseo/module では site で設定するように変更となっているようです。

ドキュメントを確認しながら、とりあえず設定できそうな項目を入れてみます。

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      // siteUrl: process.env.NUXT_PUBLIC_SITE_URL || 'https://hiratake.dev',
      // siteName: 'Hiratake Web',
      // siteDescription: 'ひらたけの個人ウェブサイトです。',
      // language: 'ja',
      // trailingSlash: true,
    },
  },
  site: {
    url: 'https://hiratake.dev',
    name: 'Hiratake Web',
    description: 'ひらたけの個人ウェブサイトです。',
    defaultLocale: 'ja',
    trailingSlash: true,
    identity: {
      type: 'Person',
    },
    twitter: '@Hirotaisou2012',
  },
})

runtimeConfig から値を削除したので、ページ内でその値を取得して表示する部分でエラーが出るようになりました。ドキュメントがまだ準備中となっていて正しい方法かどうかは謎ですが、どうやら useSiteConfig というコンポーザブルがあるようだったので、useRuntimeConfig を使用して値を取得していた部分をこれに置き換えました。

私は app.config.ts や nuxt.config.ts など、何箇所かに散らばって定義されているウェブサイトについての情報をまとめて取得できるように useWebsite というコンポーザブルを用意していたので、その部分を書き換えます。

export const useWebsite = () => {
  // const config = useRuntimeConfig()
  const site = useSiteConfig()
  const app = useAppConfig()

  return computed(() => ({
    site: {
      // url: config.public.siteUrl,
      // name: config.public.siteName,
      // description: config.public.siteDescription,
      url: site.url,
      name: site.name,
      description: site.description,
    },
    author: app.author,
    ...
  }))
}

Vue ファイルの変更

.vue ファイルに記述しているタグの内容も変更していきます。以前は app.vue などに <SeoKit /> というコンポーネントを追加する記述が必要でしたが、新しいバージョンでは不要とのことなので、削除します。

<template>
  <!-- <SeoKit /> -->
  <NuxtPage />
</template>

また、サイト内リンクの末尾のスラッシュが正しく設定されているかを確認できるらしい <SiteLink> というコンポーネントがあるようなので、サイト内リンクが設定されていいる <NuxtLink> をこちらに置き換えてみました。

動かしてみる

とりあえず一通り変更の対応が終わったので動かしてみると、以前のバージョンでできていたことはちゃんとできていそうな雰囲気です。

外部リンクがリンク切れになっていないかをチェックするリンクチェッカーの動作が、謎に 404 の警告を出しまくっていてなんだか怪しい気がしますが、そこは正式版がリリースされる頃にはいい感じになるのでしょうか…。ビルドでエラーになるとかは無さそうなので、とりあえずしばらくはこのままでいこうかなと思います。