Skip to content

Commit 0643a12

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #3673 from sivaprasath2004/sivaprasath-closes-issue-3621
[Feature]: Next.Js Demo output
2 parents afe800b + 5ef7237 commit 0643a12

File tree

14 files changed

+275
-112
lines changed

14 files changed

+275
-112
lines changed

‎courses/Next.Js/Intermediate-level/Data-Fetching/Handling.md

+8-1
Original file line numberDiff line numberDiff line change
@@ -63,4 +63,11 @@ Handling errors in data fetching is crucial to provide a good user experience.
6363
</div>
6464
);
6565
}
66-
```
66+
```
67+
68+
**Output:**
69+
<BrowserWindow >
70+
<div>
71+
Failed to load: 404 server not found
72+
</div>
73+
</BrowserWindow>

‎courses/Next.Js/Intermediate-level/Data-Fetching/fetching-Data.md

+15-1
Original file line numberDiff line numberDiff line change
@@ -102,4 +102,18 @@ export default function Home() {
102102
</div>
103103
);
104104
}
105-
```
105+
```
106+
107+
**Output:**
108+
109+
<BrowserWindow url="http://localhost:3000/post/3">
110+
<h1>Posts</h1>
111+
<ul>
112+
<li>Post 1</li>
113+
<li>Post 2</li>
114+
<li>Post 3</li>
115+
<li>Post 4</li>
116+
<li>Post 5</li>
117+
<li>Post 6</li>
118+
</ul>
119+
</BrowserWindow>

‎courses/Next.Js/advance-level/Advance-Routing/Customizing.md

+40-2
Original file line numberDiff line numberDiff line change
@@ -80,19 +80,57 @@ Route-level code splitting ensures that only the necessary code for the current
8080
2. **Using `dynamic` for Code Splitting with Custom Loading**:
8181
```javascript
8282
// pages/index.js
83+
import { useState } from 'react';
8384
import dynamic from 'next/dynamic';
8485
8586
const DynamicComponentWithCustomLoading = dynamic(() => import('../components/DynamicComponent'), {
8687
loading: () => <p>Loading...</p>,
8788
});
8889
8990
export default function Home() {
91+
const [loadDynamicComponent, setLoadDynamicComponent] = useState(false);
92+
93+
const handleClick = () => {
94+
setLoadDynamicComponent(true);
95+
};
9096
return (
9197
<div>
9298
<h1>Home Page</h1>
93-
<DynamicComponentWithCustomLoading />
99+
<button onClick={handleClick}>Load Dynamic Component</button>
100+
{loadDynamicComponent && <DynamicComponentWithCustomLoading />}
94101
</div>
95102
);
96103
}
97104
```
98-
105+
**Output:**
106+
<BrowserWindow>
107+
<div>
108+
<h1 style={{fontSize:"1.5rem"}}>Home Page</h1>
109+
<button onClick={()=>{
110+
let button=document.getElementById("button")
111+
button.style.display="none"
112+
let Interval=setInterval(()=>{
113+
let Dynamic=document.getElementById("Dynamic")
114+
let datas=["1st Content","2nd Content","3rd Content"]
115+
let Index
116+
if(Dynamic && Dynamic.textContent && Dynamic.textContent.length>1){
117+
if(Dynamic.textContent==="Switch Dynamic Content"){
118+
Index=0
119+
}
120+
else{
121+
if(datas.indexOf(Dynamic.textContent)==2){
122+
Index=0
123+
}
124+
else{Index=datas.indexOf(Dynamic.textContent)+1}
125+
}
126+
Dynamic.textContent=datas[Index]
127+
}
128+
else{
129+
clearInterval(Interval)
130+
return
131+
}
132+
},1000)
133+
}} id="button" style={{padding:"0.8rem 2rem",fontWeight:"600",borderRadius:"0.6rem",border:"0.1rem solid",margin:"0.5rem"}}>Load Dynamic Component</button>
134+
<h2 style={{fontSize:"1.3rem"}} id="Dynamic">Switch Dynamic Content</h2>
135+
</div>
136+
</BrowserWindow>

‎courses/Next.Js/advance-level/Advance-data-fetching/dynamic-generation.md

+73-4
Original file line numberDiff line numberDiff line change
@@ -31,19 +31,20 @@ You can combine static and dynamic data fetching to build more flexible and perf
3131
export default function Home({ staticData }) {
3232
const [dynamicData, setDynamicData] = useState(null);
3333
34-
useEffect(() => {
34+
function handleClick(){
3535
// Fetch dynamic data on client-side
3636
fetch('https://api.example.com/dynamic-data')
3737
.then((res) => res.json())
3838
.then((data) => setDynamicData(data));
39-
}, []);
39+
}
4040
4141
return (
4242
<div>
4343
<h1>Combining Static and Dynamic Data Fetching</h1>
4444
<h2>Static Data</h2>
4545
<pre>{JSON.stringify(staticData, null, 2)}</pre>
4646
<h2>Dynamic Data</h2>
47+
<button onClick={handleClick}>click to Fetch</button>
4748
{dynamicData ? (
4849
<pre>{JSON.stringify(dynamicData, null, 2)}</pre>
4950
) : (
@@ -53,7 +54,44 @@ You can combine static and dynamic data fetching to build more flexible and perf
5354
);
5455
}
5556
```
56-
57+
**Output:**
58+
<BrowserWindow url="http://localhost:3000/users">
59+
<div>
60+
<h1 style={{fontSize:"1.5rem"}}>Combining Static and Dynamic Data Fetching</h1>
61+
<h2 style={{fontSize:"1.3rem"}}>Static Data</h2>
62+
<pre style={{margin:"2rem auto"}}>{`${JSON.stringify([{ id:"1",
63+
name:"siva",
64+
info:"Developer"
65+
},{
66+
id:"2",
67+
name:"Kumar",
68+
info:"Developer"
69+
}],null,2)}`}</pre>
70+
<h2 style={{fontSize:"1.3rem"}}>Dynamic Data</h2>
71+
<button onClick={()=>{
72+
let text=document.getElementById("text")
73+
let loading=document.getElementById("loading")
74+
let details=[{
75+
id:"11",
76+
name:"Rohan",
77+
info:"Jr.Developer"
78+
},{
79+
id:"15",
80+
name:"Mano",
81+
info:"Sr.Developer"
82+
}]
83+
loading.textContent="Loading..."
84+
setTimeout(() => {
85+
text.style.display="block"
86+
loading.textContent=" "
87+
text.textContent=JSON.stringify(details, null, 2)
88+
}, 2000)
89+
}} style={{padding:"1rem 2rem",border:"none",borderRadius:"0.6rem",color:"white",background:"black",fontWeight:"600",cursor:"pointer"}}>click to Fetch</button>
90+
<br />
91+
<p id="loading" style={{margin:"2rem auto"}}></p>
92+
<pre id="text" style={{margin:"2rem auto",display:"none"}}></pre>
93+
</div>
94+
</BrowserWindow>
5795
#### Optimizing Data Fetching for Performance
5896

5997
1. **Minimizing API Calls**:
@@ -86,6 +124,21 @@ You can combine static and dynamic data fetching to build more flexible and perf
86124
}
87125
```
88126

127+
**Output:**
128+
<BrowserWindow url="http://localhost:3000/data">
129+
<div>
130+
<h1 style={{fontSize:"1.5rem"}}>Optimized Data Fetching</h1>
131+
<pre style={{margin:"2rem auto"}}>{`${JSON.stringify([{ id:"1",
132+
name:"siva",
133+
info:"Developer"
134+
},{
135+
id:"2",
136+
name:"Kumar",
137+
info:"Developer"
138+
}],null,2)}`}</pre>
139+
</div>
140+
</BrowserWindow>
141+
89142
3. **Prefetching Data**:
90143
- Prefetch data for links using the `next/link` component to improve navigation speed.
91144
```javascript
@@ -103,6 +156,22 @@ You can combine static and dynamic data fetching to build more flexible and perf
103156
}
104157
```
105158

159+
**Output:**
160+
<BrowserWindow>
161+
<div>
162+
<h1 style={{fontSize:"1.5rem"}} id="Text">Home Page</h1>
163+
<button style={{textDecoration:"underline",color:"blue",border:"none",background:"transparent",cursor:"pointer"}}
164+
onClick={()=>{
165+
let text=document.getElementById("Text")
166+
text.textContent="About page"
167+
let button=document.getElementById("button")
168+
button.style.display="none"
169+
}}
170+
id="button">Go to About</button>
171+
</div>
172+
</BrowserWindow>
173+
174+
106175
4. **Using SWR for Client-side Caching**:
107176
- `SWR` (Stale-While-Revalidate) is a React Hooks library for data fetching that provides caching and revalidation.
108177
```javascript
@@ -119,4 +188,4 @@ You can combine static and dynamic data fetching to build more flexible and perf
119188
return <div>Data: {JSON.stringify(data)}</div>;
120189
}
121190
```
122-
191+

‎courses/Next.Js/advance-level/Advance-data-fetching/static-generation.md

+25-1
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ Static generation with revalidation allows you to generate static pages at build
4141
}
4242
```
4343

44+
45+
4446
#### Server-side Rendering with Caching Strategies
4547

4648
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
7375

7476
2. **Using Cache-Control Headers**:
7577
- `s-maxage=10`: Cache the response on the server for 10 seconds.
76-
- `stale-while-revalidate`: Serve stale content while revalidating in the background.
78+
- `stale-while-revalidate`: Serve stale content while revalidating in the background.
79+
80+
**Output:**
81+
<BrowserWindow url="http://localhost:3000/users">
82+
<div>
83+
<h1>Static Generation with Revalidation</h1>
84+
<button onClick={()=>{
85+
let text=document.getElementById("text")
86+
let details=[{
87+
id:"1",
88+
name:"siva",
89+
info:"Developer"
90+
},{
91+
id:"2",
92+
name:"John",
93+
info:"Developer"
94+
}]
95+
text.textContent=JSON.stringify(details, null, 2)
96+
}} style={{padding:"1rem 2rem",border:"none",borderRadius:"0.6rem",color:"white",background:"black",fontWeight:"600",cursor:"pointer"}}>click to Fetch</button>
97+
<br />
98+
<pre id="text" style={{margin:"2rem auto"}}></pre>
99+
</div>
100+
</BrowserWindow>

‎courses/Next.Js/beginner-level/Introduction/Frameworks.md

+16-59
Original file line numberDiff line numberDiff line change
@@ -4,62 +4,19 @@ title: "Comparing Next.js with Other Frameworks"
44
sidebar_label: Next.js with Frameworks
55
sidebar_position: 2
66
description: "Comparing Next.js with Other Frameworks"
7-
tags: [courses, beginner-level, FramWorks, Introduction]
8-
---
9-
10-
## Comparing Next.js with Other Frameworks
11-
12-
### 1. Next.js vs. React
13-
14-
- **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.
15-
- **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.
16-
17-
### 2. Next.js vs. Angular
18-
19-
- **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.
20-
- **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.
21-
22-
### 3. Next.js vs. Vue
23-
24-
- **Vue**: A progressive framework for building user interfaces, similar to React in terms of component-based architecture.
25-
- **Nuxt.js**: A framework built on top of Vue that provides similar features to Next.js, including SSR and SSG.
26-
- **Next.js**: The React counterpart to Nuxt.js, providing SSR, SSG, and additional optimizations for React applications.
27-
28-
### 4. Next.js vs. Gatsby
29-
30-
- **Gatsby**: A static site generator that uses React to build websites. It focuses on performance, SEO, and developer experience.
31-
- **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.
32-
33-
### 5. Next.js vs. SvelteKit
34-
35-
- **SvelteKit**: A framework for building web applications using the Svelte framework. It focuses on simplicity, performance, and developer experience.
36-
- **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.
37-
38-
### 6. Next.js vs. Express (Node.js)
39-
40-
- **Express**: A minimalist web framework for Node.js that focuses on building server-side applications and APIs.
41-
- **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.
42-
43-
### 7. Next.js vs. Nuxt.js
44-
45-
- **Nuxt.js**: A framework for building Vue applications with server-side rendering and static site generation.
46-
- **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.
47-
48-
### 8. Next.js vs. Create React App (CRA)
49-
50-
- **Create React App**: A tool for setting up React applications with a predefined configuration and build process.
51-
- **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.
52-
53-
### 9. Next.js vs. Blitz.js
54-
55-
- **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.
56-
- **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.
57-
58-
### 10. Next.js vs. Sapper
59-
60-
- **Sapper**: A framework for building web applications with Svelte that includes features like server-side rendering and routing.
61-
- **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.
62-
63-
### Conclusion
64-
65-
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.
7+
tags: [courses,beginner-level,FramWorks,Introduction]
8+
---
9+
10+
11+
| **Feature** | **React** | **Next.js** | **Angular** | **Vue/Nuxt.js** |
12+
|--------------------|---------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------|
13+
| **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 |
14+
| **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 |
15+
| **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 |
16+
| **Language** | JavaScript | JavaScript | TypeScript (default) | Vue: JavaScript<br />Nuxt.js: JavaScript |
17+
| **Server-Side Rendering (SSR)** | Requires additional setup | Built-in SSR | Possible, but not as straightforward | Built-in SSR with Nuxt.js |
18+
| **Static Site Generation (SSG)** | Requires additional setup | Built-in SSG | Possible, but not as straightforward | Built-in SSG with Nuxt.js |
19+
| **Routing** | Requires a library like React Router | File-based routing | Built-in | Vue: Requires Vue Router<br />Nuxt.js: File-based routing |
20+
| **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 |
21+
| **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 |
22+

‎courses/Next.Js/beginner-level/Introduction/introduction.md

+9-8
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
---
22
id: lesson-1
3-
title: Introduction to Next.js
3+
title: "Introduction to Next.js"
44
sidebar_label: Introduction
55
sidebar_position: 1
6-
description: Introduction to Next.js
7-
tags: [courses, beginner-level, FramWorks, Introduction]
8-
---
6+
description: "Introduction to Next.js"
7+
tags: [courses,beginner-level,FramWorks,Introduction]
8+
---
9+
910

10-
## What is Next.js?
11+
#### What is Next.js?
1112

1213
**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.
1314

1415
:::note
15-
16-
Next.js offers several key features that make it a popular choice for building React applications:
16+
#### Benefits
1717

1818
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.
1919

@@ -28,7 +28,8 @@ Next.js offers several key features that make it a popular choice for building R
2828
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.
2929

3030
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.
31-
:::
31+
:::
32+
3233

3334
## Why Learn Next.js?
3435

0 commit comments

Comments
 (0)