Next i18n and static files like layout return 404

Question

dear Stack Overflow community,

I'm currently learning Next.js and have successfully set up a fresh project. Now, I'm integrating it with i18n, and while the translations are working perfectly, I'm encountering an issue with static files (404).

I followed the official documentation for the integration, focusing on the app router and middleware sections:

• App router: https://next-intl-docs.vercel.app/docs/getting-started/app-router
• Middleware: https://next-intl-docs.vercel.app/docs/routing/middleware

To avoid displaying the locale in the URL (the default path structure is (/[locale]/rest-of-the-path), I made some adjustments to localePrefix and matcher. You can see the changes I made below:

navigation.ts

    import { createSharedPathnamesNavigation } from "next-intl/navigation";
    
    export const locales = ["pl-pl", "en-us"] as const;
    export const localePrefix = "never"; // <--- I changed that
    
    export const { Link, redirect, usePathname, useRouter } =
      createSharedPathnamesNavigation({ locales, localePrefix });

middleware.ts

import createMiddleware from "next-intl/middleware";
import { locales, localePrefix } from "./navigation";

export default createMiddleware({
  // A list of all locales that are supported
  locales,
  localePrefix,
  // Used when no locale matches
  defaultLocale: "pl-pl",
});

export const config = {
  // Match only internationalized pathnames
  matcher: ["/", "/:path*", "/(pl-pl|en-us)/:path*"],
};

My main issue is getting 404 on loading static files

I suspect the problem might be related to the matcher in middleware.ts. Despite trying a different configuration, I'm still facing the same issue. Could anyone point me in the right direction or suggest what else I might try? How to fix these 404s?

Answer 1

Looks like the matcher wrong, I excluded static files, and all works like a charm.

export const config = {
  matcher: ["/((?!api|_next|_vercel|.*\\..*).*)"],
};