diff --git a/examples/nextjs/app/page.tsx b/examples/nextjs/app/page.tsx
index 90bc2c03..e0512aa7 100644
--- a/examples/nextjs/app/page.tsx
+++ b/examples/nextjs/app/page.tsx
@@ -1,25 +1,13 @@
-import { MilvusClient } from '@zilliz/milvus2-sdk-node';
-
 /**
  * This option is equivalent to getServerSideProps() in the pages directory.
  * https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
  */
 export const dynamic = 'force-dynamic';
 
-async function getData() {
-  const milvusClient = new MilvusClient({
-    address: '10.102.6.196:19530',
-  });
-
-  let res: any = await milvusClient.getMetric({
-    request: { metric_type: 'system_info' },
-  });
+const HOST = 'http://localhost:3000';
 
-  const result = res.response.nodes_info.map((v: any) => {
-    return v.infos;
-  });
-
-  return result;
+async function getData() {
+  return fetch(HOST + '/api/milvus').then(res => res.json());
 }
 
 export default async function Home() {
diff --git a/examples/nextjs/pages/api/milvus.ts b/examples/nextjs/pages/api/milvus.ts
new file mode 100644
index 00000000..29e20011
--- /dev/null
+++ b/examples/nextjs/pages/api/milvus.ts
@@ -0,0 +1,26 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { MilvusClient } from '@zilliz/milvus2-sdk-node';
+
+async function getData() {
+  const milvusClient = new MilvusClient({
+    address: '10.102.6.196:19530',
+  });
+
+  let res: any = await milvusClient.getMetric({
+    request: { metric_type: 'system_info' },
+  });
+
+  const result = res.response.nodes_info.map((v: any) => {
+    return v.infos;
+  });
+
+  return result;
+}
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const data = await getData();
+  res.status(200).json(data);
+}