Nextjs 14 deploy on netlify not showing images

Support
,
1

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:

2

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

3

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.

4

Hi

I’m working on building my Next.js 14 app, but I’m having trouble with the public folder, which contains images. After building the app, I can’t find the public folder in the .next build directory. As a result, the images are not being found, and I’m getting 404 errors.

I’ve been trying to resolve this issue for a couple of days but haven’t found a solution yet. Can someone help me understand how to properly include and deploy the public folder so that the images are available on the server?

//netlify.toml
[[plugins]]
  package = "@netlify/plugin-nextjs"
  
[build]
  command = "npm run build"
  publish = "out"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[functions]
  [functions.___netlify-server-handler]
    included_files = ["./public/**"]

//next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'hi'],
  },
  // images: {
  //   domains: ['co-buy.uk'],
  // },
  assetPrefix: 'https://co-buy.uk',
};

export default nextConfig;
5

It is expected (and also a behaviour controlled by Next.js, not Netlify) to move contents from public to .next. Please share a way to reproduce the issue.