Next.js API not working in production mode – Blancer.com Tutorials and projects

I am building a electron app using next.js so that I have used Nextron framework for that.

THe issue I am facing is the API that I have created inside the next.js app are working perfectly in the local or development mode but when I build the app for the production it does not work.

my code as follows :

DATABASE

const Database = require('better-sqlite3');

// Create SQLite database instance
const db = new Database('dev.db');

// Define a User table
const createUserTable = db.prepare(`
    CREATE TABLE IF NOT EXISTS User (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        name TEXT,
        email TEXT UNIQUE
    )
`);

// Run the table creation query
createUserTable.run();

// Example: Insert a user into the User table
const insertUser = db.prepare('INSERT INTO User (name, email) VALUES (?, ?)');
insertUser.run('John Doe', '[email protected]');

// Example: Query all users from the User table
const getAllUsers = db.prepare('SELECT * FROM User');
const users = getAllUsers.all();

console.log(users);

// Close the database connection
db.close();

HOME.JSX

import React, { useEffect, useState } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import Image from 'next/image';

export default function HomePage() {
  const [message, setMessage] = useState('No message found');
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // Fetch data from the API when the component mounts
    fetch('/api/users/')
      .then((response) => response.json())
      .then((data) => setUsers(data))
      .catch((error) => console.error('Error fetching data:', error));

    // Set up IPC listener
    window.ipc.on('message', (ipcMessage) => {
      setMessage(ipcMessage);
    });

    // Clean up IPC listener on component unmount
    return () => {
      window.ipc.removeListener('message', handleMessage);
    };
  }, []); // Empty dependency array ensures the effect runs only once on mount

  return (
    <React.Fragment>
      <Head>
        <title>Home - Nextron (basic-lang-javascript)</title>
      </Head>
      <div>
        <p>
          ⚡ Electron + Next.js ⚡ -
          <Link href="/next">
            <a>Go to next page</a>
          </Link>
        </p>
        <Image
          src="/images/logo.png"
          alt="Logo image"
          width="256px"
          height="256px"
        />
      </div>
      <div>
        <button
          onClick={() => {
            window.ipc.send('message', 'Hello');
          }}
        >
          Test IPC
        </button>
        <p>{message}</p>

        <h2>Users:</h2>
        <ul>
          {users.map((user) => (
            <li key={user.id}>{user.name} - {user.email}</li>
          ))}
        </ul>
      </div>
    </React.Fragment>
  );
}

BASIC CONTROLLER CRUD

import sqlite from 'better-sqlite3';

// Open SQLite database connection
const db = sqlite('dev.db');

export default async function handler(req, res) {
    if (req.method === 'GET') {
        try {
            const users = db.prepare('SELECT * FROM User').all();
            res.status(200).json(users);
        } catch (error) {
            console.error(error);
            res.status(500).json({ error: 'Internal Server Error' });
        }
    } else if (req.method === 'POST') {
        const { name, email } = req.body;
        try {
            const insertUser = db.prepare('INSERT INTO User (name, email) VALUES (?, ?)');
            const result = insertUser.run(name, email);

            res.status(201).json({ id: result.lastInsertRowid });
        } catch (error) {
            console.error(error);
            res.status(500).json({ error: 'Internal Server Error' });
        }
    }
}