フロントエンドをNext.js、バックエンドをExpressで開発していて、フロントとバックで共通の型などを利用したいという場面がありました。
Expressでは簡単に読み込むことができたのですが、Next.jsでは少し設定が必要だったため記事として残しておきます。
なおフォルダ構成は以下のようなものとなっています。
├── app # Express
├── common # アクセス制御などフロント・バックで共通しているコードを格納
└── web # Next.js
# その他のサービス発生した問題
webフォルダ内に配置したファイルと同じようにimportしたのですが、以下のようなエラーが発生して読み込むことができませんでした。
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this fileエラーの解消方法
エラーの内容としては、「commonフォルダ内にあるファイルを処理できるローダーがありません」というものです。このエラーメッセージで検索してみると、cssローダーなどをダウンロードしている記事が見つかります。しかし今回はcssファイルなどを読み込んでいる訳ではないため、この方法では解消できません。
next.config.jsに実験的機能の設定を追加することでこのエラーを解消することができます。
// next.config.js
module.exports = {
experimental: {
externalDir: true, // この設定を追加
},
reactStrictMode: true,
};ただし「実験的機能」とあるように、この方法をとると「next dev」時などに以下のメッセージが表示されるようになります。
warn - You have enabled experimental feature(s).
warn - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.この警告文はnode_modules内のファイルにあるコンソール表示部分をコメントアウトすることで消すことができるようです。しかしnode_modules内のファイルをなるべく弄りたくないため、私は変更しませんでした。
外部ファイルをインポートするより良い方法が見つかった場合は記事を更新したいと思います。
参考
Nextjs import external components from parent directory
I have external directory common and I would like to import react components from that directory into web-static. In web-static I am using nextjs. Currently I ...
stackoverflow.com
