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!

[technophile-04]

Ohh Nex 15.2 is out https://nextjs.org/blog/next-15-2 🙌

[rin-st]

Updated to next 15.2 and reverted all the console.error -> console.warn commit

At first, it showed me Grammarly error, probably because of the cache. But now it shows only console.errors but it not overlays on every error and only shows it on the left bottom corner nicely

Screen.Recording.2025-03-02.at.16.36.48.mov

also, it can be configured on "N" icon click, for example to disable it for the app session

I think it's good for us

[technophile-04]

Thanks @rin-st!! Yeah that grammrly error is bad :( I get it evertime I spin up SE-2.

Also the bad part is that it hides other errors below it, as well if you click "X" then you won't get notified about error :(

Screen.Recording.2025-03-06.at.6.13.43.PM.mov

^ I mean this will happen to all NextJs users so probably that might be get comfortable with it but not sure if SE-2 should do anything about it not sure if we can do something or not (probably adding suppressHydrationWarning to body but thats a bad solution too)

---

Also I think we need to re-think about console.erroring now?

Because take for example "Debug page" (this is util by SE-2 for developers and we don't want them to deep dive init) but if the write reverts it shows the next error in bottom checkout about video :( maybe we shouldn't do that?

scaffold-eth-2/packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx

Lines 47 to 66 in c5c8139

	const handleWrite = async () => {
	if (writeContractAsync) {
	try {
	const writeContractObj = {
	address: contractAddress,
	functionName: abiFunction.name,
	abi: abi,
	args: getParsedContractFunctionArgs(form),
	value: BigInt(txValue),
	};
	await simulateContractWriteAndNotifyError({ wagmiConfig, writeContractParams: writeContractObj });
	const makeWriteWithParams = () => writeContractAsync(writeContractObj);
	await writeTxn(makeWriteWithParams);
	onChange();
	} catch (e: any) {
	console.error("⚡️ ~ file: WriteOnlyFunctionForm.tsx:handleWrite ~ error", e);
	}
	}
	};

Since we are already handling error (try / catch) probably we just "log" it instead of again erroring out forward?

So alteast all the SE-2 utils like faucet, blockexplorer shouldn't do conosle.error instead maybe just console.log or not even that probably. Because don't want to show the end user the internally SE-2 errors which are already handled too but console.error pops out to end user and don't want them to goo looking for it?

Just putting it out here and would love to hear others views / opinions 🙌 cc @carletex too

[rin-st]

Thanks Shiv!

^ I mean this will happen to all NextJs users so probably that might be get comfortable with it but not sure if SE-2 should do anything about it not sure if we can do something or not (probably adding suppressHydrationWarning to body but thats a bad solution too)

Yes, I think it's ok to ignore it for now since it's a default nextjs behavior

Since we are already handling error (try / catch) probably we just "log" it instead of again erroring out forward?
So alteast all the SE-2 utils like faucet, blockexplorer shouldn't do conosle.error instead maybe just console.log or not even that probably. Because don't want to show the end user the internally SE-2 errors which are already handled too but console.error pops out to end user and don't want them to goo looking for it?

What do you think about changing it to console.warn again as it was in e8a213c? So it will not distract devs and at the same time it will be possible for advanced users to understand the errors better from the console? I think console.warn is better since it adds color and it will be easier to find those error messages between all custom console.logs