next.js"> next.js"> Next.jsでのMongooseの使用 Next.js

Next.jsは、Reactを用いたフルスタックアプリケーションの構築に人気の高いフレームワークです。MongooseはNext.jsとすぐに連携することができます。ご興味がある場合は、Next.jsの公式Mongooseサンプルアプリをご利用ください。さらに、Vercel Serverless FunctionsでNext.jsを使用している場合は、MongooseのAWS Lambdaドキュメントをご確認ください。

Next.jsを使用する際に気をつけるべき一般的な問題がいくつかあります。

TypeError: 未定義のプロパティを読み取れません(「プロトタイプ」の読み取り)

この問題は、next.config.jsに以下を追加することで解決できます。

const nextConfig = {
  experimental: {
    esmExternals: "loose", // <-- add this
    serverComponentsExternalPackages: ["mongoose"] // <-- and this
  },
  // and the following to enable top-level await support for Webpack
  webpack: (config) => {
    config.experiments = {
      topLevelAwait: true
    };
    return config;
  },
}

この問題は、MongoDBのbsonパーサーにおけるこの変更が原因で発生します。MongoDBのbsonパーサーは、ESMモードでトップレベルのawaitと動的インポートを使用して、Webpackのバンドル問題を回避します。そして、Next.jsはESMモードを強制します。

Next.jsエッジランタイム

現時点では、MongooseはNext.jsエッジランタイムをサポートしていません。エッジランタイムでMongooseをインポートすることはできますが、Mongooseのブラウザライブラリを取得します。MongooseがエッジランタイムでMongoDBに接続することはできません。これは、エッジランタイムは現在、MongoDB Node DriverがMongoDBに接続するために使用するNode.jsnet APIをサポートしていないためです。