Error with CSS Images when using Middleware

Question

Hello all. I've been attempting to create a landing page for my app with a full-page background image. The image is available when the user is signed in. However, when the user is not signed in, the background image is not visible. I believe I have the proper middleware configuration but I'll share the files and see if anyone else can help me troubleshoot.

Here's my middleware config matcher. It works as expected, redirecting the user to the sign-in page when the user is not signed in and showing the sign-in page to the user.

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico|sign-in).*)'
  ]
}

Here is my utils.module.css file where I attempt to get the image. There is some additional code not shown to make sure the background image overlays and doesn't repeat and the functionality is as expected when the user is signed in. The images folder is located in a /public/images folder.

.backgroundImage {
  background: url('/images/background.jpg);
}

Lastly, here is where I attempt to add the CSS tag in my root layout:

import styles from '../styles/utils.module.css'

export default function RootLayout({children}) {
  return (
    <html>
      <body className={styles.backgroundImage}>
        {children}
      </body>
    </html>
  )
}

I'd appreciate any help. Thanks

Some things I have already tried along with some code snippets:
- Importing the image as a static file with

import background from '/app/static/background.jpg'

the style in line with something like

style={{background: `url(${background.src})`}}

. This worked somewhat but when you adjusted the window size while using it, the image did not scale properly. I'm guessing this is related to layout being a server component and the code not updating.
- Using the <Image> tag with an absolute class added so the image sits behind all the content. This created weird behavior where opening the dev tools resize the image, which feels buggy.

Siricid woodwasp · Answer

Additionally, here is the error I get in the server console. There is no error when the user is signed in.Console log: User is not authenticated in Middleware
ImageError: Unable to optimize image and unable to fallback to upstream image 
  at imageOptimizer ... server/image-optimizer.js:659:19
  at async cacheEntry.imageResponseCache.get.incrementalCache ... next/dist/server/next-server.js:176:65
  at async ... response-cache/index.js:103.36
  at async ... lib/batcher.js:41:32 {
    statusCode: 400
}

Error with CSS Images when using Middleware

1 Reply