From 61330c4aa84d6a3b1b409d13d7ecc955c8a74cf3 Mon Sep 17 00:00:00 2001 From: Thomas Ebert Date: Sat, 6 Jun 2026 18:10:09 +0200 Subject: [PATCH 1/8] feat(react): Add content on how to get params and searchParams on Next.js page --- courses/frontend/react/week5/session-plan.md | 22 +++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/courses/frontend/react/week5/session-plan.md b/courses/frontend/react/week5/session-plan.md index 6521bfab..17d66cee 100644 --- a/courses/frontend/react/week5/session-plan.md +++ b/courses/frontend/react/week5/session-plan.md @@ -50,18 +50,18 @@ ### Next.js Router Hooks -#### Understanding the `useParams` Hook +#### Understanding the `useParams` Hook (client-only) - Explain the purpose of the `useParams` hook - Discuss how to use the `[]` bracket notation to mark params in a folder/filename - Demonstrate how to use `useParams` to access the params of the current path -#### Understanding the `useSearchParam` Hook +#### Understanding the `useSearchParam` Hook (client-only) - Explain the purpose of the `useSearchParams` hook - Demonstrate how to use `useSearchParams` to access the query strings -#### Working With the `useRouter` Hook +#### Working With the `useRouter` Hook (client-only) - Introduce the `` component for most links - Discuss the need for redirects in web applications (authentication, URL changes, etc.) @@ -69,6 +69,22 @@ - Explain how to access various router properties (push, replace, etc.) - Demonstrate programmatic navigation using `router.push` and `router.replace` +#### Working With `params` and `searchParams` in Server Components + +- Mention that the aforementioned hooks don't work in Server Components (Next.js pages) +- Explain that we can use the object Next.js passes to page functions to get `params` and `searchParams` on the server-side +- Demonstrate usage with a sample page function like this: + +```typescript jsx +// Url /{id}?query={query} +export default async function IdPage({ params, searchParams }) { + const id = (await params).id; + const query = (await searchParams).query; + + return

Hello, the id is {id} and query is {query}

+} +``` + ### Advanced: Server Functions & API Routes #### Server Functions From e9f544c6f0999bd9848b133eb6b58a273569743f Mon Sep 17 00:00:00 2001 From: Thomas Ebert Date: Sat, 6 Jun 2026 18:16:01 +0200 Subject: [PATCH 2/8] feat(react): Update exercise 2 to use dog.ceo API instead of NASA API Background: the NASA API got restructured and doesn't exist anymore in this form --- courses/frontend/react/week5/session-plan.md | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/courses/frontend/react/week5/session-plan.md b/courses/frontend/react/week5/session-plan.md index 17d66cee..797acb3f 100644 --- a/courses/frontend/react/week5/session-plan.md +++ b/courses/frontend/react/week5/session-plan.md @@ -142,18 +142,11 @@ export default async function IdPage({ params, searchParams }) { - Explore the folder structure created and research elements you don't understand - Run the app using `npm run dev` -### 2. Create a Page That Renders the NASA Astronomy Picture of the Day (With Caption) using Server Side Rendering +### 2. Create a Page That Renders a random dog image using Server Side Rendering -- Use the [NASA API](https://api.nasa.gov/#MarsPhotos) to fetch the Astronomy Picture of the Day data +- Use [the dog.ceo API](https://dog.ceo/dog-api/documentation/) to fetch a random image of a dog - Implement [data fetching](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching) to fetch the data during the render -- Render the fetched image and caption on the page - -### 3. Dynamic Rendering With `useEffect` - -#### Create a component that fetches NASA Mars Rover Photos from an API (with caption) - -- Use the [NASA API](https://api.nasa.gov/#MarsPhotos) to fetch Mars Rover photos -- Implement [client-side data fetching](https://nextjs.org/docs/pages/building-your-application/rendering/client-side-rendering) using the `useEffect` hook +- Render the fetched image on the page #### Use `useEffect` to Fetch Data on Component Mount From f125a5086828add631bd093d98ee560f592e2306 Mon Sep 17 00:00:00 2001 From: Thomas Ebert Date: Sat, 6 Jun 2026 18:16:58 +0200 Subject: [PATCH 3/8] fix(react): Remove exercise 3, since it uses `useEffect` to fetch data Reasoning: Trainees have already learned how to fetch data on a Next.js page. It is explicitly discouraged in the React Docs to fetch data using `useEffect`. That's why I suggest skipping this exercise. --- courses/frontend/react/week5/session-plan.md | 17 ++++------------- 1 file changed, 4 insertions(+), 13 deletions(-) diff --git a/courses/frontend/react/week5/session-plan.md b/courses/frontend/react/week5/session-plan.md index 797acb3f..d9b26784 100644 --- a/courses/frontend/react/week5/session-plan.md +++ b/courses/frontend/react/week5/session-plan.md @@ -148,22 +148,13 @@ export default async function IdPage({ params, searchParams }) { - Implement [data fetching](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching) to fetch the data during the render - Render the fetched image on the page -#### Use `useEffect` to Fetch Data on Component Mount - -- Fetch the data when the component mounts -- Handle component unmount and dependency updates - -#### Render Fetched Data in the Component - -- Display the fetched photos and captions in the component - -### 4. Routing and Navigation Exercise +### 3. Routing and Navigation Exercise #### Create a Blog Website With Dynamic Routes to Different Blog Posts - Create a route `/blogs` that displays blogs - Create a dynamic route for a blog post that displays the title from the route. For example, `/blogs/my-new-post` should dynamically display "My New Post". -- Hint: Check out the [documentation](https://nextjs.org/docs/app/api-reference/functions/use-params) for `useParams`. +- Hint: Check out the [documentation](https://nextjs.org/docs/app/api-reference/functions/use-params) for `useParams`, if you add `'use client'` to your page, otherwise check [this page to help you choose](https://nextjs.org/docs/app/getting-started/server-and-client-components#when-to-use-server-and-client-components.) #### Create a Page That Displays a NASA EPIC Image on a Different Date Depending on a Query String Parameter Received @@ -171,7 +162,7 @@ export default async function IdPage({ params, searchParams }) { - Access the query string parameter using `useSearchParams` - Fetch and display the EPIC image for the specified date -### 5. Client vs. Server Exercise +### 4. Client vs. Server Exercise - Create a component that renders 10 articles from a JSON array - You may use Generative AI to create **only** these articles, or use example text (search for "Lorem Ipsum generator") @@ -185,7 +176,7 @@ export default async function IdPage({ params, searchParams }) { - [Next.js Docs on Server and Client Components](https://nextjs.org/docs/app/getting-started/server-and-client-components) -### 6. Server Functions (or Server Actions) & API Routes Exercise +### 5. Server Functions (or Server Actions) & API Routes Exercise #### Server Functions (or Server Actions) From 7e7226a3ebe0bfca1fd49bb2eea0b6b92de14b09 Mon Sep 17 00:00:00 2001 From: Thomas Ebert Date: Sat, 6 Jun 2026 18:24:10 +0200 Subject: [PATCH 4/8] feat(react): Add a little extra exercise to try more data fetching --- courses/frontend/react/week5/session-plan.md | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/courses/frontend/react/week5/session-plan.md b/courses/frontend/react/week5/session-plan.md index d9b26784..6d46a257 100644 --- a/courses/frontend/react/week5/session-plan.md +++ b/courses/frontend/react/week5/session-plan.md @@ -148,7 +148,13 @@ export default async function IdPage({ params, searchParams }) { - Implement [data fetching](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching) to fetch the data during the render - Render the fetched image on the page -### 3. Routing and Navigation Exercise +### 3. Fetch placeholder blog posts from an API +- Follow the [“Fetching Data”/“with the fetch API” section in the Next.js docs](https://nextjs.org/docs/app/getting-started/fetching-data#with-the-fetch-api): +- Fetch the placeholder blog posts in a Server Component, using fetch, from https://jsonplaceholder.typicode.com/posts +- Show a list of all unique `userId`s in the JSON +- Show a count of the unique users + +### 4. Routing and Navigation Exercise #### Create a Blog Website With Dynamic Routes to Different Blog Posts @@ -162,7 +168,7 @@ export default async function IdPage({ params, searchParams }) { - Access the query string parameter using `useSearchParams` - Fetch and display the EPIC image for the specified date -### 4. Client vs. Server Exercise +### 5. Client vs. Server Exercise - Create a component that renders 10 articles from a JSON array - You may use Generative AI to create **only** these articles, or use example text (search for "Lorem Ipsum generator") @@ -176,7 +182,7 @@ export default async function IdPage({ params, searchParams }) { - [Next.js Docs on Server and Client Components](https://nextjs.org/docs/app/getting-started/server-and-client-components) -### 5. Server Functions (or Server Actions) & API Routes Exercise +### 6. Server Functions (or Server Actions) & API Routes Exercise #### Server Functions (or Server Actions) From 69c2a4e80056c7769f235f87b54b7df8fba83b24 Mon Sep 17 00:00:00 2001 From: Thomas Ebert Date: Sat, 6 Jun 2026 18:25:09 +0200 Subject: [PATCH 5/8] feat(react): Place "client vs. server" exercise before routing exercise --- courses/frontend/react/week5/session-plan.md | 31 ++++++++++---------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/courses/frontend/react/week5/session-plan.md b/courses/frontend/react/week5/session-plan.md index 6d46a257..a1881bd7 100644 --- a/courses/frontend/react/week5/session-plan.md +++ b/courses/frontend/react/week5/session-plan.md @@ -149,26 +149,13 @@ export default async function IdPage({ params, searchParams }) { - Render the fetched image on the page ### 3. Fetch placeholder blog posts from an API + - Follow the [“Fetching Data”/“with the fetch API” section in the Next.js docs](https://nextjs.org/docs/app/getting-started/fetching-data#with-the-fetch-api): - Fetch the placeholder blog posts in a Server Component, using fetch, from https://jsonplaceholder.typicode.com/posts - Show a list of all unique `userId`s in the JSON - Show a count of the unique users -### 4. Routing and Navigation Exercise - -#### Create a Blog Website With Dynamic Routes to Different Blog Posts - -- Create a route `/blogs` that displays blogs -- Create a dynamic route for a blog post that displays the title from the route. For example, `/blogs/my-new-post` should dynamically display "My New Post". -- Hint: Check out the [documentation](https://nextjs.org/docs/app/api-reference/functions/use-params) for `useParams`, if you add `'use client'` to your page, otherwise check [this page to help you choose](https://nextjs.org/docs/app/getting-started/server-and-client-components#when-to-use-server-and-client-components.) - -#### Create a Page That Displays a NASA EPIC Image on a Different Date Depending on a Query String Parameter Received - -- Use the [NASA API](https://api.nasa.gov/#EPIC) to fetch EPIC images -- Access the query string parameter using `useSearchParams` -- Fetch and display the EPIC image for the specified date - -### 5. Client vs. Server Exercise +### 4. Client vs. Server Exercise - Create a component that renders 10 articles from a JSON array - You may use Generative AI to create **only** these articles, or use example text (search for "Lorem Ipsum generator") @@ -182,6 +169,20 @@ export default async function IdPage({ params, searchParams }) { - [Next.js Docs on Server and Client Components](https://nextjs.org/docs/app/getting-started/server-and-client-components) +### 5. Routing and Navigation Exercise + +#### Create a Blog Website With Dynamic Routes to Different Blog Posts + +- Create a route `/blogs` that displays blogs +- Create a dynamic route for a blog post that displays the title from the route. For example, `/blogs/my-new-post` should dynamically display "My New Post". +- Hint: Check out the [documentation](https://nextjs.org/docs/app/api-reference/functions/use-params) for `useParams`, if you add `'use client'` to your page, otherwise check [this page to help you choose](https://nextjs.org/docs/app/getting-started/server-and-client-components#when-to-use-server-and-client-components.) + +#### Create a Page That Displays a NASA EPIC Image on a Different Date Depending on a Query String Parameter Received + +- Use the [NASA API](https://api.nasa.gov/#EPIC) to fetch EPIC images +- Access the query string parameter using `useSearchParams` +- Fetch and display the EPIC image for the specified date + ### 6. Server Functions (or Server Actions) & API Routes Exercise #### Server Functions (or Server Actions) From 48bb8468cb256673d7fc7636c024e46a206a153c Mon Sep 17 00:00:00 2001 From: Thomas Ebert Date: Sat, 6 Jun 2026 18:28:09 +0200 Subject: [PATCH 6/8] feat(react): It seems unnecessary to use wasteful Gen AI here --- courses/frontend/react/week5/session-plan.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/courses/frontend/react/week5/session-plan.md b/courses/frontend/react/week5/session-plan.md index a1881bd7..193d93f9 100644 --- a/courses/frontend/react/week5/session-plan.md +++ b/courses/frontend/react/week5/session-plan.md @@ -158,7 +158,7 @@ export default async function IdPage({ params, searchParams }) { ### 4. Client vs. Server Exercise - Create a component that renders 10 articles from a JSON array -- You may use Generative AI to create **only** these articles, or use example text (search for "Lorem Ipsum generator") +- Download the current JSON from the Vercel blog API (https://api.vercel.app/blog) – **Attention: Rate limits apply. It's best if one person fetches the JSON and posts it in the team's Slack channel** - Create a page that renders the 10 articles on the server - Create a page that renders the 10 articles on the client - Use your browser's performance panel to measure the performance of both versions From 26ec4140a94b5f3be192505f06e4cbf2d82a619a Mon Sep 17 00:00:00 2001 From: Thomas Ebert Date: Sat, 6 Jun 2026 18:31:55 +0200 Subject: [PATCH 7/8] fix(react): Replace NASA API with dog.ceo API in exercise 5 Background: Background: the NASA API got restructured and doesn't exist anymore in this form --- courses/frontend/react/week5/session-plan.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/courses/frontend/react/week5/session-plan.md b/courses/frontend/react/week5/session-plan.md index 193d93f9..05c0295e 100644 --- a/courses/frontend/react/week5/session-plan.md +++ b/courses/frontend/react/week5/session-plan.md @@ -177,11 +177,11 @@ export default async function IdPage({ params, searchParams }) { - Create a dynamic route for a blog post that displays the title from the route. For example, `/blogs/my-new-post` should dynamically display "My New Post". - Hint: Check out the [documentation](https://nextjs.org/docs/app/api-reference/functions/use-params) for `useParams`, if you add `'use client'` to your page, otherwise check [this page to help you choose](https://nextjs.org/docs/app/getting-started/server-and-client-components#when-to-use-server-and-client-components.) -#### Create a Page That Displays a NASA EPIC Image on a Different Date Depending on a Query String Parameter Received +#### Create a page that displays an image of a dog of a specific breed depending on a query string parameter received -- Use the [NASA API](https://api.nasa.gov/#EPIC) to fetch EPIC images -- Access the query string parameter using `useSearchParams` -- Fetch and display the EPIC image for the specified date +- Use [the dog.ceo API](https://dog.ceo/dog-api/documentation/) to display an image of a dog of a specific breed +- Get the breed from the query string, in a URL like this: `http://localhost:4000?breed=elkhound` +- Fetch and display the image for the specified breed ### 6. Server Functions (or Server Actions) & API Routes Exercise From 2154ae4d02378567bbe40bf248e5372c0df961c7 Mon Sep 17 00:00:00 2001 From: Thomas Ebert Date: Sat, 6 Jun 2026 18:40:19 +0200 Subject: [PATCH 8/8] fix: Linting --- courses/frontend/react/week5/session-plan.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/courses/frontend/react/week5/session-plan.md b/courses/frontend/react/week5/session-plan.md index 05c0295e..dff0f9b8 100644 --- a/courses/frontend/react/week5/session-plan.md +++ b/courses/frontend/react/week5/session-plan.md @@ -151,14 +151,14 @@ export default async function IdPage({ params, searchParams }) { ### 3. Fetch placeholder blog posts from an API - Follow the [“Fetching Data”/“with the fetch API” section in the Next.js docs](https://nextjs.org/docs/app/getting-started/fetching-data#with-the-fetch-api): -- Fetch the placeholder blog posts in a Server Component, using fetch, from https://jsonplaceholder.typicode.com/posts +- Fetch the placeholder blog posts in a Server Component, using fetch, from [JSON Placeholder API](https://jsonplaceholder.typicode.com/posts) - Show a list of all unique `userId`s in the JSON - Show a count of the unique users ### 4. Client vs. Server Exercise - Create a component that renders 10 articles from a JSON array -- Download the current JSON from the Vercel blog API (https://api.vercel.app/blog) – **Attention: Rate limits apply. It's best if one person fetches the JSON and posts it in the team's Slack channel** +- Download the current JSON from [the Vercel blog API](https://api.vercel.app/blog) – **Attention: Rate limits apply. It's best if one person fetches the JSON and posts it in the team's Slack channel** - Create a page that renders the 10 articles on the server - Create a page that renders the 10 articles on the client - Use your browser's performance panel to measure the performance of both versions