./public folder not accessible in project using localization

Question

I am currently working on a project that uses Prismic to upload content to a website. I have encountered the issue that now after successfully implementing localization, my ./public folder isn´t accessible.

My NextJS project is at version 14.0.3 and is using the app router. I added my main page.tsx and layout.tsx files inside a [lang] folder that essentially creates sub-routes from defined Prismic locales such as "http://localhost:3000/en-gb/*".

When I implemented this, I cannot access my public folder after running a "next dev" script. The folder structure when it was working for the pages was "./src/app/page.tsx" and now that it is not working, it is at "./src/app/[lang]/page.tsx" and uses middleware to handle the different locales.

I believe the middleware is currently what is causing this issue.

// middleware.tsx
import { NextRequest, NextResponse } from 'next/server';
import { createClient } from '@/prismicio';

export async function middleware(request: NextRequest) {
    const client = createClient();
    const repository = await client.getRepository();

    const locales = repository.languages.map((lang) => lang.id);
    const defaultLocale = locales[0];

    // Check if there is any supported locale in the pathname
    const { pathname } = request.nextUrl;

    const pathnameIsMissingLocale = locales.every(
    (locale) => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`
    );

    // Redirect to default locale if there is no supported locale prefix
    if (pathnameIsMissingLocale) {
        return NextResponse.rewrite(
            new URL(`/${defaultLocale}${pathname}`, request.url)
        );
    }
}

    export const config = {
        matcher: [
            '/((?!_next).*)', // Exclude Next.js assets
          ],
};

 // example of an import I am currently using

 /* preceding code... */
 const grayArrowDown = '/images/GrayArrowDown.png';
 /* proceding code... */

Let me know if you need further clarification.

Attempted: Calling static assets from ./public folder

Expected: Statis assets/images to render on page without issue.

Actual: ./public folder does not load. For instance, /images folder does not show up in "source" at runtime.

davideghz · Accepted Answer · 2024-11-07 20:15:15Z

0

Updating the matcher like the following should fix it (it worked in my case)

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

edited Nov 7, 2024 at 20:15

answered Nov 7, 2024 at 20:03

davideghz

3,6955 gold badges29 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

./public folder not accessible in project using localization

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related