为什么Next.js构建尝试连接到数据库?

velaa5lx  于 9个月前  发布在  其他
关注(0)|答案(2)|浏览(177)

我在Next.js服务器页面14使用应用程序路由器,将从数据库中获取数据,
这里是创建数据库连接池的位置,位于lib/db.js

import mysql from "mysql2/promise";

import * as schema from "@/schema";

const pool = mysql.createPool({
  ...
});

export const db = drizzle(pool, { mode: "default", schema });

字符串
然后在服务器组件页面中导入上述内容,如下所示,

// create database connection
import { db } from "@/lib/db";

const Dashboard = async () => {
  const result = await db.query.documents.findFirst();
  return (
    <div>...</div>
  );
};


这个实现需要一个正在运行的数据库服务器。当npm运行dev或在生产运行时,这是有意义的。
我不清楚的是npm run build也在尝试连接数据库。当数据库服务器没有运行时,构建会失败。
这是怎么回事?

wixjitnu

wixjitnu1#

在Next.js中,构建过程默认会预呈现页面。这意味着它会在构建时为每个页面生成HTML。如果您的组件中直接有服务器端函数或数据获取逻辑(如在 Jmeter 板组件中),Next.js将尝试在构建过程中执行它。
由于您的 Jmeter 板组件在渲染期间尝试从数据库获取数据,并且这种渲染发生在构建时,Next.js会在构建期间尝试连接到数据库。如果数据库服务器未运行,这将导致失败。
为了避免这个问题,您应该将数据获取逻辑移动到getServerSidePropsgetStaticProps。这些函数是专门为Next.js中的数据获取而设计的,并且仅在getServerSideProps的运行时调用,或者在getStaticProps的构建时(以及可选的运行时)调用。
以下是如何使用getServerSideProps重构 Jmeter 板组件:

import { db } from "@/lib/db";

const Dashboard = ({ data }) => {
  return (
    <div>...</div>
  );
};

export async function getServerSideProps() {
  const result = await db.query.documents.findFirst();

  return { props: { data: result } };
}

export default Dashboard;

字符串

相关问题