はじめに

はじめまして。DELISH KITCHEN開発部の羽馬(@naokihaba)と申します。

私が所属するDELISH KITCHEN開発部では、現在Nuxt3へのアップグレードに向けた取り組みを進めています。

この記事では、私たちが行っているNuxt3へのアップグレードに向けた取り組みについて紹介いたします。

移行背景

私が所属するDELISH KITCHEN開発部では、いくつかのプロダクトでNuxt.jsバージョン2.xを利用しています。

しかしながら、Nuxt.js@2.xのサポートは2024年6月30日に予定されており、Nuxt3にアップグレードする必要が出てきました。

そこで、私たちはNuxt3へのアップグレードに向けて「Nuxt3に移行するべきか、それともNext.jsに移行するべきか」という議論を続けてきました。

Nuxt3への移行を選択した理由

近年、Next.jsは人気を集めており、弊社でもNext.jsを採用するプロダクトがあるため、Next.jsへの移行も選択肢の一つとして考慮しました。

しかしながら、Next.js@13.x で新しく導入された App Router がまだ発展途上であること、そして頻繁に更新されていることを理由に、Next.jsは一定の安定性が求められるシチュエーションにおいてはリスクを伴うかもしれないと考えました。

それに対して、Nuxt3への移行を選択した要因はいくつかあります。

Nuxt3やNuxt Bridgeのマイグレーションガイドが整備されている
Nuxt3への移行についての情報が共有されている
- STORES 株式会社様の登壇資料など、参考にできる資料が豊富に存在します。
Nuxt3のドキュメントが整備されている

これらを総合的に考慮した結果、Next.jsへの移行と比べて、Nuxt3への移行コストが全体的に低いと結論付けました。

移行課題

Nuxt3への移行には、以下のような課題があります。

Nuxt.js v2 から Nuxt3 へのアップグレード
Vue.js v2 から Vue3 へのアップグレード
@Nuxt/axiosからfetch APIへの移行
VuexからPiniaへの移行とする or Vuex4へのアップグレード
Webpack v4からv5へのアップグレード
関係しているパッケージ・ライブラリのアップグレードに伴う修正作業（PostCSS etc...）

これらの課題に対して、私たちは次のようなアプローチを取ることにしました。

移行計画

Nuxt3への移行には、主に2つのアプローチが考えられます。

Nuxt Bridgeを利用したアップグレード
Nuxt.js v2 から Nuxt3 への直接アップグレード

Nuxt2からNuxt3への直接アップグレードも不可能ではありません。

しかしながら、関連するパッケージのアップグレードとそれに伴う修正作業と付随して、移行作業が複雑化することが予想されます。

また、大規模なリリースとなることが予見されるため、Nuxt Bridgeを利用した段階的なアップグレードを選択しました。

移行作業

ここでは、Nuxt3への移行作業の一部をご紹介します。

ただし、移行作業はまだ進行中であり、完了した部分のみをご紹介します。

移行作業が完了した際には、全体の移行作業について詳しくまとめたブログ記事を公開する予定です。

NuxtBridgeへの移行

まず、Nuxt Bridgeへの移行作業について説明します。

Nuxt Bridgeへの移行に際して解決すべき課題は以下の通りです。

Nuxt.jsをバージョン2.15.8から2.17.2へアップグレード
Vue.jsをバージョン2.6.0から2.7.0へアップグレード

Nuxt 2.17.2 へのアップグレード

Nuxt 2.17.2・Vue 2.7.0へのアップグレードについては概ねスムーズに進行しました。

しかし、Nuxt 2.17.2 へのアップグレードを行う際に、バージョン間のリリースノートを確認したところ、Nuxt 2.16.0 からpostcssがv8にアップグレードされた点に注意が必要です。

注視すべきは、postcss.preset.importFromとpostcss.preset.exportToが廃止されていることです。

これにより、特定のソースから変数やミックスインをインポートする機能が失われています。

この問題を解決するため、@csstools/postcss-global-dataを利用することにしました。

PostCSS v8へのアップグレードに関する詳細な作業は、PostCSSの公式リポジトリのWikiにまとめられています。こちらを参照してください。

具体的な設定変更については以下を参照してください。

// nuxt.config.js
export default {
    build: {
        postcss: {
            plugins: {
                '@csstools/postcss-global-data': {
                    files: [
                        'assets/styles/_variables.css',
                    ],
                },
            },
        },
    }
}

まとめ

この記事では、Nuxt3へのアップグレードに向けた取り組みについて紹介しました。

Nuxt3への移行には、いくつかの課題がありますが、Nuxt Bridgeを利用した段階的なアップグレードを進めることで、移行作業を進めています。

移行作業が完了した際には、全体の移行作業について詳しくまとめたブログ記事を公開する予定です。

エブリーで一緒に働くエンジニアを募集しています

最後になりますが、エブリーでは、一緒に働くエンジニアを積極的に募集しています。

この記事に興味を持っていただけた方や、エブリーに興味を持っていただけた方は、エブリーの採用情報をご覧ください。

every Tech Blog

株式会社エブリーのTech Blogです。

Nuxt3へのアップグレードに向けた挑戦