Webpackエラー

Next.jsでアプリケーションをビルドする際、よく見られるエラーの一つがWebpackエラーです。特に、Webpack 5にアップグレードされていない場合に「Cannot read property 'asString' of undefined」のようなエラーメッセージが表示されることがあります。この問題は、next.config.jsに以下の設定を追加してWebpack 5を有効化することで解決できます。

module.exports = {
  future: {
    webpack5: true,
  },
};

また、モジュールの依存関係やパスが正しいかも確認することが大切です。

APIとスラグ関連のエラー

Next.jsでは、getStaticPropsやgetServerSidePropsといったデータ取得メソッドが用意されていますが、動的ルーティングを使用する際にgetStaticPathsを忘れると、エラーが発生します。例えば、動的な商品ページ(/products/[slug])を実装する際、Next.jsはすべてのスラグを事前に知る必要があります。 以下のコード例のようにgetStaticPathsを正しく設定することで、このエラーを解決できます。

export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();
  const paths = products.map((product) => ({
    params: { slug: product.slug },
  }));
  return { paths, fallback: false };
}

この設定により、指定されたスラグごとにページが静的に生成されます。

モジュールのインポートエラー

Next.jsでよく発生するもう一つのエラーは、モジュールのインポートエラーです。特に「Module not found」というエラーメッセージが表示されることがあります。このエラーは、モジュールのパスが間違っている場合や、クライアント側で利用できないサーバーサイドのモジュールをインポートしている場合に発生します。 サーバーサイドのコードは、getServerSidePropsやgetStaticProps内でのみ使用するようにしましょう。また、ファイル名の大文字・小文字の区別が影響する場合もあるため、パスを正確に指定することが重要です。

CORSエラー

Next.jsでAPIを使用する際、CORSエラーもよく見られます。これは、異なるオリジン間でAPIリクエストを行う場合に発生します。CORSエラーを解決するには、サーバー側で適切なCORS設定を行い、必要なヘッダーを追加することが必要です。 例えば、APIエンドポイントが外部のオリジンにある場合、以下のようにヘッダーを設定することでCORSエラーを防ぐことができます。

res.setHeader('Access-Control-Allow-Origin', '*');

APIルートを使用する際に、特にデプロイ後にこの問題が発生しやすいため、事前に対応しておくとよいでしょう。

まとめ

Next.jsで発生するエラーはさまざまですが、適切なデバッグ方法と設定の理解によって効率的に解決できます。WebpackのビルドエラーやAPI関連のエラー、CORSの問題に対しては、それぞれのエラーメッセージに応じた対応を行い、開発効率を高めましょう。