diff --git a/courses/Next.Js/Intermediate-level/Data-Fetching/Handling.md b/courses/Next.Js/Intermediate-level/Data-Fetching/Handling.md
index cc839c93b..9f7d685ac 100644
--- a/courses/Next.Js/Intermediate-level/Data-Fetching/Handling.md
+++ b/courses/Next.Js/Intermediate-level/Data-Fetching/Handling.md
@@ -63,4 +63,11 @@ Handling errors in data fetching is crucial to provide a good user experience.
        </div>
      );
    }
-   ``` 
\ No newline at end of file
+   ``` 
+
+  **Output:**
+  <BrowserWindow >
+    <div>  
+         Failed to load: 404 server not found
+    </div>
+  </BrowserWindow>
\ No newline at end of file
diff --git a/courses/Next.Js/Intermediate-level/Data-Fetching/fetching-Data.md b/courses/Next.Js/Intermediate-level/Data-Fetching/fetching-Data.md
index 82936046a..a76fc371d 100644
--- a/courses/Next.Js/Intermediate-level/Data-Fetching/fetching-Data.md
+++ b/courses/Next.Js/Intermediate-level/Data-Fetching/fetching-Data.md
@@ -102,4 +102,18 @@ export default function Home() {
     </div>
   );
 }
-```
\ No newline at end of file
+```
+
+**Output:**
+
+  <BrowserWindow url="http://localhost:3000/post/3">
+    <h1>Posts</h1>
+    <ul>
+      <li>Post 1</li>
+      <li>Post 2</li>
+      <li>Post 3</li>
+      <li>Post 4</li>
+      <li>Post 5</li>
+      <li>Post 6</li>
+    </ul>
+  </BrowserWindow>
\ No newline at end of file
diff --git a/courses/Next.Js/advance-level/Advance-Routing/Customizing.md b/courses/Next.Js/advance-level/Advance-Routing/Customizing.md
index 55dd53981..ee84157a1 100644
--- a/courses/Next.Js/advance-level/Advance-Routing/Customizing.md
+++ b/courses/Next.Js/advance-level/Advance-Routing/Customizing.md
@@ -80,6 +80,7 @@ Route-level code splitting ensures that only the necessary code for the current
 2. **Using `dynamic` for Code Splitting with Custom Loading**:
    ```javascript
    // pages/index.js
+   import { useState } from 'react';
    import dynamic from 'next/dynamic';
 
    const DynamicComponentWithCustomLoading = dynamic(() => import('../components/DynamicComponent'), {
@@ -87,12 +88,49 @@ Route-level code splitting ensures that only the necessary code for the current
    });
 
    export default function Home() {
+    const [loadDynamicComponent, setLoadDynamicComponent] = useState(false);
+
+    const handleClick = () => {
+      setLoadDynamicComponent(true);
+    };
      return (
        <div>
          <h1>Home Page</h1>
-         <DynamicComponentWithCustomLoading />
+         <button onClick={handleClick}>Load Dynamic Component</button>
+         {loadDynamicComponent && <DynamicComponentWithCustomLoading />}
        </div>
      );
    }
    ```
- 
\ No newline at end of file
+ **Output:**
+    <BrowserWindow>
+      <div>
+         <h1 style={{fontSize:"1.5rem"}}>Home Page</h1>
+         <button onClick={()=>{
+          let button=document.getElementById("button")
+          button.style.display="none"
+          let Interval=setInterval(()=>{
+          let Dynamic=document.getElementById("Dynamic")
+          let datas=["1st Content","2nd Content","3rd Content"]
+          let Index
+          if(Dynamic && Dynamic.textContent && Dynamic.textContent.length>1){
+          if(Dynamic.textContent==="Switch Dynamic Content"){
+            Index=0
+          }
+          else{
+            if(datas.indexOf(Dynamic.textContent)==2){
+              Index=0
+            }
+            else{Index=datas.indexOf(Dynamic.textContent)+1}
+          }
+          Dynamic.textContent=datas[Index]
+          } 
+          else{
+            clearInterval(Interval)
+            return
+          }
+          },1000)
+         }} id="button" style={{padding:"0.8rem 2rem",fontWeight:"600",borderRadius:"0.6rem",border:"0.1rem solid",margin:"0.5rem"}}>Load Dynamic Component</button>
+         <h2 style={{fontSize:"1.3rem"}} id="Dynamic">Switch Dynamic Content</h2>
+      </div>
+    </BrowserWindow>
\ No newline at end of file
diff --git a/courses/Next.Js/advance-level/Advance-data-fetching/dynamic-generation.md b/courses/Next.Js/advance-level/Advance-data-fetching/dynamic-generation.md
index 6568debed..138bf557a 100644
--- a/courses/Next.Js/advance-level/Advance-data-fetching/dynamic-generation.md
+++ b/courses/Next.Js/advance-level/Advance-data-fetching/dynamic-generation.md
@@ -31,12 +31,12 @@ You can combine static and dynamic data fetching to build more flexible and perf
    export default function Home({ staticData }) {
      const [dynamicData, setDynamicData] = useState(null);
 
-     useEffect(() => {
+     function handleClick(){
        // Fetch dynamic data on client-side
        fetch('https://api.example.com/dynamic-data')
          .then((res) => res.json())
          .then((data) => setDynamicData(data));
-     }, []);
+     }
 
      return (
        <div>
@@ -44,6 +44,7 @@ You can combine static and dynamic data fetching to build more flexible and perf
          <h2>Static Data</h2>
          <pre>{JSON.stringify(staticData, null, 2)}</pre>
          <h2>Dynamic Data</h2>
+         <button onClick={handleClick}>click to Fetch</button>
          {dynamicData ? (
            <pre>{JSON.stringify(dynamicData, null, 2)}</pre>
          ) : (
@@ -53,7 +54,44 @@ You can combine static and dynamic data fetching to build more flexible and perf
      );
    }
    ```
-
+**Output:**
+    <BrowserWindow url="http://localhost:3000/users">
+      <div>
+          <h1 style={{fontSize:"1.5rem"}}>Combining Static and Dynamic Data Fetching</h1>
+          <h2 style={{fontSize:"1.3rem"}}>Static Data</h2>
+          <pre style={{margin:"2rem auto"}}>{`${JSON.stringify([{ id:"1",
+                    name:"siva",
+                    info:"Developer"
+                   },{
+                     id:"2",
+                     name:"Kumar",
+                     info:"Developer"
+                   }],null,2)}`}</pre>
+          <h2 style={{fontSize:"1.3rem"}}>Dynamic Data</h2>
+          <button onClick={()=>{
+             let text=document.getElementById("text")
+             let loading=document.getElementById("loading")
+             let details=[{
+                    id:"11",
+                    name:"Rohan",
+                    info:"Jr.Developer"
+                   },{
+                     id:"15",
+                     name:"Mano",
+                     info:"Sr.Developer"
+                   }]
+              loading.textContent="Loading..."
+              setTimeout(() => {
+              text.style.display="block"
+              loading.textContent=" "
+              text.textContent=JSON.stringify(details, null, 2)
+              }, 2000)
+             }} style={{padding:"1rem 2rem",border:"none",borderRadius:"0.6rem",color:"white",background:"black",fontWeight:"600",cursor:"pointer"}}>click to Fetch</button>
+          <br />
+          <p id="loading"  style={{margin:"2rem auto"}}></p>
+          <pre id="text" style={{margin:"2rem auto",display:"none"}}></pre>
+      </div>
+    </BrowserWindow> 
 #### Optimizing Data Fetching for Performance
 
 1. **Minimizing API Calls**:
@@ -86,6 +124,21 @@ You can combine static and dynamic data fetching to build more flexible and perf
    }
    ```
 
+**Output:**
+    <BrowserWindow url="http://localhost:3000/data">
+      <div>
+          <h1 style={{fontSize:"1.5rem"}}>Optimized Data Fetching</h1> 
+          <pre style={{margin:"2rem auto"}}>{`${JSON.stringify([{ id:"1",
+                    name:"siva",
+                    info:"Developer"
+                   },{
+                     id:"2",
+                     name:"Kumar",
+                     info:"Developer"
+                   }],null,2)}`}</pre>
+      </div>
+    </BrowserWindow> 
+
 3. **Prefetching Data**:
    - Prefetch data for links using the `next/link` component to improve navigation speed.
    ```javascript
@@ -103,6 +156,22 @@ You can combine static and dynamic data fetching to build more flexible and perf
    }
    ```
 
+**Output:**
+    <BrowserWindow>
+      <div>
+          <h1 style={{fontSize:"1.5rem"}} id="Text">Home Page</h1> 
+          <button style={{textDecoration:"underline",color:"blue",border:"none",background:"transparent",cursor:"pointer"}}
+          onClick={()=>{
+            let text=document.getElementById("Text")
+            text.textContent="About page"
+            let button=document.getElementById("button")
+            button.style.display="none"
+          }}
+           id="button">Go to About</button>
+      </div>
+    </BrowserWindow> 
+
+
 4. **Using SWR for Client-side Caching**:
    - `SWR` (Stale-While-Revalidate) is a React Hooks library for data fetching that provides caching and revalidation.
    ```javascript
@@ -119,4 +188,4 @@ You can combine static and dynamic data fetching to build more flexible and perf
      return <div>Data: {JSON.stringify(data)}</div>;
    }
    ```
- 
\ No newline at end of file
+
diff --git a/courses/Next.Js/advance-level/Advance-data-fetching/static-generation.md b/courses/Next.Js/advance-level/Advance-data-fetching/static-generation.md
index 65e5341c7..bc4bc9e0a 100644
--- a/courses/Next.Js/advance-level/Advance-data-fetching/static-generation.md
+++ b/courses/Next.Js/advance-level/Advance-data-fetching/static-generation.md
@@ -41,6 +41,8 @@ Static generation with revalidation allows you to generate static pages at build
    }
    ```
 
+
+
 #### Server-side Rendering with Caching Strategies
 
 Server-side rendering (SSR) can be optimized using caching strategies to improve performance and reduce server load.
@@ -73,4 +75,26 @@ Server-side rendering (SSR) can be optimized using caching strategies to improve
 
 2. **Using Cache-Control Headers**:
    - `s-maxage=10`: Cache the response on the server for 10 seconds.
-   - `stale-while-revalidate`: Serve stale content while revalidating in the background.
\ No newline at end of file
+   - `stale-while-revalidate`: Serve stale content while revalidating in the background.
+
+**Output:**
+    <BrowserWindow url="http://localhost:3000/users">
+      <div>
+          <h1>Static Generation with Revalidation</h1>
+          <button onClick={()=>{
+             let text=document.getElementById("text")
+             let details=[{
+                    id:"1",
+                    name:"siva",
+                    info:"Developer"
+                   },{
+                     id:"2",
+                     name:"John",
+                     info:"Developer"
+                   }] 
+              text.textContent=JSON.stringify(details, null, 2) 
+             }} style={{padding:"1rem 2rem",border:"none",borderRadius:"0.6rem",color:"white",background:"black",fontWeight:"600",cursor:"pointer"}}>click to Fetch</button>
+          <br />
+          <pre id="text" style={{margin:"2rem auto"}}></pre>
+      </div>
+    </BrowserWindow> 
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Introduction/Frameworks.md b/courses/Next.Js/beginner-level/Introduction/Frameworks.md
index 2d939dde9..fd7bac29a 100644
--- a/courses/Next.Js/beginner-level/Introduction/Frameworks.md
+++ b/courses/Next.Js/beginner-level/Introduction/Frameworks.md
@@ -4,62 +4,19 @@ title: "Comparing Next.js with Other Frameworks"
 sidebar_label: Next.js with Frameworks
 sidebar_position: 2
 description: "Comparing Next.js with Other Frameworks"
-tags: [courses, beginner-level, FramWorks, Introduction]
----
-
-## Comparing Next.js with Other Frameworks
-
-### 1. Next.js vs. React
-
-- **React**: A library for building user interfaces. It focuses on the view layer and requires additional libraries and tools for routing, state management, and server-side rendering.
-- **Next.js**: A framework built on top of React that provides out-of-the-box features like SSR, SSG, and file-based routing. It simplifies the setup and development process for React applications.
-
-### 2. Next.js vs. Angular
-
-- **Angular**: A full-fledged framework developed by Google that includes a complete set of tools for building single-page applications. It uses TypeScript by default and has a more opinionated structure.
-- **Next.js**: Focuses on server-side rendering and static site generation for React applications. It is less opinionated than Angular and provides more flexibility in terms of tools and libraries.
-
-### 3. Next.js vs. Vue
-
-- **Vue**: A progressive framework for building user interfaces, similar to React in terms of component-based architecture.
-- **Nuxt.js**: A framework built on top of Vue that provides similar features to Next.js, including SSR and SSG.
-- **Next.js**: The React counterpart to Nuxt.js, providing SSR, SSG, and additional optimizations for React applications.
-
-### 4. Next.js vs. Gatsby
-
-- **Gatsby**: A static site generator that uses React to build websites. It focuses on performance, SEO, and developer experience.
-- **Next.js**: Offers similar features to Gatsby, such as SSR and SSG, but with more flexibility and control over the development process. It is more suitable for applications that require server-side logic and dynamic data fetching.
-
-### 5. Next.js vs. SvelteKit
-
-- **SvelteKit**: A framework for building web applications using the Svelte framework. It focuses on simplicity, performance, and developer experience.
-- **Next.js**: Offers similar features to SvelteKit, such as SSR and SSG, but with a React-based approach. It provides a rich ecosystem of tools and libraries for building modern web applications.
-
-### 6. Next.js vs. Express (Node.js)
-
-- **Express**: A minimalist web framework for Node.js that focuses on building server-side applications and APIs.
-- **Next.js**: A framework for building React applications with server-side rendering and static site generation. It provides additional features like automatic code splitting, API routes, and optimized performance.
-
-### 7. Next.js vs. Nuxt.js
-
-- **Nuxt.js**: A framework for building Vue applications with server-side rendering and static site generation.
-- **Next.js**: The React counterpart to Nuxt.js, providing similar features like SSR, SSG, and a rich ecosystem of tools and libraries for building modern web applications.
-
-### 8. Next.js vs. Create React App (CRA)
-
-- **Create React App**: A tool for setting up React applications with a predefined configuration and build process.
-- **Next.js**: A framework that extends React with features like SSR, SSG, and API routes. It provides a more structured approach to building React applications with additional optimizations for performance and developer experience.
-
-### 9. Next.js vs. Blitz.js
-
-- **Blitz.js**: A full-stack framework for building web applications with React and Prisma. It focuses on developer productivity and seamless integration of backend and frontend logic.
-- **Next.js**: Offers similar features to Blitz.js, such as SSR and SSG, but with a more flexible approach to building applications. It provides a broader range of tools and libraries for customizing and optimizing React applications.
-
-### 10. Next.js vs. Sapper
-
-- **Sapper**: A framework for building web applications with Svelte that includes features like server-side rendering and routing.
-- **Next.js**: Offers similar features to Sapper, such as SSR and SSG, but with a React-based approach. It provides a more extensive set of tools and optimizations for building React applications.
-
-### Conclusion
-
-Next.js is a powerful framework for building React applications with server-side rendering, static site generation, and a rich ecosystem of tools and libraries. While there are other frameworks available for building web applications, Next.js stands out for its performance, developer experience, and flexibility in handling various use cases. Whether you are building a simple website, a full-fledged web application, or a complex enterprise solution, Next.js provides the features and optimizations needed to deliver high-quality applications efficiently.
+tags: [courses,beginner-level,FramWorks,Introduction]
+--- 
+  
+
+| **Feature**        | **React**                                                                 | **Next.js**                                                                                           | **Angular**                                                                                       | **Vue/Nuxt.js**                                                                                   |
+|--------------------|---------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------|
+| **Type**           | Library for building UIs                                                 | Framework built on top of React providing SSR, SSG, and file-based routing                           | Full-fledged framework for building single-page applications                                      | Vue: Progressive framework for building UIs <br /> Nuxt.js: Framework built on Vue providing SSR, SSG |
+| **Development**    | Focuses on the view layer, requires additional libraries for routing, SSR | Simplifies development with out-of-the-box SSR, SSG, and file-based routing                           | Complete set of tools, more opinionated structure                                                  | Vue: Similar to React with component-based architecture<br />Nuxt.js: Similar features to Next.js    |
+| **Flexibility**    | High, requires manual setup for routing, state management, SSR            | High, but provides more out-of-the-box features, simplifying setup                                   | Less flexibility, more opinionated                                                                 | Vue: High flexibility<br />Nuxt.js: Simplifies setup with out-of-the-box features                    |
+| **Language**       | JavaScript                                                                | JavaScript                                                                                           | TypeScript (default)                                                                               | Vue: JavaScript<br />Nuxt.js: JavaScript                                                            |
+| **Server-Side Rendering (SSR)** | Requires additional setup                                                      | Built-in SSR                                                                                          | Possible, but not as straightforward                                                               | Built-in SSR with Nuxt.js                                                                          |
+| **Static Site Generation (SSG)** | Requires additional setup                                                      | Built-in SSG                                                                                          | Possible, but not as straightforward                                                               | Built-in SSG with Nuxt.js                                                                          |
+| **Routing**        | Requires a library like React Router                                     | File-based routing                                                                                   | Built-in                                                                                          | Vue: Requires Vue Router<br />Nuxt.js: File-based routing                                            |
+| **State Management** | Requires a library like Redux or Context API                                  | Uses React state management, can integrate with libraries like Redux                                 | Built-in with services and RxJS                                                                    | Vue: Requires Vuex for state management<br />Nuxt.js: Integrates with Vuex                            |
+| **Learning Curve** | Moderate, requires understanding of additional libraries                 | Lower compared to React alone, due to built-in features                                              | Steeper learning curve due to more complex, opinionated framework                                  | Vue: Moderate learning curve<br />Nuxt.js: Lower compared to Vue alone, due to built-in features      |
+ 
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Introduction/introduction.md b/courses/Next.Js/beginner-level/Introduction/introduction.md
index 9baba51c8..01fccdfbf 100644
--- a/courses/Next.Js/beginner-level/Introduction/introduction.md
+++ b/courses/Next.Js/beginner-level/Introduction/introduction.md
@@ -1,19 +1,19 @@
 ---
 id: lesson-1
-title: Introduction to Next.js
+title: "Introduction to Next.js"
 sidebar_label: Introduction
 sidebar_position: 1
-description: Introduction to Next.js
-tags: [courses, beginner-level, FramWorks, Introduction]
----
+description: "Introduction to Next.js"
+tags: [courses,beginner-level,FramWorks,Introduction]
+--- 
+  
 
-## What is Next.js?
+#### What is Next.js?
 
 **Next.js** is a React framework that enables server-side rendering and static site generation for React applications. Developed by Vercel, it aims to provide a seamless developer experience while enhancing performance, scalability, and SEO. Next.js builds on top of React and provides a number of additional features to improve the development process and application performance.
 
 :::note
-
-Next.js offers several key features that make it a popular choice for building React applications:
+#### Benefits
 
 1. **Server-Side Rendering (SSR)**: Next.js enables server-side rendering, which allows pages to be pre-rendered on the server and sent to the client as fully rendered HTML. This improves initial load times and SEO.
 
@@ -28,7 +28,8 @@ Next.js offers several key features that make it a popular choice for building R
 6. **Built-in CSS and Sass Support**: Next.js has built-in support for importing CSS and Sass files, making it easy to style your applications.
 
 7. **Developer Experience**: Features like fast refresh, which provides instantaneous feedback on edits without losing component state, make the development process more efficient and enjoyable.
-   :::
+:::
+
 
 ## Why Learn Next.js?
 
diff --git a/courses/Next.Js/beginner-level/Introduction/settingUp.md b/courses/Next.Js/beginner-level/Introduction/settingUp.md
index c08ea88e5..fd92b0d68 100644
--- a/courses/Next.Js/beginner-level/Introduction/settingUp.md
+++ b/courses/Next.Js/beginner-level/Introduction/settingUp.md
@@ -4,17 +4,15 @@ title: "Setting Up the Development Environment"
 sidebar_label: Setup
 sidebar_position: 3
 description: "Setting Up the Development Environment"
-tags: [courses, beginner-level, FramWorks, Introduction]
----
-
+tags: [courses,beginner-level,FramWorks,Introduction]
+--- 
+   
 To get started with Next.js, you'll need Node.js and npm (or yarn) installed on your system. Follow these steps to set up a Next.js development environment:
 
 1. **Install Node.js**:
-
    - Download and install Node.js from [nodejs.org](https://nodejs.org/).
 
 2. **Create a New Next.js Application**:
-
    - Open your terminal and run the following command to create a new Next.js project:
      ```bash
      npx create-next-app@latest my-next-app
@@ -23,14 +21,12 @@ To get started with Next.js, you'll need Node.js and npm (or yarn) installed on
      ```
 
 3. **Navigate to the Project Directory**:
-
    - Change to the project directory:
      ```bash
      cd my-next-app
      ```
 
 4. **Start the Development Server**:
-
    - Run the development server:
      ```bash
      npm run dev
@@ -39,7 +35,10 @@ To get started with Next.js, you'll need Node.js and npm (or yarn) installed on
      ```
    - Open your browser and navigate to [http://localhost:3000](http://localhost:3000) to see your Next.js application running.
 
-5. **Explore the Project Structure**:
+ 
+ ![Screenshot from 2024-07-20 07-58-50](https://github.com/user-attachments/assets/5dbec61f-cd1f-458f-9856-e8f9d82af8de)
+
+ 5. **Explore the Project Structure**:
 
    - Next.js projects have the following structure:
      ```
diff --git a/courses/Next.Js/beginner-level/Pages-and-routing/FIlebase-Routing.md b/courses/Next.Js/beginner-level/Pages-and-routing/FIlebase-Routing.md
index 4100c1118..4d267dcd7 100644
--- a/courses/Next.Js/beginner-level/Pages-and-routing/FIlebase-Routing.md
+++ b/courses/Next.Js/beginner-level/Pages-and-routing/FIlebase-Routing.md
@@ -63,6 +63,12 @@ Nested routes can be achieved by creating folders within the `src/pages` directo
        return <h1>Products Page</h1>;
      }
      ```
+    <BrowserWindow url="http://localhost:3000/product">
+        <div>
+          <h1>Products Page</h1>   
+        </div>
+    </BrowserWindow>
+
 
 3. **Nested Dynamic Route**:
    - The `[id].js` file inside the `products` directory maps to dynamic routes like `/products/1`, `/products/2`, etc.:
@@ -77,4 +83,9 @@ Nested routes can be achieved by creating folders within the `src/pages` directo
        return <h1>Product {id}</h1>;
      }
      ```
+    <BrowserWindow url="http://localhost:3000/products/3">
+        <div>
+          <h1>Products 3</h1> 
+        </div>
+    </BrowserWindow>
  
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Pages-and-routing/creating-pages.md b/courses/Next.Js/beginner-level/Pages-and-routing/creating-pages.md
index aecf68588..c6cb8567d 100644
--- a/courses/Next.Js/beginner-level/Pages-and-routing/creating-pages.md
+++ b/courses/Next.Js/beginner-level/Pages-and-routing/creating-pages.md
@@ -22,6 +22,12 @@ In Next.js, pages are React components that are stored in the `src/pages` direct
      ```
    - This file will be accessible at the `/about` URL.
 
+    <BrowserWindow url="http://localhost:3000/about">
+        <div>
+          <h1>About Us</h1>   
+        </div>
+    </BrowserWindow>
+
 2. **Home Page**:
    - The default home page is created by adding `index.js` to the `src/pages` directory:
      ```javascript
@@ -31,3 +37,9 @@ In Next.js, pages are React components that are stored in the `src/pages` direct
      }
      ```
    - This file will be accessible at the root URL `/`.
+
+    <BrowserWindow url="http://localhost:3000/">
+        <div>
+          <h1>Welcome to Our Site</h1>   
+        </div>
+    </BrowserWindow>
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Routes/Database.md b/courses/Next.Js/beginner-level/Routes/Database.md
index 0f365fe7f..12dc0c4ff 100644
--- a/courses/Next.Js/beginner-level/Routes/Database.md
+++ b/courses/Next.Js/beginner-level/Routes/Database.md
@@ -117,4 +117,24 @@ You can connect your API routes to a database using popular database libraries l
        }
      }
      ```
- 
\ No newline at end of file
+    <BrowserWindow url="http://localhost:3000/users">
+        <div>
+          Fetched user Details
+          <br />
+          <button onClick={()=>{
+             let text=document.getElementById("text")
+             let details=[{
+                    id:"1",
+                    name:"siva",
+                    info:"Developer"
+                   },{
+                     id:"2",
+                     name:"John",
+                     info:"Developer"
+                   }]
+              text.textContent=JSON.stringify(details, null, 2)
+             }}>click to Fetch</button>
+          <br />
+          <pre id="text">No results Found</pre>
+        </div>
+     </BrowserWindow>
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Started/Running-development.md b/courses/Next.Js/beginner-level/Started/Running-development.md
index 85e1e369d..d46ffa81b 100644
--- a/courses/Next.Js/beginner-level/Started/Running-development.md
+++ b/courses/Next.Js/beginner-level/Started/Running-development.md
@@ -46,6 +46,8 @@ Next.js provides built-in commands to build and deploy your application.
      yarn start
      ```
 
+ ![Screenshot from 2024-07-20 07-58-50](https://github.com/user-attachments/assets/5dbec61f-cd1f-458f-9856-e8f9d82af8de)
+ 
 3. **Deploying the Application**:
    - **Vercel**: Vercel is the company behind Next.js and provides seamless integration for deploying Next.js applications.
      - Install the Vercel CLI:
diff --git a/courses/Next.Js/beginner-level/static-and-serverSide/concept.md b/courses/Next.Js/beginner-level/static-and-serverSide/concept.md
index 5483dc2f4..ca18bb498 100644
--- a/courses/Next.Js/beginner-level/static-and-serverSide/concept.md
+++ b/courses/Next.Js/beginner-level/static-and-serverSide/concept.md
@@ -4,24 +4,21 @@ title: "Concepts of static and server-side rendering"
 sidebar_label: Concepts
 sidebar_position: 2
 description: "Concepts of static and server-side rendering"
-tags: [courses, beginner-level, FramWorks, Introduction]
+tags: [courses,beginner-level,FramWorks,Introduction]
 ---
-
+ 
 #### Implementing Static Generation (`getStaticProps`)
 
 `getStaticProps` is a Next.js function that allows you to fetch data at build time to pre-render a page.
 
 1. **Creating a Page with `getStaticProps`**:
-
    ```javascript
    // src/pages/posts/[id].js
-   import { useRouter } from "next/router";
+   import { useRouter } from 'next/router';
 
    export async function getStaticProps({ params }) {
      // Fetch data for the post using the id from params
-     const res = await fetch(
-       `https://jsonplaceholder.typicode.com/posts/${params.id}`,
-     );
+     const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
      const post = await res.json();
 
      return {
@@ -33,10 +30,10 @@ tags: [courses, beginner-level, FramWorks, Introduction]
 
    export async function getStaticPaths() {
      // Specify dynamic routes to pre-render based on data
-     const res = await fetch("https://jsonplaceholder.typicode.com/posts");
+     const res = await fetch('https://jsonplaceholder.typicode.com/posts');
      const posts = await res.json();
 
-     const paths = posts.map((post) => ({
+     const paths = posts.map(post => ({
        params: { id: post.id.toString() },
      }));
 
@@ -71,12 +68,11 @@ tags: [courses, beginner-level, FramWorks, Introduction]
 `getServerSideProps` is a Next.js function that allows you to fetch data on each request to pre-render a page.
 
 1. **Creating a Page with `getServerSideProps`**:
-
    ```javascript
    // src/pages/profile.js
    export async function getServerSideProps(context) {
      // Fetch data on each request
-     const res = await fetch("https://jsonplaceholder.typicode.com/users/1");
+     const res = await fetch('https://jsonplaceholder.typicode.com/users/1');
      const profile = await res.json();
 
      return {
@@ -95,6 +91,12 @@ tags: [courses, beginner-level, FramWorks, Introduction]
      );
    }
    ```
+    <BrowserWindow url="http://localhost:3000/profile">
+          <div> 
+            <h1>John</h1>
+            <p>johnexample@gmail.com</p>
+           </div>  
+    </BrowserWindow>
 
 2. **Explanation**:
    - `getServerSideProps` fetches data on each request and passes it as props to the page component.
@@ -105,13 +107,10 @@ tags: [courses, beginner-level, FramWorks, Introduction]
 ISR allows you to update static pages after they have been built, without requiring a full rebuild of the site.
 
 1. **Implementing ISR with `revalidate`**:
-
    ```javascript
    // src/pages/posts/[id].js
    export async function getStaticProps({ params }) {
-     const res = await fetch(
-       `https://jsonplaceholder.typicode.com/posts/${params.id}`,
-     );
+     const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
      const post = await res.json();
 
      return {
@@ -123,10 +122,10 @@ ISR allows you to update static pages after they have been built, without requir
    }
 
    export async function getStaticPaths() {
-     const res = await fetch("https://jsonplaceholder.typicode.com/posts");
+     const res = await fetch('https://jsonplaceholder.typicode.com/posts');
      const posts = await res.json();
 
-     const paths = posts.map((post) => ({
+     const paths = posts.map(post => ({
        params: { id: post.id.toString() },
      }));
 
@@ -150,11 +149,22 @@ ISR allows you to update static pages after they have been built, without requir
      );
    }
    ```
-
+  <BrowserWindow url="http://localhost:3000/post/3">
+        <div id="screen"> 
+        Loading...
+        </div> 
+        <button style={{margin:"1rem",padding:"0.5rem 1.2rem"}} onClick={()=>{
+        let screen = document.getElementById("screen"); 
+        let post=document.createElement("h1")
+        let body=document.createElement("p")
+        post.textContent="Blog worked" 
+        body.textContent="Hello users learn course and gain knowledage.keep connect with our website."
+            screen.textContent = ""  
+            screen.appendChild(post)
+            screen.appendChild(body)
+            }}>Show Answer</button>
+  </BrowserWindow>
 2. **Explanation**:
    - `revalidate`: Specifies the number of seconds after which the page should be regenerated.
    - With ISR, the page will be updated in the background after the specified time, providing fresh content without a full rebuild.
-
-#### Conclusion
-
-Next.js provides various methods for rendering pages, including static generation, server-side rendering, and incremental static regeneration. These features allow you to optimize performance and user experience by fetching data at build time or on each request.
+ 
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/static-and-serverSide/introduction.md b/courses/Next.Js/beginner-level/static-and-serverSide/introduction.md
index 95b07c2e8..7cf4a6cef 100644
--- a/courses/Next.Js/beginner-level/static-and-serverSide/introduction.md
+++ b/courses/Next.Js/beginner-level/static-and-serverSide/introduction.md
@@ -1,22 +1,21 @@
 ---
 id: lesson-1
 title: "Static and Server-Side Rendering in Next.js"
-sidebar_label: Static and Server-Side Rendering
+sidebar_label: Static and Server-Side Rendering 
 sidebar_position: 1
 description: "Static and Server-Side Rendering in Next.js"
-tags: [courses, beginner-level, FramWorks, Introduction]
+tags: [courses,beginner-level,FramWorks,Introduction]
 ---
+ 
 
-## Difference Between Static and Server-Side Rendering
+#### Difference Between Static and Server-Side Rendering
 
 **Static Rendering (Static Site Generation - SSG)**:
-
 - **Pre-rendering**: Pages are generated at build time, and the HTML is created once and reused for each request.
 - **Performance**: Faster since the content is pre-rendered and served as static files.
 - **Use Cases**: Ideal for pages that do not require frequent updates, such as blogs, documentation, and marketing pages.
 
 **Server-Side Rendering (SSR)**:
-
 - **On-Demand Rendering**: Pages are generated on each request, fetching data and rendering HTML dynamically.
 - **Performance**: Slower compared to static rendering because the server must generate the HTML for each request.
 - **Use Cases**: Suitable for pages that require real-time data or frequent updates, such as dashboards, user profiles, and dynamic content.