Nextjsで「Module parse failed: Unexpected token」が出たのでなんとかしたいっ!

実際に表示されたエラーは以下。

Module parse failed: Unexpected token
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

エラー箇所を見ると、importしようしたライブラリ(今回はReactのコンポーネント)が読み込めてないぽいですね。。

experimentalなのが気になりますが、extermalDirtrueにすると動くようになるみたいです。

const nextConfig = {
  experimental: {
    externalDir: true
  }
}

module.exports = nextConfig;

これでとりあえずページは表示されるようにはなりました。

参考

Next.jsで外部ディレクトリのTSをインポートしたときにちゃんとトランスパイルされるようにする
【Next.js】You may need an appropriate loader to handle this file type, なエラー