feat: Use Next.js in studio-next

[KhudaDad414]

Description

• this PR ports the studio from CRA to Next.js.
• it should compile and run in the dev environment.
• It should build without issues.

Some known issues and possible improvements:

• [ ] docker container file is missing in studio-next.
• [ ] tests are missing in studio-next after NEXT.JS migration.
• [ ] Code generation doesn't work in studio-next.
• [ ] Use CodeMirror instead of Monaco.

fixes #684

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 68a61e9763abe27017c66b5925c651e0e61640bc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
studio-next	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify[bot]]

✅ Deploy Preview for modest-rosalind-098b67 ready!

Name	Link
🔨 Latest commit	68a61e9763abe27017c66b5925c651e0e61640bc
🔍 Latest deploy log	https://app.netlify.com/sites/modest-rosalind-098b67/deploys/664740c0dde50a000867c85c
😎 Deploy Preview	https://deploy-preview-1062--modest-rosalind-098b67.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for asyncapi-studio-design-system ready!

Name	Link
🔨 Latest commit	68a61e9763abe27017c66b5925c651e0e61640bc
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-studio-design-system/deploys/664740c03706430008fd2542
😎 Deploy Preview	https://deploy-preview-1062--asyncapi-studio-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for studio-next ready!

Name	Link
🔨 Latest commit	68a61e9763abe27017c66b5925c651e0e61640bc
🔍 Latest deploy log	https://app.netlify.com/sites/studio-next/deploys/664740c01adc340008c35af7
😎 Deploy Preview	https://deploy-preview-1062--studio-next.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[smoya]

@KhudaDad414 Besides this PR, is anything else required to have Studio working on Next-JS ? I mean, If we merge this "today", will everything work out of the box?

[KhudaDad414]

@smoya Yes, it should work as expected.

[smoya]

@smoya Yes, it should work as expected.

I hope this gets merged soon 🤞

[Amzani]

Looks like we don't have the logo, do you reproduce as well ?

[KhudaDad414]

@Amzani it show up as expected now.

[smoya]

At a quick glance, I found some differences between versions.

The height of the app is not adjusted in the deploy preview. The Settings button is hidden unless you scroll down (at least in my native MacBook resolution). Same happens with the "errors" and "warnings" bar.

Current production version (https://studio.asyncapi.com):

This new version (https://deploy-preview-1062--studio-next.netlify.app/):

The tooltips on the navigation bar differ from one version an the other:

Current production version (https://studio.asyncapi.com):

This new version (https://deploy-preview-1062--studio-next.netlify.app/):

Additionally, font size or space differs from one version to the other:

[KhudaDad414]

@smoya thanks for the review. 🙇 I can replicate the issues. will make the appropriate changes.

[smoya]

@smoya thanks for the review. 🙇 I can replicate the issues. will make the appropriate changes.

Nooice! BTW didnt test all functionalities, but just checked the appeal of the page. Meaning it could have more issues (or not).

[KhudaDad414]

@smoya done. please take a look when you have the time.

[Amzani]

Tested on my side, looks good so far. We should add some functional tests at some points using cypress, created a Pitch for it: https://github.com/asyncapi/studio/issues/1091

[sonarqubecloud[bot]]

Quality Gate passed

Issues
124 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.1% Duplication on New Code

See analysis details on SonarCloud

[KhudaDad414]

/rtm