search

bigcommerce / catalyst

Catalyst - for Composable Commerce
https://catalyst-demo.site
MIT License
100 stars 101 forks source link

Big issues: Not support visit the public static image, throw a 400 request errors? #1462

Open Caesar-APAX opened 1 day ago

Caesar-APAX commented 1 day ago

When visit the root static image, no show any thing?

/public/images/logo.png

<Image src="/images/logo.png" width={200} height={100} />
Caesar-APAX commented 1 day ago

i know we need to use cdn resource, but some image need to put to the public folder. The theme not support, crying..

chanceaclark commented 8 hours ago

This is a tough one tbh... I do have a workaround that I'll have below, but let me explain why this is hard to fix from our side.

When it comes to our with-routes middleware, we have a logical block that routes paths that are not returned by the BigCommerce API to a localized path, specifically this block: https://github.com/bigcommerce/catalyst/blob/b4485c76de8c83546c68a7b50fcb7991603dbf6e/core/middlewares/with-routes.ts#L341-L352

With our Makeswift integration, we don't really have an API to know what URLs they have in their CMS until they get to the /[locale]/(default)/[...rest]/page.tsx route. We need to assume that any unknown URL is probably a Makeswift URL and route them to that path (they handle the 404 logic that currently exists in `/[locale]/(default)/[...rest]/page.tsx).

When it comes to assets in the /public folder, Next.js treats them as a regular URL until it passes into their image-loader logic which then has the path of _next/image/<image-path> or _next/static/<image-path>. We already match them out of our middleware, but the initial request of the image comes in, e.g. /image.png.

Because of assuming that any unknown URL is a Makeswift URL, it gets handled in that locale logic so the path is rewritten to /en/image.png, thus not working.

The workaround

In your public folder, you can have a namespaced folder, like you have in your example above, /images, /static or whatever you want. In the middleware matcher, you can add that namespace and the requests should work as intended:

-     '/((?!api|admin|_next/static|_next/image|_vercel|favicon.ico|xmlsitemap.php|sitemap.xml|robots.txt).*)',
+     '/((?!api|admin|images|_next/static|_next/image|_vercel|favicon.ico|xmlsitemap.php|sitemap.xml|robots.txt).*)',

Keep in mind, you won't be able to add a path in your app called /app/images/page.tsx.