Next.js应用使用mysql2报错：Module not found: Can't resolve 'tls'

这个错误的核心原因是：tls是Node.js专属内置模块，Next.js的客户端编译环境（浏览器）不支持该模块，而你当前的数据库连接代码可能被执行在了客户端环境中。以下是可行的解决方法：

1. 确保数据库连接仅在服务器端执行 #

Next.js提供了多种服务器端执行代码的方式，选择适合你的方案：

方案A：App Router下用API路由 #

创建一个API路由来封装数据库操作，所有客户端请求通过这个路由间接访问数据库：

// app/api/db-query/route.js
import mysql from 'mysql2/promise';

export async function GET() {
  // 创建连接
  const connection = await mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'sagenext_web',
  });

  // 执行查询示例
  const [rows] = await connection.execute('SELECT * FROM your_table_name');
  await connection.end();

  return Response.json({ data: rows });
}

客户端组件通过fetch请求这个API即可获取数据，无需直接操作数据库。

方案B：Pages Router下用getServerSideProps #

在页面的服务端数据获取函数中执行数据库操作：

// pages/your-page.js
import mysql from 'mysql2/promise';

export async function getServerSideProps() {
  const connection = await mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'sagenext_web',
  });

  const [data] = await connection.execute('SELECT * FROM your_table_name');
  await connection.end();

  return { props: { data } };
}

export default function YourPage({ data }) {
  return <div>{JSON.stringify(data)}</div>;
}

方案C：使用Server Components（App Router） #

在App Router中，默认组件都是Server Components，可直接在组件内执行数据库操作：

// app/your-page/page.js
import mysql from 'mysql2/promise';

export default async function YourPage() {
  const connection = await mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'sagenext_web',
  });

  const [data] = await connection.execute('SELECT * FROM your_table_name');
  await connection.end();

  return <div>{JSON.stringify(data)}</div>;
}

2. 关键注意事项 #

• 绝对不要在标记了'use client'的客户端组件中导入或执行mysql2相关代码，所有数据库操作必须交给服务器端处理。
• 建议使用mysql2/promise（基于Promise的API）替代回调式的mysql2，更符合Next.js的异步代码风格。

内容的提问来源于stack exchange，提问作者Rajneesh Kumar