Next 12.2 middleware support - remove target config (#2477)

[revmischa]

target is no longer a supported configuration option in nextjs.

If you try to use a recent version of Nextjs with middleware this becomes a build error: https://github.com/serverless-nextjs/serverless-next.js/issues/2477

Perhaps we should remove the useServerlessTraceTarget option or just assume it is true?

Also the nextjs output directory now appears to be called server not serverless?

---

Also we need to support the next ESM config format for nextjs - next.config.mjs If we try to require() the ESM config it errors with:

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/cyber/dev/sst-prisma/web/next.config.mjs not supported.
Instead change the require of /Users/cyber/dev/sst-prisma/web/next.config.mjs to a dynamic import() which is available in all CommonJS modules.

I tried changing the require to dynamic import but TS appears to rewrite it as a require() anyway, I assume because allowSyntheticDefaultImports is set in the tsconfig. If I disable it then it throws the error

[!] (plugin rpt2) Error: /Users/cyber/dev/serverless-next.js/packages/libs/lambda-at-edge/src/render/renderStaticPage.ts(17,8): semantic error TS1259: Module '"/Users/cyber/dev/serverless-next.js/node_modules/get-stream/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

So we can't support importing mjs config files right now I guess 🤷🏻

Results

These changes at least let me build my app. But I get an error:

{
    "errorType": "NoSuchKey",
    "errorMessage": "The specified key does not exist.",
    "trace": [
        "NoSuchKey: The specified key does not exist.",
        "    at NoSuchKey.ServiceException [as constructor] (/var/task/default-handler-77b31b10.js:94540:28)",
        "    at NoSuchKey.S3ServiceException [as constructor] (/var/task/default-handler-77b31b10.js:108092:28)",
        "    at new NoSuchKey (/var/task/default-handler-77b31b10.js:108884:28)",
        "    at /var/task/default-handler-77b31b10.js:109759:21",
        "    at step (/var/task/default-handler-77b31b10.js:93875:23)",
        "    at Object.next (/var/task/default-handler-77b31b10.js:93856:53)",
        "    at /var/task/default-handler-77b31b10.js:93849:71",
        "    at new Promise (<anonymous>)",
        "    at __awaiter$2 (/var/task/default-handler-77b31b10.js:93845:12)",
        "    at deserializeAws_restXmlNoSuchKeyResponse (/var/task/default-handler-77b31b10.js:109755:89)"
    ]
}

From default-handler Trying to figure out why

This is the key requested:

  Bucket: 'mish-myapp-web-webs3bucketfc3227bc-nox12ec1n4b2',
  Key: 'static-pages/f_wubnUGwtW5tzEks39VV/404.html'

This is the bucket:

Interestingly the BUILD_ID file that gets uploaded to the S3 bucket has the new, correct build ID but the static-pages dir doesn't contain the new build folder (it exists on the filesystem though in .next/static)

[slsnextbot]

Handler Size Report

There are changes to handler sizes. Please review.

Base Handler Sizes (kB) (commit e6367b585fb98608cd2e9327e2c8d4058ba73b00)

{
    "Lambda": {
        "Default Lambda": {
            "Standard": 1578,
            "Minified": 692
        },
        "Image Lambda": {
            "Standard": 1543,
            "Minified": 831
        }
    },
    "Lambda@Edge": {
        "Default Lambda": {
            "Standard": 1588,
            "Minified": 698
        },
        "Default Lambda V2": {
            "Standard": 1580,
            "Minified": 694
        },
        "API Lambda": {
            "Standard": 634,
            "Minified": 318
        },
        "Image Lambda": {
            "Standard": 1551,
            "Minified": 835
        },
        "Regeneration Lambda": {
            "Standard": 1233,
            "Minified": 566
        },
        "Regeneration Lambda V2": {
            "Standard": 1307,
            "Minified": 596
        }
    }
}

New Handler Sizes (kB) (commit a24740caa3b6e01609df59a6c803988d7b3e2b9e)

{
    "Lambda": {
        "Default Lambda": {
            "Standard": 1849,
            "Minified": 802
        },
        "Image Lambda": {
            "Standard": 1814,
            "Minified": 956
        }
    },
    "Lambda@Edge": {
        "Default Lambda": {
            "Standard": 1860,
            "Minified": 808
        },
        "Default Lambda V2": {
            "Standard": 1851,
            "Minified": 804
        },
        "API Lambda": {
            "Standard": 634,
            "Minified": 318
        },
        "Image Lambda": {
            "Standard": 1821,
            "Minified": 961
        },
        "Regeneration Lambda": {
            "Standard": 1505,
            "Minified": 676
        },
        "Regeneration Lambda V2": {
            "Standard": 1578,
            "Minified": 706
        }
    }
}

[rntvicente]

Hi, thanks for this initiative. Do you happen to have a merge preview?

Currently I can't use Next12 middleware.

[revmischa]

I don't know if these changes are worth pursuing for this module. I want to investigate the much simplified approach using the new standalone output option in NextJShttps://github.com/serverless-stack/sst/issues/1988 described here: https://github.com/vercel/next.js/discussions/33275#discussioncomment-3343424

I would also advise checking out https://github.com/sladg/nextjs-lambda

[revmischa]

Anyone who wants to deploy NextJS on AWS should look at https://github.com/jetbridge/cdk-nextjs or https://docs.sst.dev/constructs/NextjsSite