[Next.js]Dev環境ではアプリが正常だが、ビルド環境だとアプリが使えない

前提

Next.JSのみの、簡易的なアプリ。
商品一覧を表示して、アイテムを選択すると、アイテムのページに遷移する。

実現したいこと

build環境でも正常にしたい。
遷移先でエラーになってしまう。

発生している問題・エラーメッセージ

Dev環境では、商品一覧ページと、そこからアイテムのページに遷移することができます。
しかし、ビルド環境だと、商品一覧ページは表示されるのですが、アイテムを選択するとエラーが出ます。
ブラウザのエラーは、５００　Internal Server Error.
と出ます。

ターミナルでは、ビルドとスタートの両方し、そのタイミングではエラーは出ません。
アイテムをクリックしたタイミングで、ターミナルにエラーが表示されます。
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


コンソールでも、エラーが２つ出ています。
一つ目が
object:message: "500 - Internal Server Error."
name: "Internal Server Error."
statusCode: 500

２つ目が
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


npm devだとOKですが、npm buildとnpm run startした後のアプリだとダメです。

該当のソースコード

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"
  }

試したこと

コード内にSSRとSSGがありますが、どちらもDev環境では使えて、ビルドではどちらを試してもダメでした。

コンソール２つ目のエラーについて調べると、削除swcMinify: trueすると修正された、とあり、VscodeでswcMinifyを検索したのですが、そのようなものが見つかりません。

原因がわかる方がいましたらアドバイスのほどお願いいたします。

補足情報（FW/ツールのバージョンなど）

{
"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"
}
}