I'm trying to redirect to the locale url on every pages using NextJS middleware.

But for some reason, when the matcher in middleware matches a page, all props that passed from its getServerSideProps are undefined. Removing middleware making it working fine again.

I tried running build and start in my pc, it was running fine. But somehow didn't work on my VPS (Oracle, running the app using Docker).

// middleware.ts

import locales from "@/locales.json";
import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";

// Regex to check whether something has an extension, e.g. .jpg
const PUBLIC_FILE = /\.(.*)$/;

export function middleware(request: NextRequest) {
  const { nextUrl } = request;

  const pathname = nextUrl.pathname;

  if (
    pathname.startsWith("/_next") || // exclude Next.js internals
    pathname.startsWith("/api") || //  exclude all API routes
    pathname.startsWith("/static") || // exclude static files
    pathname.startsWith("/proxy") || // analytics proxy
    PUBLIC_FILE.test(pathname) // exclude all files in the public folder
  ) {
    console.log("Skipped", pathname);

    return NextResponse.next();
  }

  console.log("Passed", pathname);

  const languageCookie = request.cookies.get("NEXT_LOCALE");

  const cookieLanguage = languageCookie?.value;

  const language = cookieLanguage || "en";

  try {
    if (locales.some((locale) => nextUrl.href.includes(`/${locale}/`))) {
      return NextResponse.next();
    }

    // English is default, we don't need locale in the url
    if (language === "en") {
      return NextResponse.next();
    }

    const url = nextUrl.clone();
    url.pathname = `/${language}${pathname}`;

    return NextResponse.redirect(url);
  } catch (error) {
    console.log(error);
  }
}

// pages/index.ts

// console.log on this function doesn't trigger
export async function getServerSideProps(context) {
  const greeting = 'hello';

  return {
    props: {
      greeting,
    },
  };
}

export default function Home({ greeting }) {
  console.log(greeting); // undefined, causing the app break.
   ...

FROM node:18-alpine AS base

# Install dependencies only when needed
FROM base AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi

FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .


RUN yarn build

FROM base AS runner
WORKDIR /app

ENV NODE_ENV production

RUN addgroup --system --gid 1001 kaguya
RUN adduser --system --uid 1001 web

COPY --from=builder /app/public ./public

# Set the correct permission for prerender cache
RUN mkdir .next
RUN chown web:kaguya .next

COPY --from=builder --chown=web:kaguya /app/.next/standalone ./
COPY --from=builder --chown=web:kaguya /app/.next/static ./.next/static

USER web

EXPOSE 3000

ENV PORT 3000

CMD ["node", "server.js"]