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 #1872), thanks @brainer1

[tomoyukikashiro]

I'm looking for volunteers to test and give feedback on the improvements as part of a gated beta in the coming weeks.

@michrome Thank you for your great support to be able to use Next.js v12 on Amplify.

Regarding Next.js v12 support, I have a quick question. Could you share the timeline for supporting Next.js v12 on Amplify ?

We are considering to switch our infrastructure for our Next.js v12 application from Vercel to Amplify but we have no idea that ...

• Move to Amplify now with downgrading Next.js v11 to work on Amplify or
• Wait Next.js v12 official support on Amplify then move

More concrete information about schedule of Next.js v12 support on Amplify, it might be helpful for us to decide it.

[Rafcin]

@tomoyukikashiro It might be this week, it might be next week it's a bit up in the air, the Amplify team are probably working on some final changes.

You can use Next 12 right now no problem, you just won't be able to utilize middleware or any of the other new features until the beta.

[michrome]

Hey @tomoyukikashiro thanks for reaching out and for your interest. Without knowing the specifics of your app and its infrastructure (you're most welcome to share that with me jrm@amazon.com) my instinct would be to wait, not downgrade.

[tomoyukikashiro]

Hey @tomoyukikashiro thanks for reaching out and for your interest. Without knowing the specifics of your app and its infrastructure (you're most welcome to share that with me jrm@amazon.com) my instinct would be to wait, not downgrade.

@michrome Thank you for your replaying. Joining into your a gated beta program would be good but we do not have enough time to move our platform. ( kind of rush )

Let me check our timeline and keep watching amplify team's updates on this issue. Thank you for your kind support!

[Leejjon]

I'm looking for volunteers to test and give feedback on the improvements as part of a gated beta in the coming weeks.

@michrome Thank you for your great support to be able to use Next.js v12 on Amplify.

Regarding Next.js v12 support, I have a quick question. Could you share the timeline for supporting Next.js v12 on Amplify ?

We are considering to switch our infrastructure for our Next.js v12 application from Vercel to Amplify but we have no idea that ...

* Move to Amplify now with downgrading Next.js v11 to work on Amplify
  or

* Wait Next.js v12 official support on Amplify then move

More concrete information about schedule of Next.js v12 support on Amplify, it might be helpful for us to decide it.

Just stay on Vercel. It has much faster build & deploy times. And it seems like it will take them a year to support Next.js 12. Our company chose for Amplify because they are all in on AWS, but we have regret our choice. Sure I hope Amplify will get better with Next.js 12 support, but let them first prove it.

[maximgeerinck]

I'm looking for volunteers to test and give feedback on the improvements as part of a gated beta in the coming weeks.

@michrome Thank you for your great support to be able to use Next.js v12 on Amplify. Regarding Next.js v12 support, I have a quick question. Could you share the timeline for supporting Next.js v12 on Amplify ? We are considering to switch our infrastructure for our Next.js v12 application from Vercel to Amplify but we have no idea that ...

* Move to Amplify now with downgrading Next.js v11 to work on Amplify
  or

* Wait Next.js v12 official support on Amplify then move

More concrete information about schedule of Next.js v12 support on Amplify, it might be helpful for us to decide it.

Just stay on Vercel. It has much faster build & deploy times. And it seems like it will take them a year to support Next.js 12. Our company chose for Amplify because they are all in on AWS, but we have regret our choice. Sure I hope Amplify will get better with Next.js 12 support, but let them first prove it.

There are actually also drawbacks on vercel, in terms of DNS it's not always flexible enough, which can be resolved by using AWS. We currently use serverless-nextjs (https://github.com/serverless-nextjs/serverless-next.js) which manages everything rather well, except for .... middleware and other route rewrite features. Hoping to have this on amplify or on serverless-nextjs soon.

Also heard that Amplify is more expensive than hosting it using serverless-nextjs (saw some benchmarks stating double?) not sure if true as i haven't tested it myself. Either way, cheaper than vercel for big bandwiths

[jason-nivelo]

Any updates on this... can't believe v12 isn't supported yet

[CauanCabral]

Looking for an update too

[moralonhub]

Any updates on this?

[michrome]

Thank you all for your continued patience and for volunteering to try the beta. Work's still underway: will let you know as soon as it's ready.

[nvdvrts]

It's also worth mentioning that as of what I tested, on-demand revalidation is not working as well.

[HectorMu]

Thank you all for your continued patience and for volunteering to try the beta. Work's still underway: will let you know as soon as it's ready.

Can I be part of the test team? :D

[michrome]

Of course @HectorMu . If you're interested in taking part, email me at jrm@amazon.com. In the email, let me know your AWS Account ID and I will flag you in when the beta is available.

[Leejjon]

Congratulations to Vercel on releasing Next.js 13. Now amplify is two versions behind.

[MichalBunkowski]

At this point I don't see any reason to use amplify with Next.js application. I will just switch to Vercel platform and thats it.

[Rafcin]

@Leejjon I'm sure once the new Amplify Next build system is out of beta you'll be pleased with the results. Next 13 doesn't introduce any breaking deployment changes, since Next 12, Vercel has been working on making deployment easier so when the Amplify beta moves into production you will be able to use 12 and 13 just fine.

[Rafcin]

@MichalBunkowski, I get you; I, too, thought about switching to Vercel many times. I want to say if you can hang on a bit longer, please do. I genuinely think you'll be happy with the new system!!!

As far as I understand, the vision for the new build system has been to make it work with existing frameworks and future frameworks and avoid using dependencies such as serverless-next, which has been the most significant issue when it comes to deploying Next apps. Vercel exists in a bubble, it's Next, and only Next they focus on, and given they are starting to make most of the valuable tools people use, they have an advantage in regards to hosting features and using all the latest bells and whistles. Amplify is looking to make it easy for any framework to get up and running efficiently, and quickly and have the same bells and whistles, and I think soon AWS will start catching up with Vercel, and then it'll be an even playing field.

Also sorry for the long post, I didn't mean to write such a long post, but I feel bad for the shit the Amplify team gets. It's tough, man; AWS focuses on making the features customers want, and to fulfill all those requests take some time and a lot of work so I get why it's taken a while.

[baltagih2]

Any ballpark estimation for when this will be out of beta and ready for production? I really, really don't want to move away from Amplify but we have features that we can't deploy because of this and our limit is mid-November before either moving to Vercel or another platform or taking out all of the features that are not supported and deploying the new version (most of which are our money-makers). I just wanna know if we can expect this to be ready in the next 2-3 weeks or if that will be almost impossible before end of year.

I know that this is not an easy task and that the Amplify team is hard at work and I thank you for this, but having a public roadmap or estimation of some sort would be extremely helpful to your customers.

[maximgeerinck]

Taking the beta for a spin now, will report back.

[Leejjon]

Taking the beta for a spin now, will report back.

The beta isn't there yet. Or at least I didn't got notified.

[andre-mr]

We are in the experimental phase of a new website that uses features from Next 12. When we discovered the problems with Amplify and version 12 of Next, we opted for a palliative: what we are doing is using a hobby account at Vercel for this step with hope for Amplify to update by the end of the year, when we will need to launch the product and opt for one or another service, if Amplify still doesn't support it, we'll have to subscribe to Vercel.

But I have a question about the differences between one and the other, about lambda functions: from what I understand Vercel uses AWS lambdas and its own CDN network called “Vercel Edge Network”. After deploying Vercel allows you to select the function region. In my case I can select the same region where our DynamoDB table and other AWS Lambdas are, for lower latency. However, in deployments with Next on Amplify, 3 or 4 Lambda Edge functions are created in the US region, with no option to change, and AWS uses its CDN network. For the pages that are not static but SSR, isn't it an advantage to be able to choose the region of the function as with Vercel?

Will this behavior remain the same in the changes being tested in Beta?

By the way, I created a basic sample SSG page and another SSR with Next and deployed them to Amplify and to Vercel, then tested with PageSpeed. Amplify was faster in every run, and I really don't know why. Funcion region differences maybe? Influence from Google testing region? don't know...

But it would be nice to see Amplify update and better Next support to be as easy as with Vercel, since for all other services we're already using Amazon.

[Rafcin]

We are in the experimental phase of a new website that uses features from Next 12. When we discovered the problems with Amplify and version 12 of Next, we opted for a palliative: what we are doing is using a hobby account at Vercel for this step with hope for Amplify to update by the end of the year, when we will need to launch the product and opt for one or another service, if Amplify still doesn't support it, we'll have to subscribe to Vercel.

But I have a question about the differences between one and the other, about lambda functions: from what I understand Vercel uses AWS lambdas and its own CDN network called “Vercel Edge Network”. After deploying Vercel allows you to select the function region. In my case I can select the same region where our DynamoDB table and other AWS Lambdas are, for lower latency. However, in deployments with Next on Amplify, 3 or 4 Lambda Edge functions are created in the US region, with no option to change, and AWS uses its CDN network. For the pages that are not static but SSR, isn't it an advantage to be able to choose the region of the function as with Vercel?

Will this behavior remain the same in the changes being tested in Beta?

By the way, I created a basic sample SSG page and another SSR with Next and deployed them to Amplify and to Vercel, then tested with PageSpeed. Amplify was faster in every run, and I really don't know why. Funcion region differences maybe? Influence from Google testing region? don't know...

But it would be nice to see Amplify update and better Next support to be as easy as with Vercel, since for all other services we're already using Amazon.

When you deployed serverless through Amplify normally I think it deploys lambdas in us-east-1 although I believe that doesn't matter for behind the scenes you'll still get the same performance everywhere. Someone correct me if I'm wrong please. Because as far as I understand if you deployed serverless in us-west-2 it worked for any region.

I guess it doesn't hurt to say it here. New builds such as the graphql-api example from the Next repo builds in 2m22s as opposed to 15-20min. It's pretty damn fast.

[Rafcin]

Taking the beta for a spin now, will report back.

The beta isn't there yet. Or at least I didn't got notified.

I would contact Mike then. His email is listed above.

[Bonobomagno]

Any way to get the beta access?

Taking the beta for a spin now, will report back.

The beta isn't there yet. Or at least I didn't got notified.

I would contact Mike then. His email is listed above.

Any chance to get the beta access? A lot of big companies are moving on next, and it's a shame this old support. Also, if you use something like NX, good luck on enabling next..

[sjerratsch]

I got an email from Mike today, so it seems like the beta is out. As Rafcin said, I'd contact him...

[Sodj]

Next 13 is out and we're still unable to use Next 12 I don't think I can recommend using amplify with Next if the new version support is this slow

[swaminator]

@Sodj please get on the beta. We have been testing the Next.js 13 features on our service and so far all the GA features (i.e. features not in alpha or beta) work. We will be making this feature available to all customers soon. Thank you for your patience.

[guttenbergovitz]

considering Next13 has just been released - should we target this issue for Next14 Amplify cooperation? i mean let's keep targets realistic when it comes to timing...

[Huetarded]

Next 13 is out and we're still unable to use Next 12

@Sodj What am I missing here? I have multiple projects running in Amplify that use Next.js 12.

Are you referring to a specific feature or set of features?

[Sodj]

@Huetarded Mainly the middleware feature

[Huetarded]

@Sodj - Ah, gotcha

[kdta91]

Next 13 is out and we're still unable to use Next 12 I don't think I can recommend using amplify with Next if the new version support is this slow

Middleware in my case. Static ones are perfectly fine with 12. Any chance you found a workaround?

[neoplastic]

So there's a new migrate to Next.js 12/13 feature in the Amplify web console. I'm unsure if I should try this on something that's production... (I'm still running a Next.js 11 application)

[calavera]

@neoplastic we're starting to enable the program that @michrome mentioned a few weeks ago to more accounts, congratulations! We recommend to test with apps that people don't have in production yet, even deploying that same code in a new app, and updating to Next.js 12 or 13 before. If you're on Next.js 11, the migration won't help you.

Edit: Btw, the banner should say Next.js 12 and 13, both versions work (updated message coming soon) 😅

[neoplastic]

Yeah, I'm going to be super careful about this and try it out in a new app. Thanks @calavera and @michrome!

For anyone who's interested. I've done a relatively quick upgrade of Next.js (11 -> 13 latest stable) and fixed up a bunch of errors and the build result times are: Next.js 11 - 22m43s Next.js 13 - 5m31s

That's a build time reduction of about 75%

2127

[calavera]

nice! thanks for the quick turnaround @neoplastic !

[MejanH]

facing error from Terraform. Error: expected platform to be one of [WEB WEB_DYNAMIC], got WEB_COMPUTE. I guess I should wait for the AWS underlying API update?

[calavera]

@MejanH yes, sorry for the trouble. The API will be released soon, it takes a little longer because we need to coordinate with other teams to update SDKs.

[sync2920]

I have a newly hosted nextjs12 app. However, it builds but does not deploy. It looks like the cloudfront distribution that is supposed to be created by amplify is not increasing either. Any troubleshooting on this?

[ferdingler]

@sync2920 can I have your appId please?

[sync2920]

@ferdingler Thank you for your reply. The appId is "d3mzsawj4eee6l". Best regards.

[calavera]

@sync2920 You might have reached the url too early. When I load your app now, it shows a 500 error coming from Next.js. You should be able to see the application logs if you go your application page, then click in "Monitoring", then "Amplify Hosting compute logs", then click the link that will take you to CloudWatch logs.

[ferdingler]

@sync2920 thank you. I can see that your app got deployed properly but it is throwing 5xx errors. Yes, check your logs in CloudWatch, you should be able to see what errors are happening in your SSR pages as @calavera suggests.

[sync2920]

@calavera @ferdingler Oh... When I upgraded my existing app to the new build system, no matter how many changes I made, the content in the page did not change, so I created a new app, but I guess I forgot to bring environment variables and other settings... Thank you!

Could it be that the distributions created by amplify are no longer visible from the cloudfront page?

[calavera]

Could it be that the distributions created by amplify are no longer visible from the cloudfront page?

we don't create distributions in your account anymore.

[sync2920]

Thank you very much, I apologize for the inconvenience.

[renchris]

I updated with the migrate to web compute button, however, now, the web application through my customs domains don't work

mydomain.com goes to the secondary early-stage branch of my project https://mydomain.com goes to an error page of

This site can’t be reached mydomain.com took too long to respond. Try:

Checking the connection Checking the proxy and the firewall ERR_CONNECTION_TIMED_OUT

[ferdingler]

@renchris if you need to revert your App to the previous platform, you can run the following command using the AWS CLI:

aws amplify update-app --app-id {APP_ID} --platform WEB_DYNAMIC

and then run a build.

[mattmcdonald-uk]

Tested this morning with a Next.js app using v13 that was previously unable to deploy and everything worked perfectly! Great job everyone who made this happen! 🥳

[mxkxf]

Our Next.js v12 app build time (~4 mins) is a third of what it is on the current Amplify hosting (~12 mins), which is great to see!

Did a quick Lighthouse test and the perf scores (TTI, FCP, LCP) are all the same as our current production non-beta app.

Struggling to find any decent guides about setting up ISR though, can anyone help there?