Support Next.js 12

[quinnturner]

Next.js v12 was just announced by Vercel. This issue is requesting for Next.js v12 support on Amplify Hosting.

Here's a checklist for general support. Some of these may Just Work ™️ out of the box; I haven't tested much.

• Basic v12 support (my non-/api-using app seems to work out of the box. It still uses Babel, would be good to confirm with an app building with swc)
• React 18 support: native Next.js APIs & Suspense
• Native ES Modules support
• Middleware support (beta) (with Lambda@Edge)
• <Image /> AVIF Support: Opt-in for 20% smaller images
• Bot-aware ISR Fallback: Optimized SEO for web crawlers
• URL imports (alpha)
• React Server Components (alpha) with Next.js at the Edge

Known issues at this time:

• /api routes can result in Module not found errors, likely related to Webpack 5 (see Next SSR Support does not work with imported files #1872), thanks @brainer1

[andrewgadziksonos]

For React18, does AWS Lambda support NodeJS streams? Searching around the internet seems to suggest they dont.

For reference, reactwg/react-18#22

[brainer1]

we get a 503 error while attempting to access our /apis after upgrading to next12. we didn't change anything besides the upgrade. does anyone have a clue to why this might be happening?

[quinnturner]

we get a 503 error while attempting to access our /apis after upgrading to next12. we didn't change anything besides the upgrade. does anyone have a clue to why this might be happening?

Post CloudWatch logs if you can 😄

[brainer1]

2021-10-27T19:13:15.108Z	7b7ebdab-3a1d-4e16-9435-ab5ffe689052	ERROR	Invoke Error 	{
    "errorType": "Error",
    "errorMessage": "Cannot find module '../../webpack-api-runtime.js'\nRequire stack:\n- /var/task/pages/api/use-number.js\n- /var/task/index.js\n- /var/runtime/UserFunction.js\n- /var/runtime/index.js",
    "code": "MODULE_NOT_FOUND",
    "requireStack": [
        "/var/task/pages/api/use-number.js",
        "/var/task/index.js",
        "/var/runtime/UserFunction.js",
        "/var/runtime/index.js"
    ],
    "stack": [
        "Error: Cannot find module '../../webpack-api-runtime.js'",
        "Require stack:",
        "- /var/task/pages/api/use-number.js",
        "- /var/task/index.js",
        "- /var/runtime/UserFunction.js",
        "- /var/runtime/index.js",
        "    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)",
        "    at Function.Module._load (internal/modules/cjs/loader.js:745:27)",
        "    at Module.require (internal/modules/cjs/loader.js:961:19)",
        "    at require (internal/modules/cjs/helpers.js:92:18)",
        "    at /var/task/pages/api/use-number.js:198:27",
        "    at Object.<anonymous> (/var/task/pages/api/use-number.js:204:3)",
        "    at Module._compile (internal/modules/cjs/loader.js:1072:14)",
        "    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)",
        "    at Module.load (internal/modules/cjs/loader.js:937:32)",
        "    at Function.Module._load (internal/modules/cjs/loader.js:778:12)"
    ]
}

[brainer1]

i'm suspecting that it has to do with next-transpile-modules but i'm not sure. i'm going to remove an import that i think depends on it from that file and see what happens

[brainer1]

tried to upgrade to next-transpile-modules-v9 but still the same result

probably related to this: #1872

perhaps it's time to fully support webpack 5?

[hughesjj]

If we're using latest in our nextjs amplify app build settings, is there any way to peg it to 11 instead of falling back to ex 10, or having it pick up 12 whenever you release it?

I currently have the following environment variable set in my amplify application. When trying to set the version to "11" earlier this year, it would give me an error/unexpected behavior.

_LIVE_UPDATES: '[{"pkg":"next-version","type":"internal","version":"latest"}]',

[madeupname]

It seems to me that at a minimum, the docs should be updated to state v11 is the highest you can use. I had posted a problem to StackOverflow and it seems the solution is roll back to 11:

https://stackoverflow.com/questions/70219534/next-js-run-dev-fails-with-error-object-object

Or possibly, from the previous comment here, roll back to Webpack 4.

But as a new user, it sounds like if I want to use Amplify it'll be easier for me to stick with basic React and ditch Next.js.

[Danetag]

Hi team! Is there a roadmap/release date regarding the support of Next 12? Thanks!

[michaelangeloio]

@Danetag Second this question. Any update?

[MichalOsadowski]

Any updates?

[calexandru]

Any updates on this?

[drmzio]

Updates on this? @swaminator