NEXT.JS：无法使用 getInitialProps 连接到 mongoDB 数据库

Question

我正在尝试使用我的 _app.js 中的 getInitialProps 连接到我的示例 mongoDB 集合，但我遇到了 Module not found: Can't resolve 'dns' 这个问题

_app.js

import { connectToDatabase } from '../middlewares/mongodb';

function MyApp({ Component, pageProps, prop }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

MyApp.getInitialProps = async (appContext) => {
  const { db } = await connectToDatabase();
  const data = await db
    .collection('listingsAndReviews')
    .find({})
    .limit(10)
    .toArray();

  const prop = JSON.parse(JSON.stringify(data));
  return { ...prop };
};

Answer 1

getInitialProps 在初始页面加载期间在服务器上运行，在客户端导航期间在客户端上运行。因此getInitialProps 应该包含同构代码 - 能够在服务器和客户端环境中运行的代码。

在您的情况下，您的代码需要 Node.js 环境（服务器），因此在浏览器上运行时会失败。

---

一种可能的解决方案是将您的数据库获取逻辑移至 API 路由。

// pages/api/listings

export const fetchDbData = async () => {
    const { db } = await connectToDatabase();
    const data = await db
        .collection('listingsAndReviews')
        .find({})
        .limit(10)
        .toArray();
    return JSON.parse(JSON.stringify(data));
}

export default async (req, res) => {
    const data = await fetchDbData()
    res.status(200).json(data)
}

在您的getInitialProps 中，您可以在服务器上运行时直接调用fetchDbData 逻辑，或者在客户端上运行时进行 API 调用。

import { fetchDbData } from './api/listings';

MyApp.getInitialProps = async (appContext) => {
    let prop;

    if (appContext.ctx.req) { // Checks if running on server
        prop = await fetchDbData(); // Call logic directly on the server
    } else {
        const res = await fetch('/api/listings'); // Make API call on the client
        prop = await res.json();
    }

    return { ...prop };
};

这确保您的数据库获取逻辑将始终在服务器环境中运行。