Ionic Advent Calendar / Next.js Advent Calendar 5日目の遅刻記事です。

去年はIonicのWeb Componentそのものを使う方法を紹介しましたが、今年は@ionic/reactを使う方法を紹介します。

Next.jsでIonic Reactを使うときの問題点

去年のおさらいです。defineCustomElementsまわりがSSR / SSGで実行されるケースがあるため、next buildがこけることがあります。

$ yarn --cwd packages/web-app build 
$ next build
 info  - Creating an optimized production build   
info  - Compiled successfully 
> Build error occurred 
ReferenceError: HTMLElement is not defined

Next.jsのDynamic Importを使う

@ionic/reactを使う場合、クライアントサイドでimportできるようにDynamic Importを使う方法があります。

import dynamic from "next/dynamic";

 export const IonApp = dynamic(
   async () => {
     const mod = await import("@ionic/react");
     return mod.IonApp;
   },
   { ssr: false } // this is what makes it work
 );

Next.jsの実装側では、このようにnext/dynamicでimportしたComponentを利用しましょう。

実際に利用しているサイト

Stripe ElementをWeb Componentとして利用できるようにするライブラリのドキュメントサイトをNext.jsで構築しています。

コードもGitHubに公開しています。

DynamicImportを使うメリットデメリット

個人的な感想ですが、「毎回Importしないといけないのは面倒」です。ただし、使いたいComponentだけImportする形にできるので、もしかすると読み込みの効率化は実現できるかもしれません。

また、Web Componentをそのまま使うときに発生したSVGのpath問題についても、こちらの方法であればクリアできます。