Blank page when using middleware

[sunknudsen]

Summary

Hey,

When using following middleware in development mode (next dev), all routes yield blank page.

If I build app (next build), then everything works as expected.

Issue is only present since upgrading to 13.3.2 from 13.2.4.

Is this a regression or I am missing something?

Thanks for helping out!

import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"

export const middleware = (request: NextRequest) => {
  const response = NextResponse.next()
  const token = request.nextUrl.searchParams.get("token")
  if (token) {
    response.cookies.set("token", token, {
      httpOnly: true,
      maxAge: 60 * 60 * 24,
      path: "/",
      sameSite: "strict",
      secure: process.env.NODE_ENV !== "development",
    })
  }
  return response
}

export const config = {
  matcher: "/((?!api|favicon.ico|favicon.png|_next/image|_next/static).*)?",
}

Additional information

No response

Example

No response

[sunknudsen]

Issue is caused by compress: true in config which likely reveals an underlying Next.js development-mode web server regression.

[tommaton]

We're also seeing this happen when we've upgrade to version 13.3.x so have reverted back to 13.2.4.

We're using next-intl in our middleware and have the compress option set to false within our config but still the issue happens

[AaronFriel]

I think the issue is caused by the compress key being present. compress: false also causes this behavior on Next 13.4.9.

[EmitoSanti]

Yes.. we must use "compress: true" in the version Next 13.4.9

2 hours lost from my day. I need beer.

Thanks @AaronFriel @tommaton and @sunknudsen

[adityapatadia]

OMFG. We spent 2 days on this. 😣

[mudit2108]

This issue is not limited to development mode, dynamic pages in production build would behave similar to development server.
"compress: true" solves it for both dev static pages and prod dynamic pages...

[Stehos]

I have Next.js v13.5.6 and in production after a while (maybe 5 hours later) from the production build only a blank website is present without any error in the dev console or in docker logs.

Is anyone facing this strange issue? Thanks.

{
  "name": "weyou",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@next/font": "13.1.6",
    "@types/node": "18.11.18",
    "@types/react": "18.0.27",
    "@types/react-dom": "18.0.10",
    "eslint": "8.33.0",
    "eslint-config-next": "13.1.6",
    "flowbite": "^1.6.3",
    "flowbite-typography": "^1.0.3",
    "next": "^13.2.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-markdown": "^8.0.5",
    "typescript": "4.9.5"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.7"
  },
  "engines": {
    "npm": ">=10.2.5"
  }
}

Dockerfile:

FROM node:18
WORKDIR /app
COPY package.json ./
RUN npm i

COPY . .

RUN yarn build

CMD yarn start

[ali-n4i]

Removing runtime: 'nodejs', from the config in middleware fixed the issue for me.

[epignosisx]

@ali-n4i did you ever figure out the problem? I'm on 15.4.7, moved to runtime: 'nodejs' and started getting the blank page.

[tlenclos]

We were using runtime: 'nodejs' also in the middleware, upgrading from 15.3.3 to 15.5.2 fixed the issue for us.