Nextjs 14 deploy on netlify not showing images

Hi, I have website in nextjs 12 and it is deployed on netlify. Now I’m trying to upgrade nextjs version so I upgrade it to nextjs 14.0.4 and I’m using app directory. When I build applications and get a preview, unfortunately the website does not display images and I get 404 errors in the console. When I build the application on the local server, everything works fine. I will also mention that all photos are placed in the public folder. I use middleware to change the language on the website.

That’s how it look in console

That’s one of the example components which isn’t showing.

"use client"
import Link from "next/link";
import Image from "next/image";
import LogoImage from "@/public/logo.png";
import { Locale } from "@/i18n.config";
import { useParams } from "next/navigation";

export default function Logo() {
  const {lang} = useParams<{lang: Locale}>();
  return (
    
    <div className="logo">
      <Link href={`/${lang}`} className="logo-inner">
        <Image
          src={LogoImage}
          alt="logo"
          width={100}
          height={100}
          style={{
            width: "100%",
            height: "100%",
            objectFit: "contain",
          }}
        />
      </Link>
    </div>
  );
}

That’s how my middleware looks.

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

import { i18n } from '@/i18n.config'

import { match as matchLocale } from '@formatjs/intl-localematcher'
import Negotiator from 'negotiator'

function getLocale(request: NextRequest): string | undefined {
  const negotiatorHeaders: Record<string, string> = {}
  request.headers.forEach((value, key) => (negotiatorHeaders[key] = value))

  // @ts-ignore locales are readonly
  const locales: string[] = i18n.locales
  const languages = new Negotiator({ headers: negotiatorHeaders }).languages()

  const locale = matchLocale(languages, locales, i18n.defaultLocale)
  return locale
}

export function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname
  const pathnameIsMissingLocale = i18n.locales.every(
    locale => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`
  )

  // Redirect if there is no locale
  if (pathnameIsMissingLocale) {
    const locale = getLocale(request)
    return NextResponse.redirect(
      new URL(
        `/${locale}${pathname.startsWith('/') ? '' : '/'}${pathname}`,
        request.url
      )
    )
  }
}

export const config = {
  // Matcher ignoring `/_next/` and `/api/`
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)']
}

Does anyone can help me :slight_smile:

To start with, we’d need to know the site name.

Thank you for reply. I’ve already found where I have done mistake. It was matcher in nextjs middleware. I shouldn’t have been add to too many routes to macher in middleware.