title: Module not found: Can't resolve 'fs' in '.../node_modules/destroy' using Next.js mysql Express React
body: <p>I would like to insert data from pages/index.js into mysql database.
  A mysql connection in routes/routes.js, i have built ins function to call what i want</p>
  
  <p><strong>Structure</strong></p>
  
  <ul>
  <li>components</li>
  <li>pages
  
  <ul>
  <li>index.js</li>
  </ul></li>
  <li>routes
  
  <ul>
  <li>routes.js</li>
  </ul></li>
  <li>server.js</li>
  <li>package.json</li>
  </ul>
  
  <p><strong>Fail with error:</strong></p>
  
  <blockquote>
    <p>Module not found: Can't resolve 'fs' in '.../node_modules/destroy'</p>
  </blockquote>
  
  <p><code>pages/index.js</code></p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from "react";
  import { Typography, Button, Grid } from "@material-ui/core";
  import QRCode from "qrcode.react";
  import dynamic from "next/dynamic";
  import { PublicKey, SecretKey, HOSPCODE } from "../stellar";
  
  
  const { ins } = require("../routes/routes"); //This is the problem!
  
  const StellarSdk = require("stellar-sdk");
  const QrReader = dynamic(() =&gt; import("react-qr-reader"), {
    ssr: false
  });
  
  export default class QR extends Component {
    state = {
      result: "",
      camera: true,
      msg: "",
      QR: {}
    };
    _clear = () =&gt; {
      this.setState({ result: "", camera: true, msg: "", QR: {} });
    };
    handleScan = data =&gt; {
      if (data) {
        const dataJson = JSON.parse(data);
        if (dataJson.Type == "Patient") {
          const KP = StellarSdk.Keypair.fromSecret(SecretKey);
          this.setState({
            result: dataJson,
            QR: JSON.stringify({
              Type: "Hospital",
              HospitalName: "xxx Hospital",
              EndPoint: "xxx/patientID_",
              SPK: PublicKey,
              Signature: KP.sign(
                Buffer.from(dataJson.ID + dataJson.SPK)
              ).toString("base64")
            }),
            camera: false,
            msg: ""
          });
          ins(dataJson.ID, HOSPCODE, dataJson.SPK, dataJson.SecretKey);
        } else {
          this.setState({
            msg: "Wrong QRCode."
          });
        }
      }
    };
  </code></pre>
  
  <p><strong>But</strong> <code>/routes/routes</code> in <code>server.js</code> work.</p>
  
  <pre class="lang-js prettyprint-override"><code>const express = require("express");
  const next = require("next");
  const dev = process.env.NODE_ENV !== "production";
  const app = next({ dev });
  const handle = app.getRequestHandler();
  const bodyParser = require("body-parser");
  const { router, ins } = require("./routes/routes");
  
  app
    .prepare()
    .then(() =&gt; {
      const server = express();
      server.use(bodyParser.json());
      server.use(bodyParser.urlencoded({ extended: false }));
      server.use("/api", router);
      server.get("*", (req, res) =&gt; {
        return handle(req, res);
      });
  
      server.listen(3001, err =&gt; {
        if (err) throw err;
        console.log("&gt; Ready on http://localhost:3001");
      });
    })
    .catch(ex =&gt; {
      console.error(ex.stack);
      process.exit(1);
    });
  
  </code></pre>
  
  <p><code>routes/routes.js</code></p>
  
  <pre class="lang-js prettyprint-override"><code>const express = require("express");
  const mysql = require("mysql");
  const router = express.Router();
  const dotenv = require("dotenv").config();
  
  const connection = mysql.createConnection({
    host: process.env.DATABASE_HOST,
    database: process.env.DATABASE_NAME,
    user: process.env.DATABASE_USERNAME,
    password: process.env.DATABASE_PASSWORD,
    port: 3306
  });
  
  console.log("Connecting...");
  connection.connect(function(err) {
    if (err) return new Error("An error occured during SQL connection " + err);
    console.log("Connected!");
  });
  console.log(connection.config);
  
  /* GET home page. */
  router.get("/", function(req, res, next) {
  ...
  ...
  ...
  ins = (cid, HOSPCODE, spk, secretKey) =&gt; (cid, HOSPCODE, spk, secretKey) =&gt; {
    var sql = "INSERT INTO STELLARKEY (CID, HOSPCODE, SPK, SecretKey) VALUES ?";
    var values = [[cid, HOSPCODE, spk, secretkey]];
    connection.query(sql, [values], function(err, result) {
      if (err) throw err;
    });
  };
  module.exports = { router, ins };
  </code></pre>
  
  <p>I am new at Next.js and React. There is a better way to insert data from <code>pages/index.js</code> into mysql database? Please let me know.</p>
  
  <pre><code>"dependencies": {
      "@material-ui/core": "^4.9.0",
      "@material-ui/icons": "^4.5.1",
      "body-parser": "^1.19.0",
      "dotenv": "^8.2.0",
      "express": "^4.17.1",
      "fs": "^0.0.1-security",
      "mysql": "^2.18.1",
      "next": "^9.2.1",
      "qrcode.react": "^1.0.0",
      "react": "^16.12.0",
      "react-dom": "^16.12.0",
      "react-qr-reader": "^2.2.1",
      "stellar-sdk": "^3.3.0",
      "typeface-roboto": "^0.0.75"
    }
  </code></pre>
  
  <p>Ubuntu 18.04 x64,
  mysql  Ver 14.14 Distrib 5.7.28,
  Node v12.14.1</p>