Next 12 Middleware Modularization

Viewed 13

With NextJS version 12 middleware's are now combined in file at the root. If I put all the logic to one file my logic works but if I try to seperate it into functions and call in middleware it doesnt work.

If I return the response directly return (response = cookieMiddleware(request, response)); like this it works.

There is something wrong where and how I return the response I guess.

One middleware sets cookie other redirects if there are particular query param is present.

middleware.js

import { NextResponse } from "next/server";
import marketingSlugMiddleware from "./middlewares/marketingSlugMiddleware";
import cookieMiddleware from "./middlewares/cookieMiddleware";
import getDomain from "@/utils/get-domain";

// This function can be marked `async` if using `await` inside
export function middleware(request) {
    let response = NextResponse.next();
    const { search, protocol, host } = request.nextUrl;

    // Cookie Middleware
    response = cookieMiddleware(request, response);

    // Marketing Slug Middleware
    response = marketingSlugMiddleware(search, request);

    return response;
}

cookieMiddleware.js

import getDomain from "@/utils/get-domain";

const cookieMiddleware = (request, response) => {
    if (request.headers.get("accept") === "application/json") {
        return response;
    }
    const { search, protocol, host } = request.nextUrl;
    const domain = getDomain(host);
    // console.log(domain);

    const list = ["AFNR", "SCRID", "AWIN"];
    const listResult = list.map((item) => {
        const result = request.nextUrl.searchParams.get(item.toLowerCase());
        return result ? { item, value: result } : null;
    });

    listResult.forEach((result) => {
        if (result) {
            console.log(result);
            console.log(domain);
            response.cookies.set(result.item, result.value, {
                path: "/",
                domain: domain,
                maxAge: 1000 * 60 * 60 * 24 * 30, // 30 days
                secure: "true",
                httpOnly: "false",
                sameSite: "lax",
            });
        }
    });

    return response;
};

export default cookieMiddleware;

marketingSlugMiddleware.js

import { NextResponse } from "next/server";

const handleMarketingSlug = (search, request) => {
    let queryString = decodeURIComponent(search);
    if (
        queryString.includes(`?menu:loadMenu(`) ||
        queryString.includes(`?produkt:showProdukt(`) ||
        queryString.includes(`?/menu:loadMenu(`) ||
        queryString.includes(`?/produkt:showProdukt(`)
    ) {
        queryString = queryString.replace("?/", "?");
        //////EXAMPLES
        //mystr = "https://www.something.de/#menu:loadMenu('','SUCHE',0,0,0,true,false,false,false,false,false,0,'',2000020,27000270,'ARMANI%20COLLEZIONI','','','','','',0,'','hemden_blau',0,'','','')";
        //mystr = "https://www.something.de/#menu:loadMenu('menu_th_Hemden','Hemden',3,0,0,true,false,false,false,false,false,0,'13',3000030,23000230,'Calvin%20Klein','','','','','',0,'','',0,'','','')";
        //mystr = "https://www.something.de/#produkt:showProdukt(130514,false,false)";
        let formatedQuery = "";

        if (queryString.includes(`?menu:loadMenu(`)) {
            queryString = queryString.replace(`?menu:loadMenu(`, "").replace(")", "").replace(/'/g, "").replace(/SUCHE/g, "").replace(/true/g, "").replace(/false/g, "").replace("0", "");
            queryString = queryString.replace(/,,/g, ",");
            queryString = queryString.split(",");
            // console.log(queryString);
            for (const item of queryString) {
                if (item.includes("menu_th_")) {
                } else if (isNaN(parseInt(item))) {
                    formatedQuery += item.replace(/[^a-z0-9]/gi, "/") + "/"; // get only alpha numeric and add slash to end
                } //
            }
            formatedQuery = formatedQuery.replace(/([^:]\/)\/+/g, "$1"); // remove traiing slash
            if (formatedQuery[0] == "/" && formatedQuery[1] == "/") {
                // if first and second char is slash
                formatedQuery = formatedQuery.substring(1, formatedQuery.length);
            }
            // console.log(formatedQuery);
            return NextResponse.redirect(new URL(formatedQuery, request.url));
            // redirect here
        } else if (queryString.includes(`?produkt:showProdukt(`)) {
            formatedQuery += queryString.match(/\d+/g); // get only numbers
            // console.log(queryString.match(/\d+/g));
            // console.log(formatedQuery);
            return NextResponse.redirect(new URL(formatedQuery, request.url));
        }
    }
};

export default handleMarketingSlug;


0 Answers
Related