App router migration

[Anurag-Raut]

Description

Migrated from Page router to new Approuter .
upgraded to Next v13.5.2 since the app router is stable from v13.4 +

Additional Information

• I have read the contributing docs (if this is your first contribution)
• This is not a duplicate of any existing pull request

Related Issues

_Closes #526 _

Your ENS/address: 0x72aA8A79D02705444CC6918A6766Be03AD4C29F5

[Anurag-Raut]

@carletex Let me know if any changes needs to be done.
I have tested it and everything seems to be working fine.
thanks.

[carletex]

Hey @Anurag-Raut , thanks for this!!

A few things:

• To keep the code style consistent, we are using prettier (check .prettierrc.json). Could you configure it for your IDE? It can apply prettier when saving a given file. If not, you are using single quotes, missing spaces, etc.
• You didn't include the updated yarn.lock.
• Did you follow the Migration guide from Nexthttps://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration.? It seems that you didn't update react / react-dom / eslint-config-next. Also there are some things (like migrating next/head[https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#step-3-migrating-nexthead]) that you didn't include. Not sure if it was on purpose (to make a progressive migration)

[technophile-04]

Update :

Merged the latest changes from the main branch lol it was a pain but got it working nicely also I did some testing and works great for me but would love it if others could give it a final try, will also test it rigorously tomorrow 🙌

---

Next Steps :

Documenting folder structure followed:
We agreed upon collocating components that are internally used by SE-2 like in debug and blockexplorer. So we collocated their components in their respective dir like app/debug/_components & app/blockexplorer/_components we don't want to expose them to people using SE-2, the components that are in general helpful for all are kept inside nextjs/components checkout this discussion #535 (comment)

But if someone has second thoughts please feel free to put up 🙌

Thinking about Barrel files at least inside _components dirs :
Building on the previous point since we have collocated components for debug/_components & blockexplorer/_components I think we could remove barrel files from them since pages/components using will mostly be siblings or max 2-3 heights away.

Lol I spent some debugging because of this since error was not very particular:

Will create a nice explainer issue and we can discuss about it there

Clean up:

After we get 1. and 2. cleared I think we could clean up a bit and lol had some nitpicks in mind but didn't want to add those in this PR since its already too long and works great 🙌

TYSM All, We could probably merge this next week 🚀🚀

[rin-st]

Awesome!

Themes were broken again, fixed it

[technophile-04]

Themes were broken again, fixed it

Ohh thanks 🙌, missed it that we need to use custom useDarkMode while merging

Tested it throughly and works great for me !! : https://next14-se2.vercel.app/test

Here is test commit for above link https://github.com/technophile-04/se-2/commit/d01d88d0115cbf5a5f633e0cbff72c6541200fb8 if someone wants to try

[rin-st]

🙌

[Pabl0cks]

Tested it and works great to me. Updated a small nitpick on the route we showing in /debug page.

GREAT JOB Shiv!! 🙌

[technophile-04]

I am just trying to resolve the conflicts in yarn.lock, here are commands which I executed but for some reason the yarn install seems to resolve conflicts but it fails at the end :( , could someone please try it out not sure if something to with my machine (I was playing around with my machines yarn version yesterday), but here are steps I followed to resolve conflicts :

1. git merge upstream/main

2. yarn install

2nd fails to check the reason I did yarn check and seems something with pump@npm

[damianmarti]

I am just trying to resolve the conflicts in yarn.lock, here are commands which I executed but for some reason the yarn install seems to resolve conflicts but it fails at the end :( , could someone please try it out not sure if something to with my machine (I was playing around with my machines yarn version yesterday), but here are steps I followed to resolve conflicts :

1. git merge upstream/main

2. yarn install

2nd fails to check the reason I did yarn check and seems something with pump@npm

I am just trying to resolve the conflicts in yarn.lock, here are commands which I executed but for some reason the yarn install seems to resolve conflicts but it fails at the end :( , could someone please try it out not sure if something to with my machine (I was playing around with my machines yarn version yesterday), but here are steps I followed to resolve conflicts :

1. git merge upstream/main

2. yarn install

2nd fails to check the reason I did yarn check and seems something with pump@npm

I'm getting the exact same error as you :-(

[technophile-04]

I'm getting the exact same error as you :-(
Thanks Damu for trying it out 🙌

Just fixed the conflict at 5a6a6d9, the way I did this was :

1. git merge upstream/main
2. Reset the changes in yarn.lock
3. yarn install

SInce packages/hardhat/package.json had all the updated dependency it added them all nicely and fixed it 🙌

[carletex]

I've been testing and everything is looking good.

Thanks @technophile-04, @Anurag-Raut and everyone for reviewing and testing. This is a big one!!

Let's include this in the CLI soon.

[technophile-04]

Tysm all !!! Merging this 🚀🚀