Next.js. App is fine in Dev environment, but app is not usable in Build environment

Question

Assumptions A simple application, using only Next.JS. Display a list of products, and when an item is selected, the user is redirected to the item's page.

What we want to achieve I want it to be normal in a build environment. I get an error when I select an item and go to the destination page.

n the dev environment, I can go to the product list page and from there to the item page. However, in the build environment, the product list page is displayed, but when I select an item, an error occurs. The browser error is 500 Internal Server Error. The browser error message is "500 Internal Server Error.

In the terminal, I both build and start, and the error does not appear at that timing. The error appears in the terminal when the item is clicked.

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
(node:24607) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
TypeError: fetch failed
    at Object.processResponse (node:internal/deps/undici/undici:5555:34)
    at node:internal/deps/undici/undici:5877:42
    at node:internal/process/task_queues:140:7
    at AsyncResource.runInAsyncScope (node:async_hooks:203:9)
    at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: Error: connect ECONNREFUSED ::1:3000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1237:16) {
    errno: -61,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '::1',
    port: 3000

There are also two errors in the console. The first is.

object:message: "500 - Internal Server Error."
name: "Internal Server Error."
statusCode: 500

The second is.

A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred
te @ main-fc7d2f0e2098927e.js:1

With npm dev, it is normal. But after npm build and npm run start, the app fails.

Main file.

pages/products/[id].js

import { useRouter } from "next/router";
import Link from "next/link";
import styles from "../../styles/Home.module.css";

// export async function getStaticProps({ params }) {
//   //jsonファイルのデータを取りに行く。
//   const req = await fetch(`http://localhost:3000/${params.id}.json`);
//   const data = await req.json();

//   return {
//     props: { product: data },
//   };
// }

// export async function getStaticPaths() {
//   const req = await fetch("http://localhost:3000/products.json");
//   const data = await req.json();

//   const paths = data.map((product) => {
//     return {
//       params: {
//         id: product,
//       },
//     };
//   });

//   return {
//     paths,
//     fallback: false,
//   };
// }


export async function getServerSideProps({ params }) {
  const req = await fetch(`http://localhost:3000/${params.id}.json`);
  const data = await req.json();

  return {
    props: { product: data },
  };
}

const Product = ({ product }) => {
  const router = useRouter();
  const { id } = router.query;

  //   console.log(id);

  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <h1>{id}のページです</h1>
        <img src={product.image} width="300" height="400" />
        <p>{product.name}</p>
        <br />
        <Link href="/products">
          <a>商品一覧へ</a>
        </Link>
      </main>
    </div>
  );
};

export default Product;

pages/products/index.js
import Link from "next/link";
import styles from "../../styles/Home.module.css";

const ProductsList = () => {
  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <h2 className={styles.title}>商品一覧</h2>

        <ul>
          <li>
            <Link href="/products/smartPhone">
              <a>スマートフォン</a>
            </Link>
          </li>
          <li>
            <Link href="/products/pc">
              <a>パソコン</a>
            </Link>
          </li>
          <li>
            <Link href="/products/headPhone">
              <a>ヘッドホン</a>
            </Link>
          </li>
        </ul>
      </main>
    </div>
  );
};

export default ProductsList;

public/products

["smartPhone", "pc", "headPhone"]

public/smartPhone.jsonなど

{
    "id": "smartPhone",
    "name": "Android",
    "image": "https://images.unsplash.com/photo-1533228100845-08145b01de14?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1938&q=80"
  }

What we tried. There is SSR and SSG in the code, both work in the Dev environment, and I tried neither in the build. When using SSR, SSG is commented out.

When I looked up the second console error, I found that deleting swcMinify: true fixed it, and I searched for swcMinify in Vscode, but I can't find anything like that.

If anyone knows the cause, please advise.

Supplemental information (e.g., FW/tool version)

{
"name": "next-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "12.1.6",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"eslint": "8.18.0",
"eslint-config-next": "12.1.6"
}
}

npm -v
8.12.2