[Bug]: Upgrading @netlify/plugin-nextjs to 4.36.1 breaks he usage with next-intl

[KrustyC]

Summary

I have a repo with NextJs and Netlify as well as next-intl installed. Up until the version 4.36.0, all worked fine, provided I set NEXT_DISABLE_NETLIFY_EDGE to true, but now when I upgrade it fails with an error middleware is not a function and with the following stack trace

[next-dev] TypeError: middleware is not a function
    at handler (file:///Users/davidecrestini/repo/sites/next-netlify-test/.netlify/edge-functions/next-dev/index.js:78:28)
    at async FunctionChain.runFunction (https://64523ab4e7865600087fc3df--edge.netlify.app/bootstrap/function_chain.ts:390:22)
    at async FunctionChain.run (https://64523ab4e7865600087fc3df--edge.netlify.app/bootstrap/function_chain.ts:310:20)
    at async handleRequest (https://64523ab4e7865600087fc3df--edge.netlify.app/bootstrap/handler.ts:80:22)
    at async Server.#respond (https://deno.land/std@0.170.0/http/server.ts:299:18)

I even installed @netlify/next but that didn't solve the issue either, neither when I run the app locally (with netlify dev), nor when I push and build it on Neltify.

Steps to reproduce

1. clone https://github.com/KrustyC/next-netlify-test
2. installed the dependencies and run netlify dev; everything should work
3. stop the app
4. run npm i @netlify/next @netlify/plugin-nextjs@latest next@latest
5. run netlify dev
6. open http://localhost:8888 on your browser

A link to a reproduction repository

https://github.com/KrustyC/next-netlify-test

Next Runtime version

13.3.1 and above

Is your issue related to the app directory (beta)?

• Yes, I am using the app directory

More information about your build

• I am building using the CLI
• I am building using file-based configuration (netlify.toml)

What OS are you using?

Mac OS

Your netlify.toml file

`netlify.toml`

[build]
  command = "npm run build"
  publish = ".next"
  environment = { NODE_VERSION = "16.15.0" }
 
[dev]
 command = "npm run dev"
 
[functions]
  directory = "netlify/functions"
  node_bundler = "esbuild"
  external_node_modules = ["sharp"]
  included_files = ["node_modules/sharp/**/*"]

[[plugins]]
package = "@netlify/plugin-nextjs"

[[plugins]]
  package = "@netlify/plugin-lighthouse"

  [plugins.inputs]
    run_on_success = "true"

Your public/_redirects file

I do not have a public _redirects

Your next.config.js file

`next.config.js`

const ms = require("ms");
const withNextIntl = require("next-intl/plugin")(
  // This is the default (also the `src` folder is supported out of the box)
  "./src/i18n.ts"
);

/** @type {import('next').NextConfig} */
const nextConfig = withNextIntl({
  env: {
    environment: process.env.ENVIRONMENT || "local",
    baseUrl: process.env.BASE_URL || "http://localhost:8888",
  },
  experimental: {
    appDir: true,
  },
  images: {
    domains: [
      "i.natgeofe.com",
      "picsum.photos",
      "images.ctfassets.net",
    ],
  },
  headers() {
    return [
      {
        // Cache all content pages
        source: "/((?!_next|.*\\..*).*)",
        headers: [
          {
            key: "Cache-Control",
            value: [
              `s-maxage=` + ms("1d") / 1000,
              `stale-while-revalidate=` + ms("1y") / 1000,
            ].join(", "),
          },
        ],

        // If you're deploying on a host that doesn't support the `vary` header (e.g. Vercel),
        // make sure to disable caching for prefetch requests for Server Components.
        // missing: [
        //   {
        //     type: "header",
        //     key: "Next-Router-Prefetch",
        //   },
        // ],
      },
    ];
  },
});

module.exports = nextConfig;

Builds logs (or link to your logs)

https://app.netlify.com/sites/test-next13-netlify/deploys/645e0aaddcbd190008876f08

Function logs

Function logs (this are on my local)

[next-dev] TypeError: middleware is not a function
    at handler (file:///Users/davidecrestini/repo/sites/next-netlify-test/.netlify/edge-functions/next-dev/index.js:78:28)
    at async FunctionChain.runFunction (https://64523ab4e7865600087fc3df--edge.netlify.app/bootstrap/function_chain.ts:390:22)
    at async FunctionChain.run (https://64523ab4e7865600087fc3df--edge.netlify.app/bootstrap/function_chain.ts:310:20)
    at async handleRequest (https://64523ab4e7865600087fc3df--edge.netlify.app/bootstrap/handler.ts:80:22)
    at async Server.#respond (https://deno.land/std@0.170.0/http/server.ts:299:18)

.next JSON files

I can not see any of the suggested files in my .next folder

[KrustyC]

Just to clarify this happens both with NEXT_DISABLE_NETLIFY_EDGE set to true and set to false

[LekoArts]

Just to clarify:

This only happens during netlify dev? Because the code path you're hitting should only be executed during netlify dev

[LekoArts]

I'd know how to fix it but asked here first: amannn/next-intl#290 (comment)

[KrustyC]

@LekoArts Yes indeed! I updated some dependencies today on a different repo and I noticed that whilst it works just fine when I build it on Netlify, on my local I keep getting 'middleware is not a function'. So I believe your assumption is definitely correct

[LekoArts]

Try version 4.37.1 of @netlify/plugin-nextjs, it should be fixed now

[KrustyC]

@LekoArts thanks for the quick fix! I tested on my local and I can confirm this is now working, although it seems like the config matcher is not respected at all, so I had to create a middleware like this to make it work in the end:

import createMiddleware from "next-intl/middleware";
import { NextRequest, NextResponse } from "next/server";

const intlMiddleware = createMiddleware({
  locales: ["en", "it"],
  defaultLocale: "en",
});

const SKIP_PREFIXES = [
  "/_next",
  "/api",
  "/en/api",
  "/it/api",
  "/favicon.ico",
  "/robots.txt",
  "/_ipx",
  "/__nextjs",
  "/icons",
];

export function middleware(req: NextRequest) {
  if (SKIP_PREFIXES.some((prefix) => req.nextUrl.pathname.startsWith(prefix))) {
    return NextResponse.next();
  }

  return intlMiddleware(req);
}

export const config = {
  // Skip all paths that should not be internationalized
  matcher: [
    "/((?!icons|_next/static|_next/image|api|en/api|it/api|sitemap.xml|robots.txt|_ipx|favicon.ico).*)",
  ],
};

This workaround works for most things although I am getting some weird issues with one the fonts I am using, which did not happen before this, so I am really not sure what this depends on.

[LekoArts]

Try using the Advanced Middleware: https://docs.netlify.com/integrations/frameworks/next-js/middleware/#next-js-advanced-middleware-with-the-netlify-next-library