динамический возврат маршрута 404 в продукте next.js

Question

      import React from "react";
import { useRouter } from "next/router";
import Image from "next/image";
import { BASE_URL } from "routes";
import { customFetch } from "utils";

const imageLink="https://opengraph.githubassets.com/6ace94bf340bd4ab4899ace736ada68370a7c1f4007cf02edb8febeb23f5912a/fridays/next-routes";

export default function Product({ product, categories, variations }) {
  const { query } = useRouter();
  return (
    <div>
      <Image src={imageLink} width={100} height={100} layout="responsive" />
      {JSON.stringify(product, null, 10)}
    </div>
  );
}

export async function getStaticPaths() {
  const res = await fetch(`${BASE_URL}/api/products`);
  const result = await res.json();

  const paths = result.products.map((product) => ({
    params: { slug: product.product_slug },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params, ...ctx }) {
  const [{ categories }, { variations }, product] = await Promise.all([
    customFetch("api/categories", ctx),
    customFetch("api/variations", ctx),
    customFetch(`api/products/view/${params.slug}`, ctx),
  ]);

  return {
    props: {
      product,
      categories,
      variations,
    },
  };
}

Работаем в разработке, но получаем ошибку 404 в производстве. Я не знаю, может быть, getStaticPaths не работает с компонентом Image, потому что, когда я удаляю компоненты getStaticPath и getStaticProps или Image, он работает как в dev, так и в prod.

вот мой next.config.js

      module.exports = {
  reactStrictMode: true,
  images: { domains: ["opengraph.githubassets.com"] },
  pageExtensions: ["page.js"],
};

заранее спасибо.

Answer 1

Ошибка в первой строке, откуда вы выполняете выборку с BASE_URL.

Объяснение: getStaticPaths отвечает за создание ваших маршрутов в проекте, и если вы получили ошибку на этом шаге или другой ответ от сервера, он определенно выдаст ошибку 404. Возможно, у вас неправильные конфигурации Webpack на продукте для BASE_URL import, возможно, это другая форма данных и пути в mapне генерируется. Проверь их.