Skip to content

Commit 87d06a9

Browse files
JuliankserJuliankser
committed
edited assignemnts
1 parent 3d5668b commit 87d06a9

File tree

4 files changed

+181
-279
lines changed

4 files changed

+181
-279
lines changed

‎Documentation/Assignments/Assignment-1.md‎

Lines changed: 42 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,26 @@
1-
## **Assignment 1: Basic Routing and Components**
1+
# **Assignment 1: Basic Routing and Components**
22

3-
### Learning Objectives
3+
## **Learning Objectives**
44
- Learn how to create routes using the file system.
55
- Build basic pages with React components.
66
- Use `Link` for navigation.
77
- Style components with Tailwind CSS.
88

99
---
1010

11-
### **Step-by-Step Guide**
11+
## **Step-by-Step Guide**
1212

13-
#### **1. File-Based Routing**
14-
In Next.js 13+ (App Router), file structure defines routes:
13+
### **1. File-Based Routing**
14+
Next.js uses the file system to define routes. For example:
1515
- `/app/page.tsx` → `/`
1616
- `/app/about/page.tsx` → `/about`
17-
- `/app/products/[id]/page.tsx` → `/products/:id`
1817

19-
#### **2. Create a Home Page**
20-
- In `src/app/page.tsx`, create a basic component that welcomes users.
21-
- **Hint**: Use a `<h1>` element and style it with Tailwind CSS.
18+
---
19+
20+
### **2. Create a Home Page**
21+
- Add a `src/app/page.tsx` file.
22+
- Create a basic component that welcomes users.
23+
- Style the page with Tailwind CSS.
2224

2325
##### Example (not complete):
2426
```tsx
@@ -27,26 +29,26 @@ export default function HomePage() {
2729
return (
2830
<div className="p-4">
2931
<h1 className="text-4xl font-bold">Welcome!</h1>
30-
{/* Add a brief welcome message */}
32+
{/* Add more content here */}
3133
</div>
3234
);
3335
}
3436
```
3537

3638
---
3739

38-
#### **3. Create an About Page**
40+
### **3. Create an About Page**
3941
- Add a file: `src/app/about/page.tsx`.
40-
- Add a `<h1>` and a short description.
41-
- **Hint**: Use Tailwind's `text-gray-700` for text styling.
42+
- Include a `<h1>` and a short description.
43+
- Use Tailwind CSS for styling.
4244

4345
---
4446

45-
#### **4. Navigation with the Link Component**
47+
### **4. Navigation with the Link Component**
4648
- Create a `Navbar` component in `src/components/Navbar.tsx`.
47-
- Use `Link` from `next/link` to navigate between `/` and `/about`.
49+
- Use `Link` from `next/link` to navigate between Home and About pages.
4850

49-
##### Code Hint:
51+
##### Example (not complete):
5052
```tsx
5153
// src/components/Navbar.tsx
5254
import Link from 'next/link';
@@ -55,56 +57,47 @@ export default function Navbar() {
5557
return (
5658
<nav>
5759
<ul className="flex gap-4">
58-
{/* Add links to Home and About */}
60+
<li>
61+
<Link href="/">Home</Link>
62+
</li>
63+
<li>
64+
<Link href="/about">About</Link>
65+
</li>
5966
</ul>
6067
</nav>
6168
);
6269
}
6370
```
6471

65-
- **Bonus Hint**: Pass `className` to `Link` for Tailwind styling.
66-
6772
---
6873

69-
#### **5. Add Navbar to Layout**
70-
- Update `src/app/layout.tsx` to include your `Navbar`.
74+
### **5. Add Navbar to Layout**
75+
- Update `src/app/layout.tsx` to include your `Navbar` at the top of every page.
7176

72-
##### Code Hint:
73-
```tsx
74-
// src/app/layout.tsx
75-
import Navbar from '../components/Navbar';
76-
77-
export default function RootLayout({ children }: { children: React.ReactNode }) {
78-
return (
79-
<html lang="en">
80-
<body>
81-
<Navbar />
82-
{/* Render page content */}
83-
</body>
84-
</html>
85-
);
86-
}
87-
```
77+
##### Hint:
78+
Wrap the `Navbar` around `{children}` in the layout.
8879

8980
---
9081

91-
### **Hints and Resources**
92-
93-
#### Common Challenges
82+
## **Hints and Resources**
83+
### Common Challenges
9484
- **Routes Not Working?**: Double-check file structure.
95-
- **Tailwind Not Applying?**: Restart the dev server.
96-
- **Broken Links?**: Ensure paths in `<Link>` match your routes.
85+
- **Tailwind Not Applying?**: Restart the dev server and ensure Tailwind is installed.
9786

98-
#### Resources
87+
### Resources
9988
- [Next.js Routing Documentation](https://nextjs.org/docs/app/building-your-application/routing)
10089
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
10190

10291
---
10392

104-
### **Assignment Checklist**
105-
- [ ] Create a Home Page (`/`)
106-
- [ ] Add an About Page (`/about`)
107-
- [ ] Implement navigation with `Link`.
108-
- [ ] Add a `Navbar` component to the layout.
109-
- [ ] Apply basic Tailwind styling.
93+
## **Checklist**
94+
- [ ] Create a Home Page (`/`).
95+
- [ ] Add an About Page (`/about`).
96+
- [ ] Implement navigation using `Link`.
97+
- [ ] Add a `Navbar` component.
98+
- [ ] Style the pages using Tailwind CSS.
99+
100+
---
101+
102+
[Main README](../../README.md) | [Next Assignment →](Assignment-2.md)
110103

‎Documentation/Assignments/Assignment-2.md‎

Lines changed: 38 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,122 +1,75 @@
1-
# **Assignment 2: Server-Side Rendering and Data Fetching**
1+
# **Assignment 2: Server-Side Rendering (SSR) and Data Fetching**
22

33
## **Learning Objectives**
4-
1. Understand Server-Side Rendering (SSR) and Static Site Generation (SSG).
5-
2. Learn how to fetch and display data using Next.js functions.
6-
3. Implement Incremental Static Regeneration (ISR) for dynamic updates.
4+
- Understand SSR in Next.js.
5+
- Learn how to fetch data during server-side rendering.
6+
- Display fetched data on a page.
77

88
---
99

1010
## **Step-by-Step Guide**
1111

12-
### **1. Server-Side Rendering (SSR)**
13-
SSR allows you to fetch data on the server for every request.
14-
15-
#### **Task: Create a Users Page**
16-
- Add a file: `src/app/users/page.tsx`.
17-
- Use the `getServerSideProps` function to fetch user data.
18-
- Display the fetched data in a list format.
19-
20-
##### Code Hint:
21-
```tsx
22-
// src/app/users/page.tsx
23-
export default async function UsersPage() {
24-
// Fetch data from an API
25-
const res = await fetch('https://jsonplaceholder.typicode.com/users');
26-
const users = await res.json();
27-
28-
return (
29-
<div className="p-4">
30-
<h1 className="text-2xl font-bold">Users</h1>
31-
<ul className="mt-4">
32-
{/* Render user data */}
33-
</ul>
34-
</div>
35-
);
36-
}
37-
```
38-
- **Hint**: Use `map()` to display user names.
12+
### **1. What is SSR?**
13+
Server-Side Rendering (SSR) means generating the HTML for a page on the server at request time. In Next.js, you achieve this using the `getServerSideProps` function.
3914

4015
---
4116

42-
### **2. Static Site Generation (SSG)**
43-
SSG generates static HTML at build time, ideal for data that doesn’t change frequently.
17+
### **2. Create a Page with SSR**
18+
- Add a new route: `src/app/ssr-example/page.tsx`.
19+
- Fetch data using `getServerSideProps`.
4420

45-
#### **Task: Create a Blog Page**
46-
- Add a file: `src/app/blog/page.tsx`.
47-
- Use `getStaticProps` to fetch blog post data.
48-
- Display the blog titles in a list.
49-
50-
##### Code Hint:
21+
##### Example (not complete):
5122
```tsx
52-
// src/app/blog/page.tsx
53-
export default async function BlogPage() {
54-
// Fetch blog posts
55-
const res = await fetch('https://jsonplaceholder.typicode.com/posts');
56-
const posts = await res.json();
23+
// src/app/ssr-example/page.tsx
24+
export default async function SSRPage() {
25+
const data = await fetch('https://jsonplaceholder.typicode.com/posts/1').then(res => res.json());
5726

5827
return (
5928
<div className="p-4">
60-
<h1 className="text-2xl font-bold">Blog Posts</h1>
61-
<ul className="mt-4">
62-
{/* Render blog posts */}
63-
</ul>
29+
<h1 className="text-2xl font-bold">Server-Side Rendered Data</h1>
30+
{/* Display fetched data here */}
6431
</div>
6532
);
6633
}
6734
```
6835

6936
---
7037

71-
### **3. Incremental Static Regeneration (ISR)**
72-
ISR allows you to update static pages at runtime without rebuilding the entire app.
73-
74-
#### **Task: Enable ISR**
75-
- In your blog page, set a `revalidate` property for ISR.
76-
77-
##### Code Hint:
78-
```tsx
79-
// src/app/blog/page.tsx
80-
export async function generateStaticParams() {
81-
return { revalidate: 60 }; // Revalidate every 60 seconds
82-
}
83-
```
38+
### **3. Customize the Page**
39+
- Fetch and display additional data.
40+
- Style the page with Tailwind CSS.
41+
- Display a loading indicator or placeholder for better user experience.
8442

8543
---
8644

87-
### **4. Error Handling**
88-
- Handle errors in both `getServerSideProps` and `getStaticProps`.
89-
- **Hint**: Wrap your `fetch` call in `try-catch`.
45+
### **4. Add a Link in the Navbar**
46+
- Update the `Navbar` component to include a link to the SSR example.
9047

91-
##### Example Error Handling:
48+
##### Example:
9249
```tsx
93-
try {
94-
const res = await fetch('https://jsonplaceholder.typicode.com/users');
95-
if (!res.ok) throw new Error('Failed to fetch data');
96-
} catch (error) {
97-
console.error(error);
98-
}
50+
<li>
51+
<Link href="/ssr-example">SSR Example</Link>
52+
</li>
9953
```
10054

10155
---
10256

10357
## **Hints and Resources**
58+
### Common Challenges
59+
- **Data Not Displaying?**: Check the API URL and console for errors.
60+
- **Styling Issues?**: Ensure Tailwind CSS classes are applied correctly.
10461

105-
### Common Beginner Challenges
106-
- **Data Not Displaying?**: Confirm the API endpoint is correct.
107-
- **Slow Fetching?**: Check network logs for errors.
108-
- **Empty Page?**: Ensure the fetch response is parsed using `.json()`.
62+
### Resources
63+
- [Next.js SSR Documentation](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props)
64+
- [JSONPlaceholder API](https://jsonplaceholder.typicode.com/)
65+
66+
---
10967

110-
### Helpful Resources
111-
- [Next.js Data Fetching Documentation](https://nextjs.org/docs/data-fetching)
112-
- [JSONPlaceholder Mock API](https://jsonplaceholder.typicode.com/)
113-
- [Understanding SSR and SSG](https://nextjs.org/docs/basic-features/pages)
68+
## **Checklist**
69+
- [ ] Create an SSR page that fetches data.
70+
- [ ] Display fetched data on the page.
71+
- [ ] Add a link to the SSR page in the `Navbar`.
11472

11573
---
11674

117-
## **Assignment Checklist**
118-
- [ ] Create a Users Page with SSR.
119-
- [ ] Create a Blog Page with SSG.
120-
- [ ] Enable ISR for the Blog Page.
121-
- [ ] Handle errors during data fetching.
122-
- [ ] Verify that the data updates dynamically (for ISR).
75+
[← Previous Assignment](Assignment-1.md) | [Main README](../../README.md) | [Next Assignment →](Assignment-3.md)

0 commit comments

Comments
 (0)