Skip to content

Commit 0cbff41

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #4106 from sivaprasath2004/sivaprasath-closes-issue-4069
[Feature]: Add Next.Js tutorials output BrowserWindow
2 parents 358d38d + f2cbeeb commit 0cbff41

File tree

9 files changed

+236
-6
lines changed

9 files changed

+236
-6
lines changed

‎docs/NextJs/Next.js API routes/API middlewares.md

+25-1
Original file line numberDiff line numberDiff line change
@@ -59,4 +59,28 @@ event - compiled successfully
5959

6060
Open http://localhost:3000/api/user?counter=1 in a browser and you will see the following output.
6161

62-
``` {"query":{"counter":"1"}} ```
62+
``` {"query":{"counter":"1"}} ```
63+
64+
65+
<BrowserWindow>
66+
<div style={{display:'flex',flexWrap:"wrap",justifyContent:"center",alignItems:"center"}}>
67+
<div style={{flex:"1 0 20rem",minHeight:"20rem"}} id="output">
68+
<p>app listen in 3000...</p>
69+
</div>
70+
<div style={{flex:"1 0 20rem",minHeight:"20rem"}}>
71+
<button onClick={()=>{
72+
let button_ele=document.getElementById("button_ele")
73+
button_ele.style.display="none"
74+
let output=document.getElementById("output")
75+
let p=document.createElement("p")
76+
p.textContent="GET /api/user?counter=1 "
77+
output.appendChild(p)
78+
setTimeout(()=>{
79+
let fontend=document.getElementById("fontend")
80+
fontend.textContent= JSON.stringify({"query":{"counter":"1"}},null,2)
81+
},1500)
82+
}} id="button_ele">click to see the output</button>
83+
<pre id="fontend"></pre>
84+
</div>
85+
</div>
86+
</BrowserWindow>

‎docs/NextJs/Next.js API routes/API routes.md

+25-1
Original file line numberDiff line numberDiff line change
@@ -65,4 +65,28 @@ event - compiled successfully
6565

6666
Open localhost:3000/api/user in a browser and you will see the following output.
6767

68-
```{"name":"Robert"} ```
68+
```{"name":"Robert"} ```
69+
70+
71+
<BrowserWindow>
72+
<div style={{display:'flex',flexWrap:"wrap",justifyContent:"center",alignItems:"center"}}>
73+
<div style={{flex:"1 0 20rem",minHeight:"20rem"}} id="output">
74+
<p>app listen in 3000...</p>
75+
</div>
76+
<div style={{flex:"1 0 20rem",minHeight:"20rem"}}>
77+
<button onClick={()=>{
78+
let button_ele=document.getElementById("button_ele")
79+
button_ele.style.display="none"
80+
let output=document.getElementById("output")
81+
let p=document.createElement("p")
82+
p.textContent="GET /api/user "
83+
output.appendChild(p)
84+
setTimeout(()=>{
85+
let fontend=document.getElementById("fontend")
86+
fontend.textContent= JSON.stringify({"name":"Robert"},null,2)
87+
},1500)
88+
}} id="button_ele">click to see the output</button>
89+
<pre id="fontend"></pre>
90+
</div>
91+
</div>
92+
</BrowserWindow>

‎docs/NextJs/Next.js Features/metadata.md

+23-1
Original file line numberDiff line numberDiff line change
@@ -81,4 +81,26 @@ event - compiled successfully
8181

8282
## Verify Output
8383

84-
Open localhost:3000 in a browser
84+
Open localhost:3000 in a browser
85+
86+
<BrowserWindow>
87+
<div id="output_con_1">
88+
<h1>Welcome to Next.js!</h1>
89+
<h2 onClick={()=>{
90+
let output_con_1=document.getElementById("output_con_1")
91+
output_con_1.style.display="none"
92+
let output_con_2=document.getElementById("output_con_2")
93+
output_con_2.style.display="block"
94+
}} style={{color:"blue",textDecoration:"underline",cursor:"pointer"}}>First Post</h2>
95+
<img src="/img/favicon_io/android-chrome-192x192.png" alt="CodeHarborhub Logo" style={{height:"5rem",width:"5rem"}} />
96+
</div>
97+
<div style={{display:"none"}} id="output_con_2">
98+
<h1>My First Post</h1>
99+
<h2 onClick={()=>{
100+
let output_con_2=document.getElementById("output_con_2")
101+
output_con_2.style.display="none"
102+
let output_con_1=document.getElementById("output_con_1")
103+
output_con_1.style.display="block"
104+
}} style={{color:"blue",textDecoration:"underline",cursor:"pointer"}}>Home</h2>
105+
</div>
106+
</BrowserWindow>

‎docs/NextJs/Next.js Features/pages.md

+23-1
Original file line numberDiff line numberDiff line change
@@ -87,4 +87,26 @@ Open localhost:3000 in a browser and you will see the following output.
8787
```
8888
Home page
8989
```
90-
Click on First Link and you will see the following output.
90+
Click on First Link and you will see the following output.
91+
92+
93+
<BrowserWindow>
94+
<div id="output_con_1">
95+
<h1>My First Post</h1>
96+
<h2 onClick={()=>{
97+
let output_con_1=document.getElementById("output_con_1")
98+
output_con_1.style.display="none"
99+
let output_con_2=document.getElementById("output_con_2")
100+
output_con_2.style.display="block"
101+
}} style={{color:"blue",textDecoration:"underline",cursor:"pointer"}}>Home</h2>
102+
</div>
103+
<div style={{display:"none"}} id="output_con_2">
104+
<h1>Welcome to Next.js!</h1>
105+
<h2 onClick={()=>{
106+
let output_con_2=document.getElementById("output_con_2")
107+
output_con_2.style.display="none"
108+
let output_con_1=document.getElementById("output_con_1")
109+
output_con_1.style.display="block"
110+
}} style={{color:"blue",textDecoration:"underline",cursor:"pointer"}}>First Post</h2>
111+
</div>
112+
</BrowserWindow>

‎docs/NextJs/Next.js Features/statcfileserving.md

+16-1
Original file line numberDiff line numberDiff line change
@@ -59,4 +59,19 @@ event - compiled successfully
5959

6060
## Verify Output
6161

62-
Open localhost:3000 in a browser
62+
Open localhost:3000 in a browser
63+
64+
<BrowserWindow>
65+
<div id="browsing_static_files">
66+
<h1>My First Post</h1>
67+
<h2 onClick={()=>{
68+
let browsing_static_files=document.getElementById("browsing_static_files")
69+
browsing_static_files.style.display="none"
70+
setTimeout(()=>{
71+
browsing_static_files.style.display="block"
72+
},1000)
73+
}} style={{fontSize:"1rem",color:"blue",textDecoration:"underline",cursor:"pointer"}}>Home</h2>
74+
<br />
75+
<img src="/img/favicon_io/android-chrome-192x192.png" alt="CodeHarborhub Logo" style={{height:"5rem",width:"5rem"}} />
76+
</div>
77+
</BrowserWindow>

‎docs/NextJs/Next.js Routing/Next.js -Routing.md

+26
Original file line numberDiff line numberDiff line change
@@ -97,3 +97,29 @@ event - compiled successfully
9797
## Verify Output
9898

9999
Open localhost:3000 in a browser
100+
101+
<BrowserWindow>
102+
<div id="output_con_1">
103+
<h1>Welcome to Next.js..!</h1>
104+
<h2 onClick={()=>{
105+
let output_con_1=document.getElementById("output_con_1")
106+
output_con_1.style.display="none"
107+
let output_con_2=document.getElementById("output_con_2")
108+
output_con_2.style.display="block"
109+
}} style={{color:"blue",textDecoration:"underline",cursor:"pointer"}}>visit First Post</h2>
110+
</div>
111+
<div style={{display:"none"}} id="output_con_2">
112+
<h1>My First Post</h1>
113+
<h2 onClick={()=>{
114+
let output_con_2=document.getElementById("output_con_2")
115+
output_con_2.style.display="none"
116+
let output_con_1=document.getElementById("output_con_1")
117+
output_con_1.style.display="block"
118+
}} style={{color:"blue",textDecoration:"underline",cursor:"pointer"}}>Home</h2>
119+
<br />
120+
<h4>Important notes.!</h4>
121+
<br />
122+
<p>Hello Everyone keep supporting and Contributting our project.</p>
123+
<p>Let's Learn & Succeeded our Life</p>
124+
</div>
125+
</BrowserWindow>

‎docs/NextJs/Next.js Routing/Next.js-Dynamic API Routing.md

+92
Original file line numberDiff line numberDiff line change
@@ -112,3 +112,95 @@ event - compiled successfully
112112
```Open localhost:3000/posts/one in a browser and you will see the following output. ```
113113

114114
``` Open localhost:3000/posts/two in a browser and you will see the following output. ```
115+
116+
<BrowserWindow>
117+
<div id="buttons_con" style={{display:"flex",flexDirection:"column",gap:"1rem",justifyContent:"center",alignItems:"center"}}>
118+
<button
119+
onClick={()=>{
120+
let buttons_con=document.getElementById("buttons_con")
121+
buttons_con.style.display="none"
122+
let get_all_post_con=document.getElementById("get_all_post_con")
123+
get_all_post_con.style.display="block"
124+
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"}]
125+
data.map((item)=>{
126+
let h4=document.createElement("h4")
127+
h4.textContent=item.title
128+
let p=document.createElement("p")
129+
p.textContent=item.body
130+
let hr=document.createElement("hr")
131+
get_all_post_con.appendChild(h4)
132+
get_all_post_con.appendChild(p)
133+
get_all_post_con.appendChild(hr)
134+
})
135+
}}
136+
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>
137+
<button
138+
onClick={()=>{
139+
let buttons_con=document.getElementById("buttons_con")
140+
buttons_con.style.display="none"
141+
let see_1st_post_con=document.getElementById("see_1st_post_con")
142+
see_1st_post_con.style.display="block"
143+
let data=[{id:1,title:"This is 1st post",body:"Thank you for visiting in our 1st post"}]
144+
data.map((item)=>{
145+
let h4=document.createElement("h4")
146+
h4.textContent=item.title
147+
let p=document.createElement("p")
148+
p.textContent=item.body
149+
let hr=document.createElement("hr")
150+
see_1st_post_con.appendChild(h4)
151+
see_1st_post_con.appendChild(p)
152+
see_1st_post_con.appendChild(hr)
153+
})
154+
}}
155+
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"}}
156+
>1st Post</button>
157+
<button
158+
onClick={()=>{
159+
let buttons_con=document.getElementById("buttons_con")
160+
buttons_con.style.display="none"
161+
let see_2nd_post_con=document.getElementById("see_2nd_post_con")
162+
see_2nd_post_con.style.display="block"
163+
let data=[{id:2,title:"This is 2nd post",body:"Thank you for visiting in our 2nd post"}]
164+
data.map((item)=>{
165+
let h4=document.createElement("h4")
166+
h4.textContent=item.title
167+
let p=document.createElement("p")
168+
p.textContent=item.body
169+
let hr=document.createElement("hr")
170+
see_2nd_post_con.appendChild(h4)
171+
see_2nd_post_con.appendChild(p)
172+
see_2nd_post_con.appendChild(hr)
173+
})
174+
}}
175+
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"}}
176+
>2nd Post</button>
177+
<button
178+
onClick={()=>{
179+
let buttons_con=document.getElementById("buttons_con")
180+
buttons_con.style.display="none"
181+
let see_3rd_post_con=document.getElementById("see_3rd_post_con")
182+
see_3rd_post_con.style.display="block"
183+
let data=[{id:3,title:"This is 3rd post",body:"Thank you for visiting in our 3rd post"}]
184+
data.map((item)=>{
185+
let h4=document.createElement("h4")
186+
h4.textContent=item.title
187+
let p=document.createElement("p")
188+
p.textContent=item.body
189+
let hr=document.createElement("hr")
190+
see_3rd_post_con.appendChild(h4)
191+
see_3rd_post_con.appendChild(p)
192+
see_3rd_post_con.appendChild(hr)
193+
})
194+
}}
195+
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"}}
196+
>3rd Post</button>
197+
</div>
198+
<div id="get_all_post_con" style={{display:"none"}}>
199+
</div>
200+
<div id="see_1st_post_con" style={{display:"none"}}>
201+
</div>
202+
<div id="see_2nd_post_con" style={{display:"none"}}>
203+
</div>
204+
<div id="see_3rd_post_con" style={{display:"none"}}>
205+
</div>
206+
</BrowserWindow>

‎docs/NextJs/index.md

+5
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,11 @@ export default function Page() {
5757
return <h1>Hello, Next.js!</h1>
5858
}
5959
```
60+
61+
<BrowserWindow>
62+
<h1>Hello, Next.js!</h1>
63+
</BrowserWindow>
64+
6065
Now, you can start the development server:
6166

6267
Run `npm run dev` to start the development server.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
"@babel/preset-react": "^7.24.7",
8080
"@docusaurus/module-type-aliases": "^3.3.2",
8181
"@docusaurus/types": "^3.3.2",
82-
"@types/node": "^22.0.0",
82+
"@types/node": "^20.14.10",
8383
"@types/react-icons": "^3.0.0",
8484
"dotenv": "^16.4.5",
8585
"gh-pages": "^6.1.1",

0 commit comments

Comments
 (0)