Migrate to nextjs 15

[rin-st]

Next 15 what's new and migration guides here

codemods used:

react:
main migration codemod
types-react-codemod

nextjs:
async request api

Plus changed the next config file

Note: After updating deps, compile times for se-2 homepage were crazy 60-100 seconds, but then the problem eventually disappeared. Currently compile times in dev mode for me is like 8-13sec. Hopefully, for you it will work fine from the start

---

Things I thought about but decided it's not worth it

• https://nextjs.org/docs/app/building-your-application/upgrading/version-15#client-side-router-cache . staleTimes is experimental and also has default 5 mins for static
• https://nextjs.org/blog/next-15#turbopack-dev . Works only for dev mode and also for me server startup and compile times with and without --turbo are almost the same . I think it's better just to wait until it will become default for nextjs
• https://nextjs.org/docs/app/api-reference/config/typescript#statically-typed-links Available from next v13 but still experimental

---

TODOs after migration to next15

1. Update SRE extensions

• https://nextjs.org/docs/app/building-your-application/upgrading/version-15#nextfont
• https://nextjs.org/docs/app/building-your-application/upgrading/version-15#serverexternalpackages for challenge 0

2. Update Eslint to v9 and all related packages, finally

Fixes #1033

[damianmarti]

Thanks @rin-st I will take a look and test.

Maybe some of the extensions have to be updated too, mainly if they use a page param, right?

[damianmarti]

The code looks good and it seems do not have any missing migration stuff.

Tested and it's working fine.

The first time the compilation took me about 16 seconds and next one about 8 seconds, so it doesn't be an issue there.

I'm getting a deprecation warning after the compilation is done:

✓ Compiled / in 8.1s (7831 modules)
(node:142505) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.

Thanks!!

[Pabl0cks]

Been testing it on Windows and LGTM! Nice job @rin-st!!🙌

Had a problem when tried to yarn build but it worked well after deleting my .next folder

[technophile-04]

Thanks @rin-st! Working great! did some testing and seems great to me! Just added a small comment https://github.com/scaffold-eth/scaffold-eth-2/pull/1036/files#r1926345215 but happy to merge it 🙌

---

Lol NextJs showing error overlay now for all types of error seems a bit strange, in previous version it was only showing it for "Unhandled error".

Especially the error of Grammarly/colorzilla extension:

Error image

Rauch response on it: https://x.com/rauchg/status/1871268516508381412

Similarly when chain is not started it show the error overlay, lol we can't do anything about since nextjs plans to do it that way.

I was researching about this error overlay seems like they are improving this error overlays a lot checkout their changelog the "[DevOverlay]" seem good, probably they will release that in 15.2.x version but looks nice.

[rin-st]

Thanks for reviews !

I'm getting a deprecation warning after the compilation is done:

✓ Compiled / in 8.1s (7831 modules)
(node:142505) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.

Thanks!!

Strange, I don't get that error

Lol NextJs showing error overlay now for all types of error seems a bit strange, in previous version it was only showing it for "Unhandled error".
Especially the error of Grammarly/colorzilla extension:

Oh yes, forgot to mention it. I don't like it too but dont know for now how to fix this

I was researching about this error overlay seems like they are improving this error overlays a lot checkout their changelog the "[DevOverlay]" seem good, probably they will release that in 15.2.x version but looks nice.

Probably we need to wait until 15.2 then because for now it shows red error button for every contract error, even when there is a catch block for that error 🤷‍♂️

[rin-st]

lol I figured this out. It shows error button for every console.error. So I changed console.error to console.warn and red button disappeared. If you'll find a better way to fix that please lmk

[technophile-04]

Strange, I don't get that error

I think its shows up if you use latest node version?

Probably we need to wait until 15.2 then because for now it shows red error button for every contract error, even when there is a catch block for that error 🤷‍♂️

Ohh I think it won't be solved in 15. 2 as well, "I think" because (I wasn't able to find the changeset were they discussed) NextJs plan to move this way in future showing console.error in that overlay as well.

In 15.2 I think they are improving the styles of it a lot and making it more better.

lol I figured this out. It shows error button for every console.error. So I changed console.error to console.warn and red button disappeared. If you'll find a better way to fix that please lmk

Umm regarding this, probably I think we shouldn't change all console.error to console.warning, since its only show in dev environment its fine?

Maybe instead of converting all console.error to console.warning we only change the sensible ones? Like for example

Showing write contract error, we shouldn't give overlay (i.e console.error) because we are already showing toast and we could give full error in console with warn?

maybe we can wait for 15.2 @rin-st and see what say? if it improves? Because I see they are moving fast with 15.2 canary and probably release new version soon?

If the overlay is still their for console.error then we take the decision where to put console.war and where to use console.error?

[rin-st]

maybe we can wait for 15.2 @rin-st and see what say? if it improves? Because I see they are moving fast with 15.2 canary and probably release new version soon?

If the overlay is still their for console.error then we take the decision where to put console.war and where to use console.error?

Yes, let's wait! Thanks!