diff --git a/docs/NextJs/Next.js API routes/API middlewares.md b/docs/NextJs/Next.js API routes/API middlewares.md
index f89279249..f04e1aedf 100644
--- a/docs/NextJs/Next.js API routes/API middlewares.md	
+++ b/docs/NextJs/Next.js API routes/API middlewares.md	
@@ -59,4 +59,28 @@ event - compiled successfully
 
 Open http://localhost:3000/api/user?counter=1 in a browser and you will see the following output.
 
-``` {"query":{"counter":"1"}} ```
\ No newline at end of file
+``` {"query":{"counter":"1"}} ```
+
+
+<BrowserWindow>
+      <div style={{display:'flex',flexWrap:"wrap",justifyContent:"center",alignItems:"center"}}>
+      <div style={{flex:"1 0 20rem",minHeight:"20rem"}} id="output">
+      <p>app listen in 3000...</p>
+      </div>
+      <div style={{flex:"1 0 20rem",minHeight:"20rem"}}>
+      <button onClick={()=>{
+         let button_ele=document.getElementById("button_ele")
+          button_ele.style.display="none"
+          let output=document.getElementById("output")
+          let p=document.createElement("p")
+          p.textContent="GET /api/user?counter=1 "
+          output.appendChild(p) 
+          setTimeout(()=>{
+          let fontend=document.getElementById("fontend")
+          fontend.textContent= JSON.stringify({"query":{"counter":"1"}},null,2)
+          },1500)
+      }} id="button_ele">click to see the output</button>
+      <pre id="fontend"></pre>
+      </div>
+      </div>
+</BrowserWindow>
\ No newline at end of file
diff --git a/docs/NextJs/Next.js API routes/API routes.md b/docs/NextJs/Next.js API routes/API routes.md
index 1cb278eaa..1dab5cd81 100644
--- a/docs/NextJs/Next.js API routes/API routes.md	
+++ b/docs/NextJs/Next.js API routes/API routes.md	
@@ -65,4 +65,28 @@ event - compiled successfully
 
 Open localhost:3000/api/user in a browser and you will see the following output.
 
-```{"name":"Robert"} ```
\ No newline at end of file
+```{"name":"Robert"} ```
+
+
+<BrowserWindow>
+      <div style={{display:'flex',flexWrap:"wrap",justifyContent:"center",alignItems:"center"}}>
+      <div style={{flex:"1 0 20rem",minHeight:"20rem"}} id="output">
+      <p>app listen in 3000...</p>
+      </div>
+      <div style={{flex:"1 0 20rem",minHeight:"20rem"}}>
+      <button onClick={()=>{
+         let button_ele=document.getElementById("button_ele")
+          button_ele.style.display="none" 
+          let output=document.getElementById("output")
+          let p=document.createElement("p")
+          p.textContent="GET /api/user "
+          output.appendChild(p) 
+          setTimeout(()=>{
+          let fontend=document.getElementById("fontend")
+          fontend.textContent= JSON.stringify({"name":"Robert"},null,2)
+          },1500)
+      }} id="button_ele">click to see the output</button>
+      <pre id="fontend"></pre>
+      </div>
+      </div>
+</BrowserWindow>
\ No newline at end of file
diff --git a/docs/NextJs/Next.js Features/metadata.md b/docs/NextJs/Next.js Features/metadata.md
index 536740cfc..82a07586d 100644
--- a/docs/NextJs/Next.js Features/metadata.md	
+++ b/docs/NextJs/Next.js Features/metadata.md	
@@ -81,4 +81,26 @@ event - compiled successfully
 
 ## Verify Output
 
-Open localhost:3000 in a browser
\ No newline at end of file
+Open localhost:3000 in a browser
+
+<BrowserWindow>
+       <div id="output_con_1">
+            <h1>Welcome to Next.js!</h1>
+            <h2 onClick={()=>{
+               let output_con_1=document.getElementById("output_con_1")
+               output_con_1.style.display="none"
+               let output_con_2=document.getElementById("output_con_2")
+               output_con_2.style.display="block"
+            }} style={{color:"blue",textDecoration:"underline",cursor:"pointer"}}>First Post</h2>
+            <img src="/img/favicon_io/android-chrome-192x192.png" alt="CodeHarborhub Logo" style={{height:"5rem",width:"5rem"}} />
+       </div>
+       <div style={{display:"none"}} id="output_con_2">
+            <h1>My First Post</h1>
+            <h2 onClick={()=>{
+               let output_con_2=document.getElementById("output_con_2")
+               output_con_2.style.display="none"
+               let output_con_1=document.getElementById("output_con_1")
+               output_con_1.style.display="block"
+            }} style={{color:"blue",textDecoration:"underline",cursor:"pointer"}}>Home</h2>
+       </div>
+</BrowserWindow>
\ No newline at end of file
diff --git a/docs/NextJs/Next.js Features/pages.md b/docs/NextJs/Next.js Features/pages.md
index 1bfee1e16..edb253d04 100644
--- a/docs/NextJs/Next.js Features/pages.md	
+++ b/docs/NextJs/Next.js Features/pages.md	
@@ -87,4 +87,26 @@ Open localhost:3000 in a browser and you will see the following output.
 ```
 Home page
 ```
-Click on First Link and you will see the following output.
\ No newline at end of file
+Click on First Link and you will see the following output.
+
+
+<BrowserWindow>
+       <div id="output_con_1">
+            <h1>My First Post</h1>
+            <h2 onClick={()=>{
+               let output_con_1=document.getElementById("output_con_1")
+               output_con_1.style.display="none"
+               let output_con_2=document.getElementById("output_con_2")
+               output_con_2.style.display="block"
+            }} style={{color:"blue",textDecoration:"underline",cursor:"pointer"}}>Home</h2>
+       </div>
+       <div style={{display:"none"}} id="output_con_2">
+            <h1>Welcome to Next.js!</h1>
+            <h2 onClick={()=>{
+               let output_con_2=document.getElementById("output_con_2")
+               output_con_2.style.display="none"
+               let output_con_1=document.getElementById("output_con_1")
+               output_con_1.style.display="block"
+            }} style={{color:"blue",textDecoration:"underline",cursor:"pointer"}}>First Post</h2>
+       </div>
+</BrowserWindow>
\ No newline at end of file
diff --git a/docs/NextJs/Next.js Features/statcfileserving.md b/docs/NextJs/Next.js Features/statcfileserving.md
index bb480fc89..ee192fd61 100644
--- a/docs/NextJs/Next.js Features/statcfileserving.md	
+++ b/docs/NextJs/Next.js Features/statcfileserving.md	
@@ -59,4 +59,19 @@ event - compiled successfully
 
 ## Verify Output
 
-Open localhost:3000 in a browser
\ No newline at end of file
+Open localhost:3000 in a browser
+
+<BrowserWindow>
+      <div id="browsing_static_files">
+         <h1>My First Post</h1>
+         <h2 onClick={()=>{
+                 let browsing_static_files=document.getElementById("browsing_static_files")
+                 browsing_static_files.style.display="none"
+                 setTimeout(()=>{
+                  browsing_static_files.style.display="block"
+                 },1000)
+               }} style={{fontSize:"1rem",color:"blue",textDecoration:"underline",cursor:"pointer"}}>Home</h2>
+         <br />
+         <img src="/img/favicon_io/android-chrome-192x192.png" alt="CodeHarborhub Logo" style={{height:"5rem",width:"5rem"}} />
+      </div>
+</BrowserWindow>
\ No newline at end of file
diff --git a/docs/NextJs/Next.js Routing/Next.js -Routing.md b/docs/NextJs/Next.js Routing/Next.js -Routing.md
index 12d174eae..a97ccb949 100644
--- a/docs/NextJs/Next.js Routing/Next.js -Routing.md	
+++ b/docs/NextJs/Next.js Routing/Next.js -Routing.md	
@@ -97,3 +97,29 @@ event - compiled successfully
 ## Verify Output
 
 Open localhost:3000 in a browser 
+
+<BrowserWindow>
+       <div id="output_con_1">
+            <h1>Welcome to Next.js..!</h1>
+            <h2 onClick={()=>{
+               let output_con_1=document.getElementById("output_con_1")
+               output_con_1.style.display="none"
+               let output_con_2=document.getElementById("output_con_2")
+               output_con_2.style.display="block"
+            }} style={{color:"blue",textDecoration:"underline",cursor:"pointer"}}>visit First Post</h2>
+       </div>
+       <div style={{display:"none"}} id="output_con_2">
+            <h1>My First Post</h1>
+            <h2 onClick={()=>{
+               let output_con_2=document.getElementById("output_con_2")
+               output_con_2.style.display="none"
+               let output_con_1=document.getElementById("output_con_1")
+               output_con_1.style.display="block"
+            }} style={{color:"blue",textDecoration:"underline",cursor:"pointer"}}>Home</h2>
+            <br />
+            <h4>Important notes.!</h4>
+            <br />
+            <p>Hello Everyone keep supporting and Contributting our project.</p>
+            <p>Let's Learn & Succeeded our Life</p>
+       </div>
+</BrowserWindow>
\ No newline at end of file
diff --git a/docs/NextJs/Next.js Routing/Next.js-Dynamic API Routing.md b/docs/NextJs/Next.js Routing/Next.js-Dynamic API Routing.md
index e61481c7f..9fdf5d08a 100644
--- a/docs/NextJs/Next.js Routing/Next.js-Dynamic API Routing.md	
+++ b/docs/NextJs/Next.js Routing/Next.js-Dynamic API Routing.md	
@@ -112,3 +112,95 @@ event - compiled successfully
 ```Open localhost:3000/posts/one in a browser and you will see the following output. ```
 
 ``` Open localhost:3000/posts/two in a browser and you will see the following output. ```
+
+<BrowserWindow>
+       <div id="buttons_con" style={{display:"flex",flexDirection:"column",gap:"1rem",justifyContent:"center",alignItems:"center"}}>
+            <button
+            onClick={()=>{
+               let buttons_con=document.getElementById("buttons_con")
+               buttons_con.style.display="none"
+               let get_all_post_con=document.getElementById("get_all_post_con")
+               get_all_post_con.style.display="block"
+               let data=[{id:1,title:"This is 1st post",body:"Thank you for visiting in our 1st post"},{id:2,title:"This is 2nd post",body:"Thank you for visiting in our 2nd post"},{id:3,title:"This is 3rd post",body:"Thank you for visiting in our 3rd  post"}]
+               data.map((item)=>{
+                  let h4=document.createElement("h4")
+                  h4.textContent=item.title
+                  let p=document.createElement("p")
+                  p.textContent=item.body
+                  let hr=document.createElement("hr")
+                  get_all_post_con.appendChild(h4)
+                  get_all_post_con.appendChild(p)
+                  get_all_post_con.appendChild(hr)
+               })
+            }}
+             style={{padding:"0.6rem 1.4rem",backgroundImage:"radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%)",border:"none",color:"white",fontWeight:"700",borderRadius:"0.6rem",cursor:"pointer"}}>All Post</button>
+            <button
+            onClick={()=>{
+               let buttons_con=document.getElementById("buttons_con")
+               buttons_con.style.display="none"
+               let see_1st_post_con=document.getElementById("see_1st_post_con")
+               see_1st_post_con.style.display="block"
+               let data=[{id:1,title:"This is 1st post",body:"Thank you for visiting in our 1st post"}]
+               data.map((item)=>{
+                  let h4=document.createElement("h4")
+                  h4.textContent=item.title
+                  let p=document.createElement("p")
+                  p.textContent=item.body
+                  let hr=document.createElement("hr")
+                  see_1st_post_con.appendChild(h4)
+                  see_1st_post_con.appendChild(p)
+                  see_1st_post_con.appendChild(hr)
+               })
+            }}
+             style={{padding:"0.6rem 1.4rem",backgroundImage:"radial-gradient(100% 100% at 100% 0px, rgb(90 255 165) 0px, rgb(255 130 84) 100%)",border:"none",color:"white",fontWeight:"700",borderRadius:"0.6rem",cursor:"pointer"}}
+            >1st Post</button>
+            <button
+            onClick={()=>{
+               let buttons_con=document.getElementById("buttons_con")
+               buttons_con.style.display="none"
+               let see_2nd_post_con=document.getElementById("see_2nd_post_con")
+               see_2nd_post_con.style.display="block"
+               let data=[{id:2,title:"This is 2nd post",body:"Thank you for visiting in our 2nd post"}]
+               data.map((item)=>{
+                  let h4=document.createElement("h4")
+                  h4.textContent=item.title
+                  let p=document.createElement("p")
+                  p.textContent=item.body
+                  let hr=document.createElement("hr")
+                  see_2nd_post_con.appendChild(h4)
+                  see_2nd_post_con.appendChild(p)
+                  see_2nd_post_con.appendChild(hr)
+               })
+            }}
+             style={{padding:"0.6rem 1.4rem",backgroundImage:"radial-gradient(100% 100% at 100% 0px, rgb(255 90 172) 0px, rgb(84 201 255) 100%)",border:"none",color:"white",fontWeight:"700",borderRadius:"0.6rem",cursor:"pointer"}}
+            >2nd Post</button>
+            <button
+            onClick={()=>{
+               let buttons_con=document.getElementById("buttons_con")
+               buttons_con.style.display="none"
+               let see_3rd_post_con=document.getElementById("see_3rd_post_con")
+               see_3rd_post_con.style.display="block"
+               let data=[{id:3,title:"This is 3rd post",body:"Thank you for visiting in our 3rd post"}]
+               data.map((item)=>{
+                  let h4=document.createElement("h4")
+                  h4.textContent=item.title
+                  let p=document.createElement("p")
+                  p.textContent=item.body
+                  let hr=document.createElement("hr")
+                  see_3rd_post_con.appendChild(h4)
+                  see_3rd_post_con.appendChild(p)
+                  see_3rd_post_con.appendChild(hr)
+               })
+            }}
+             style={{padding:"0.6rem 1.4rem",backgroundImage:"radial-gradient(100% 100% at 100% 0px, rgb(255, 90, 90) 0px, rgb(39 185 106) 100%)",border:"none",color:"white",fontWeight:"700",borderRadius:"0.6rem",cursor:"pointer"}}
+            >3rd Post</button>            
+       </div>
+       <div id="get_all_post_con" style={{display:"none"}}>
+       </div>
+       <div id="see_1st_post_con" style={{display:"none"}}>
+       </div>
+       <div id="see_2nd_post_con" style={{display:"none"}}>
+       </div>
+       <div id="see_3rd_post_con" style={{display:"none"}}>
+       </div>
+</BrowserWindow>
\ No newline at end of file
diff --git a/docs/NextJs/index.md b/docs/NextJs/index.md
index 0088af346..ddcbda816 100644
--- a/docs/NextJs/index.md
+++ b/docs/NextJs/index.md
@@ -57,6 +57,11 @@ export default function Page() {
   return <h1>Hello, Next.js!</h1>
 }
 ```
+
+<BrowserWindow>
+       <h1>Hello, Next.js!</h1>
+</BrowserWindow>
+
 Now, you can start the development server:
 
 Run `npm run dev` to start the development server.
diff --git a/package.json b/package.json
index 2d123dd4c..4da39cf58 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
     "@babel/preset-react": "^7.24.7",
     "@docusaurus/module-type-aliases": "^3.3.2",
     "@docusaurus/types": "^3.3.2",
-    "@types/node": "^22.0.0",
+    "@types/node": "^20.14.10",
     "@types/react-icons": "^3.0.0",
     "dotenv": "^16.4.5",
     "gh-pages": "^6.1.1",