diff --git a/.changeset/1902.md b/.changeset/1902.md
new file mode 100644
index 00000000000..f301a1406fb
--- /dev/null
+++ b/.changeset/1902.md
@@ -0,0 +1,10 @@
+---
+'@asyncapi/cli': patch
+---
+
+fix: resolve Next.js version mismatch for studio/preview
+
+- e836cf8: fix: resolve Next.js version mismatch for studio/preview
+- 617e4b5: fix: remove unnecessary type assertions in Studio and Preview
+
+
diff --git a/src/domains/models/Preview.ts b/src/domains/models/Preview.ts
index 817e782d3c3..1a3122e087b 100644
--- a/src/domains/models/Preview.ts
+++ b/src/domains/models/Preview.ts
@@ -5,7 +5,6 @@ import { createServer } from 'http';
 import { WebSocketServer } from 'ws';
 import chokidar from 'chokidar';
 import open from 'open';
-import next from 'next';
 import path from 'path';
 import yaml from 'js-yaml';
 import { blueBright, redBright } from 'picocolors';
@@ -24,6 +23,15 @@ function isValidFilePath(filePath: string): boolean {
   return existsSync(filePath);
 }
 
+type NextFactory = typeof import('next')['default'];
+
+function resolveStudioNextInstance(studioPath: string): NextFactory {
+  const resolvedNextPath = require.resolve('next', { paths: [studioPath] });
+  // eslint-disable-next-line @typescript-eslint/no-var-requires,security/detect-non-literal-require
+  const nextModule = require(resolvedNextPath);
+  return nextModule.default ?? nextModule;
+}
+
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export function startPreview(filePath:string,base:string | undefined,baseDirectory:string | undefined ,xOrigin:boolean | undefined,suppressLogs:boolean|undefined,port: number = DEFAULT_PORT, noBrowser?: boolean):void {
   if (filePath && !isValidFilePath(filePath)) {
@@ -44,7 +52,8 @@ export function startPreview(filePath:string,base:string | undefined,baseDirecto
   });
 
   const studioPath = path.dirname(require.resolve('@asyncapi/studio/package.json'));
-  const app = next({
+  const nextInstance = resolveStudioNextInstance(studioPath);
+  const app = nextInstance({
     dev: false,
     dir: studioPath,
     conf: {
@@ -232,4 +241,3 @@ function findPathsToWatchFromSchemaRef(filePath: string,baseDir:string) {
     }
   }
 }
-
diff --git a/src/domains/models/Studio.ts b/src/domains/models/Studio.ts
index 045daed37b0..5f637270ba9 100644
--- a/src/domains/models/Studio.ts
+++ b/src/domains/models/Studio.ts
@@ -4,7 +4,6 @@ import { createServer } from 'http';
 import { WebSocketServer } from 'ws';
 import chokidar from 'chokidar';
 import open from 'open';
-import next from 'next';
 import path from 'path';
 import { version as studioVersion } from '@asyncapi/studio/package.json';
 import { blueBright, redBright } from 'picocolors';
@@ -20,6 +19,15 @@ function isValidFilePath(filePath: string): boolean {
   return existsSync(filePath);
 }
 
+type NextFactory = typeof import('next')['default'];
+
+function resolveStudioNextInstance(studioPath: string): NextFactory {
+  const resolvedNextPath = require.resolve('next', { paths: [studioPath] });
+  // eslint-disable-next-line @typescript-eslint/no-var-requires,security/detect-non-literal-require
+  const nextModule = require(resolvedNextPath);
+  return nextModule.default ?? nextModule;
+}
+
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export function start(filePath: string, port: number = DEFAULT_PORT, noBrowser?:boolean): void {
   if (filePath && !isValidFilePath(filePath)) {
@@ -30,7 +38,8 @@ export function start(filePath: string, port: number = DEFAULT_PORT, noBrowser?:
   const studioPath = path.dirname(
     require.resolve('@asyncapi/studio/package.json'),
   );
-  const app = next({
+  const nextInstance = resolveStudioNextInstance(studioPath);
+  const app = nextInstance({
     dev: false,
     dir: studioPath,
     conf: {