[webpack.cache.PackFileCacheStrategy] Serializing big strings on nextjs middleware.

[siamahnaf]

Summary

Hello, I am trying to fetch on current user data for some logic in nextjs middleware by writing following code-

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

//Navigation
import { AdminNavs, ModeratorNavs } from './Components/Sidebar/data';

export async function middleware(req: NextRequest) {
    const response = await fetch(process.env.NEXT_PUBLIC_API_URL as string, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            authorization: `Bearer ${req.cookies.get("NAOWSbL1sKQ30aq9")?.value}`
        },
        body: JSON.stringify({
            query: `
            query GET_PROFILE {
              getProfile {
                role
              }
            }`
        }),
        cache: "no-store"
    });

    const { data } = await response.json();

    const pathname = req.nextUrl.pathname;

    if (!data?.getProfile && pathname !== "/login") {
        return NextResponse.redirect(new URL('/login', req.url));
    }

    if (data?.getProfile && pathname === "/login") {
        return NextResponse.redirect(new URL('/', req.url));
    }

    //I try by removing this code, but getting same issues.
    const filteredAdminNavs = AdminNavs.filter(adminNav =>
        !ModeratorNavs.some(moderatorNav => moderatorNav.id === adminNav.id)
    );

    if (pathname !== "/") {
        if (data?.getProfile.role === "moderator" && filteredAdminNavs.find(a => pathname.startsWith(a.path))) {
            return NextResponse.redirect(new URL('/', req.url));
        }
    }

    return NextResponse.next();
}

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

I am getting the warning, when I try to build on productions.

Here is complete warning-
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (1212kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)

Additional information

1. I do not change any configuration on next config.
2. After initializing app, I just this middleware.

"next": "14.2.13",
"react": "^18",
"react-dom": "^18",

Example

https://github.com/siamahnaf/nextjs-middleware-warning

[icyJoseph]

I think the problem might be:

//Navigation
import { AdminNavs, ModeratorNavs } from './Components/Sidebar/data';

Which in turn imports a lot of react-icons and stuff, making the middleware file size very large.

You should refactor so that, AdminNavs, and ModeratorNavs, do not reference the icons, and make another file where you map over AdminNavs, and ModeratorNavs, assigning the icons, and export the result, so that the middleware file does not see the icons.

[icyJoseph]

Show what you tried.

[siamahnaf]

Sorry, sorry. I just remove logic part inside middleware. I need to remove the imports line as well as. Thank you very much for your kind help.

[icyJoseph]

No worries! Please don't forget to mark as answered. Have fun!

[siamahnaf]

@icyJoseph

My current implementation is like-

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

const OnlyAdminNavs = [
    "/categories",
    "/writers",
    "/publisher",
    "/teacher",
    "/institution",
    "/research-paper",
    "/coupon",
    "/sales",
    "/platform-charge"
];

export async function middleware(req: NextRequest) {
    const response = await fetch(process.env.NEXT_PUBLIC_API_URL as string, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            authorization: `Bearer ${req.cookies.get("NAOWSbL1sKQ30aq9")?.value}`
        },
        body: JSON.stringify({
            query: `
            query GET_PROFILE {
              getProfile {
                role
              }
            }`
        }),
        cache: "no-store"
    });

    const { data } = await response.json();

    const pathname = req.nextUrl.pathname;

    if (!data?.getProfile && pathname !== "/login") {
        return NextResponse.redirect(new URL('/login', req.url));
    }

    if (data?.getProfile && pathname === "/login") {
        return NextResponse.redirect(new URL('/', req.url));
    }

    if (pathname !== "/") {
        if (data?.getProfile.role === "moderator" && OnlyAdminNavs.find(a => pathname.startsWith(a))) {
            return NextResponse.redirect(new URL('/', req.url));
        }
    }

    return NextResponse.next();
}

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

Still I am getting same issues.

I try to do same implementations into layout.tsx. But From layout.tsx there is no way to get pathname?

Can you give this answer please?

[icyJoseph]

I think, that this is a problem with the react-icons library, what happens if you comment out all of the react-icon imports?

See this issue for more context:

• React Icons Imports everything even when included 2 or 3 icons react-icons/react-icons#154