Next.js Discord

Discord Forum

Unable to optimize image and unable to fallback to upstream image

Answered
British Shorthair posted this in #help-forum
Open in Discord
British ShorthairOP
After internationalizing my next app suddenly some of the images on the site started to disappear and give the error message described above. What's strange is that most of them work but some of them don't.
Answered by British Shorthair
I found the solution. Just had to add this piece of code in the middleware.ts file
export const config = {
  matcher: ["/((?!api|static|.*\\..*|_next).*)", { source: "/" }],
};
View full answer

7 Replies

British ShorthairOP
I have used the next-i18n-router for doing the internationalized routing
and that's how my file structure looks like
middleware.ts
import { createMiddlewareClient } from "@supabase/auth-helpers-nextjs";
import { i18nRouter } from "next-i18n-router";
import { NextResponse } from "next/server";
import i18nConfig from "./i18nConfig";

import type { NextRequest } from "next/server";

export async function middleware(req: NextRequest) {
  const res = NextResponse.next();

  // Create a Supabase client configured to use cookies
  const supabase = createMiddlewareClient({ req, res });

  // Refresh session if expired - required for Server Components
  // https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-session-with-middleware
  await supabase.auth.getSession();

  return i18nRouter(req, i18nConfig);
}
I can assure all the paths imported are correct
Let me know if you have faced this issue before and share me your solution if any
Thanks
British ShorthairOP
I found the solution. Just had to add this piece of code in the middleware.ts file
export const config = {
  matcher: ["/((?!api|static|.*\\..*|_next).*)", { source: "/" }],
};
Answer