Serving images from a Next.js public folder without interfering with the BigCommerce remotePattern

[seanlundberg]

Hello!

This is doing my head in a little bit. I generally understand how the repo is pulling in all image assets from BigCommerce, however, for something like my logo, I would like to be able to define it in a /public directory and use the basic Next/Image component to display it.

How might I accomplish this?

Thanks!

[seanlundberg]

It was resolved by including the images path in the middleware.

Does this create any adverse effects?

import { composeMiddlewares } from './middlewares/compose-middlewares';
import { withAuth } from './middlewares/with-auth';
import { withRoutes } from './middlewares/with-routes';

export const middleware = composeMiddlewares(withAuth, withRoutes);

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - _vercel (vercel internals, eg: web vitals)
     * - favicon.ico (favicon file)
     */
    '/((?!api|_next/static|_next/image|_vercel|favicon.ico|images/.+\\.png).*)',
  ],
};

[bookernath]

@seanlundberg there's an example here:

https://github.com/bigcommerce/catalyst/blob/main/apps/core/components/hero/index.tsx#L21-L28

You should be able to just use <Image /> normally in this way.

You can also add multiple remotePatterns if you like, to use multiple image sources.