update 06-client-side-rendering

nasdan · nasdan · commit 01dc431a17bb · 2025-12-13T17:43:29.000+01:00
diff --git a/04-frameworks/08-nextjs/03-boilerplate/src/app/cars/layout.tsx b/04-frameworks/08-nextjs/03-boilerplate/src/app/cars/layout.tsx
@@ -22,7 +22,7 @@ const CarsLayout = (props: Props) => {
         </Link>
         <h1 className={classes.title}>Rent a car</h1>
       </nav>
-      <main className={classes.content}>{children}</main>
+      <div className={classes.content}>{children}</div>
     </>
   );
 };
diff --git a/04-frameworks/08-nextjs/04-static-site-generation/src/app/cars/layout.tsx b/04-frameworks/08-nextjs/04-static-site-generation/src/app/cars/layout.tsx
@@ -17,7 +17,7 @@ const CarsLayout = (props: Props) => {
         </Link>
         <h1 className={classes.title}>Rent a car</h1>
       </nav>
-      <main className={classes.content}>{children}</main>
+      <div className={classes.content}>{children}</div>
     </>
   );
 };
diff --git a/04-frameworks/08-nextjs/05-server-side-rendering/README.md b/04-frameworks/08-nextjs/05-server-side-rendering/README.md
@@ -138,12 +138,14 @@ export default CarPage;
 ```
 
 > All options will re-render the component on each refresh (F5)
-
+>
 > `cache: 'force-cache'`: will fetch data only once.
-
+>
 > `cache: 'no-store'`: will fetch data on each refresh (F5).
-
+>
 > `next: { revalidate: 10 },`: will fetch data on each refresh (F5) after revalidate seconds.
+>
+> An advanced option is to use [Cache Components or also named Partial Prerendering](https://nextjs.org/docs/app/getting-started/cache-components)
 
 # About Basefactor + Lemoncode
 
diff --git a/04-frameworks/08-nextjs/05-server-side-rendering/src/app/cars/layout.tsx b/04-frameworks/08-nextjs/05-server-side-rendering/src/app/cars/layout.tsx
@@ -17,7 +17,7 @@ const CarsLayout = (props: Props) => {
         </Link>
         <h1 className={classes.title}>Rent a car</h1>
       </nav>
-      <main className={classes.content}>{children}</main>
+      <div className={classes.content}>{children}</div>
     </>
   );
 };
diff --git a/04-frameworks/08-nextjs/06-client-side-rendering/README.md b/04-frameworks/08-nextjs/06-client-side-rendering/README.md
@@ -30,7 +30,7 @@ _./src/pods/car/api/car.api.ts_
 
 export const bookCar = async (car: Car): Promise<boolean> => {
   await fetch(`${url}/${car.id}`, {
-    method: 'PUT',
+    method: 'PATCH',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(car),
   });
@@ -88,7 +88,7 @@ IMAGES_DOMAIN=localhost
 _./src/core/constants/env.constants.ts_
 
 ```diff
-export const envConstants = {
+export const ENV = {
 - BASE_API_URL: process.env.BASE_API_URL,
 + BASE_API_URL: process.env.NEXT_PUBLIC_BASE_API_URL,
   BASE_PICTURES_URL: process.env.BASE_PICTURES_URL,
@@ -132,7 +132,7 @@ import { Inter } from 'next/font/google';
 +       theme.primary === lightTheme.primary ? darkTheme : lightTheme;
 +     setTheme(newTheme);
 +   };
-+ 
++
 +   return (
 +     <ThemeContext.Provider value={{ theme, onToggleThemeMode }}>
 +       {children}
@@ -154,8 +154,9 @@ const RootLayout = (props: Props) => {
   return (
     <html lang="en" className={inter.className}>
       <body>
--       {children}
-+       <ThemeProvider>{children}</ThemeProvider>
++       <ThemeProvider>
+          <main>{children}</main>
++       </ThemeProvider>
       </body>
     </html>
   );
@@ -169,7 +170,7 @@ It throws the error: `TypeError: createContext only works in Client Components.
 
 _./src/core/theme.context.tsx_
 
-```jsx
+```tsx
 'use client';
 import React from 'react';
 
@@ -206,10 +207,9 @@ export const ThemeProvider = ({ children }) => {
     </ThemeContext.Provider>
   );
 };
-
 ```
 
-> You cannot use a ServerComponent inside Client Component but [you can pass a Server Component as prop](https://nextjs.org/docs/getting-started/react-essentials#nesting-server-components-inside-client-components).
+You cannot use a ServerComponent inside Client Component but you can pass a Server Component as prop:
 
 _./src/app/layout.tsx_
 
@@ -238,7 +238,7 @@ import { Inter } from 'next/font/google';
 -       theme.primary === lightTheme.primary ? darkTheme : lightTheme;
 -     setTheme(newTheme);
 -   };
-- 
+-
 -   return (
 -     <ThemeContext.Provider value={{ theme, onToggleThemeMode }}>
 -       {children}
@@ -261,7 +261,7 @@ Using theme:
 
 _./src/pods/car-list/components/nav.component.tsx_
 
-```jsx
+```tsx
 'use client';
 import { ThemeContext } from '#core/theme.context';
 import React from 'react';
@@ -286,13 +286,12 @@ export const Nav: React.FC<Props> = (props) => {
     </nav>
   );
 };
-
 ```
 
 _./src/pods/car-list/components/index.ts_
 
 ```diff
-export * from './car-list.component';
+export * from './car-item.component';
 + export * from './nav.component';
 
 ```
diff --git a/04-frameworks/08-nextjs/06-client-side-rendering/next-env.d.ts b/04-frameworks/08-nextjs/06-client-side-rendering/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/04-frameworks/08-nextjs/06-client-side-rendering/next.config.js b/04-frameworks/08-nextjs/06-client-side-rendering/next.config.js
diff --git a/04-frameworks/08-nextjs/06-client-side-rendering/next.config.ts b/04-frameworks/08-nextjs/06-client-side-rendering/next.config.ts
@@ -0,0 +1,14 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  images: {
+    dangerouslyAllowLocalIP: true, // only for local development
+    remotePatterns: [
+      {
+        hostname: process.env.IMAGES_DOMAIN,
+      },
+    ],
+  },
+};
+
+export default nextConfig;
diff --git a/04-frameworks/08-nextjs/06-client-side-rendering/package.json b/04-frameworks/08-nextjs/06-client-side-rendering/package.json
@@ -1,7 +1,11 @@
 {
-  "name": "07-nextjs-examples",
+  "name": "nextjs-examples",
   "version": "1.0.0",
   "description": "Nextjs examples",
+  "type": "module",
+  "imports": {
+    "#*": "./src/*"
+  },
   "scripts": {
     "start": "run-p -l start:dev start:api-server",
     "start:dev": "next dev",
@@ -10,24 +14,21 @@
     "start:api-server": "cd api-server && npm run mock-server",
     "postinstall": "cd ./api-server && npm install"
   },
-  "imports": {
-    "#*": "./src/*"
-  },
   "author": "Lemoncode",
   "license": "MIT",
   "dependencies": {
-    "next": "^15.1.6",
+    "next": "^16.0.10",
     "normalize.css": "^8.0.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "sharp": "^0.33.5"
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "sharp": "^0.34.5"
   },
   "devDependencies": {
-    "@types/node": "22.13.1",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
+    "@types/node": "25.0.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "npm-run-all": "^4.1.5",
-    "rimraf": "^6.0.1",
-    "typescript": "^5.7.3"
+    "rimraf": "^6.1.2",
+    "typescript": "^5.9.3"
   }
 }
diff --git a/04-frameworks/08-nextjs/06-client-side-rendering/src/app/cars/[carId]/page.tsx b/04-frameworks/08-nextjs/06-client-side-rendering/src/app/cars/[carId]/page.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-import { Metadata } from 'next';
 import { Car, api, mapCarFromApiToVm } from '#pods/car';
+import { Metadata } from 'next';
 
 interface Props {
   params: Promise<{ carId: string }>;
diff --git a/04-frameworks/08-nextjs/06-client-side-rendering/src/app/cars/layout.tsx b/04-frameworks/08-nextjs/06-client-side-rendering/src/app/cars/layout.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import Link from 'next/link';
 import Image from 'next/image';
+import Link from 'next/link';
+import React from 'react';
 import { Nav } from '#pods/car-list';
 import classes from './layout.module.css';
 
@@ -18,7 +18,7 @@ const CarsLayout = (props: Props) => {
         </Link>
         <h1 className={classes.title}>Rent a car</h1>
       </Nav>
-      <main className={classes.content}>{children}</main>
+      <div className={classes.content}>{children}</div>
     </>
   );
 };
diff --git a/04-frameworks/08-nextjs/06-client-side-rendering/src/app/cars/page.tsx b/04-frameworks/08-nextjs/06-client-side-rendering/src/app/cars/page.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-import { Metadata } from 'next';
 import { CarList, api, mapCarListFromApiToVm } from '#pods/car-list';
+import { Metadata } from 'next';
 
 export const metadata: Metadata = {
   title: 'Rent a car - Car list',
diff --git a/04-frameworks/08-nextjs/06-client-side-rendering/src/app/layout.tsx b/04-frameworks/08-nextjs/06-client-side-rendering/src/app/layout.tsx
@@ -1,8 +1,8 @@
+import { ThemeProvider } from '#core/theme.context';
+import { Inter } from 'next/font/google';
 import 'normalize.css';
-import './material-icons.css';
 import React from 'react';
-import { Inter } from 'next/font/google';
-import { ThemeProvider } from '#core/theme.context';
+import './material-icons.css';
 
 const inter = Inter({
   subsets: ['latin'],
@@ -18,7 +18,9 @@ const RootLayout = (props: Props) => {
   return (
     <html lang="en" className={inter.className}>
       <body>
-        <ThemeProvider>{children}</ThemeProvider>
+        <ThemeProvider>
+          <main>{children}</main>
+        </ThemeProvider>
       </body>
     </html>
   );
diff --git a/04-frameworks/08-nextjs/06-client-side-rendering/src/app/page.tsx b/04-frameworks/08-nextjs/06-client-side-rendering/src/app/page.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-import Link from 'next/link';
 import { Metadata } from 'next';
+import Link from 'next/link';
 
 export const metadata: Metadata = {
   title: 'Rent a car - Home',
diff --git a/04-frameworks/08-nextjs/06-client-side-rendering/src/core/constants/env.constants.ts b/04-frameworks/08-nextjs/06-client-side-rendering/src/core/constants/env.constants.ts
@@ -1,4 +1,4 @@
-export const envConstants = {
+export const ENV = {
   BASE_API_URL: process.env.NEXT_PUBLIC_BASE_API_URL,
   BASE_PICTURES_URL: process.env.BASE_PICTURES_URL,
 };
diff --git a/04-frameworks/08-nextjs/06-client-side-rendering/src/pods/car-list/api/car-list.api.ts b/04-frameworks/08-nextjs/06-client-side-rendering/src/pods/car-list/api/car-list.api.ts
@@ -1,7 +1,7 @@
-import { envConstants } from '#core/constants';
+import { ENV } from '#core/constants';
 import { Car } from './car-list.api-model';
 
-const url = `${envConstants.BASE_API_URL}/cars`;
+const url = `${ENV.BASE_API_URL}/cars`;
 
 export const getCarList = async (options?: RequestInit): Promise<Car[]> => {
   return await fetch(url, options).then((response) => response.json());
diff --git a/04-frameworks/08-nextjs/06-client-side-rendering/src/pods/car-list/car-list.component.tsx b/04-frameworks/08-nextjs/06-client-side-rendering/src/pods/car-list/car-list.component.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
+import classes from './car-list.module.css';
 import { Car } from './car-list.vm';
 import { CarItem } from './components';
-import classes from './car-list.module.css';
 
 interface Props {
   carList: Car[];
diff --git a/04-frameworks/08-nextjs/06-client-side-rendering/src/pods/car-list/car-list.mappers.ts b/04-frameworks/08-nextjs/06-client-side-rendering/src/pods/car-list/car-list.mappers.ts
@@ -1,5 +1,5 @@
 import { mapToCollection } from '#common/mappers';
-import { envConstants } from '#core/constants';
+import { ENV } from '#core/constants';
 import * as apiModel from './api';
 import * as viewModel from './car-list.vm';
 
@@ -10,6 +10,6 @@ export const mapCarListFromApiToVm = (
 const mapCarFromApiToVm = (car: apiModel.Car): viewModel.Car => ({
   id: car.id,
   name: car.name,
-  imageUrl: `${envConstants.BASE_PICTURES_URL}${car.imageUrl}`,
+  imageUrl: `${ENV.BASE_PICTURES_URL}${car.imageUrl}`,
   isBooked: car.isBooked,
 });
diff --git a/04-frameworks/08-nextjs/06-client-side-rendering/src/pods/car-list/components/car-item.component.tsx b/04-frameworks/08-nextjs/06-client-side-rendering/src/pods/car-list/components/car-item.component.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import Link from 'next/link';
 import { routeConstants } from '#core/constants';
+import Link from 'next/link';
+import React from 'react';
 import { Car } from '../car-list.vm';
 import classes from './car-item.module.css';
 
@@ -25,7 +25,7 @@ export const CarItem: React.FC<Props> = (props) => {
         )}
         <span>{car.name}</span>
       </h2>
-      <img src={car.imageUrl} alt={car.name} />
+      <img className={classes.image} src={car.imageUrl} alt={car.name} />
     </Link>
   );
 };
diff --git a/04-frameworks/08-nextjs/06-client-side-rendering/src/pods/car-list/components/car-item.module.css b/04-frameworks/08-nextjs/06-client-side-rendering/src/pods/car-list/components/car-item.module.css
@@ -1,6 +1,4 @@
 .root {
-  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
-    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
   text-decoration: none;
 }
 
@@ -15,3 +13,8 @@
   letter-spacing: 0.01071em;
   color: black;
 }
+
+.image {
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+}
diff --git a/04-frameworks/08-nextjs/06-client-side-rendering/src/pods/car/api/car.api.ts b/04-frameworks/08-nextjs/06-client-side-rendering/src/pods/car/api/car.api.ts
@@ -1,7 +1,7 @@
-import { envConstants } from '#core/constants';
+import { ENV } from '#core/constants';
 import { Car } from './car.api-model';
 
-const url = `${envConstants.BASE_API_URL}/cars`;
+const url = `${ENV.BASE_API_URL}/cars`;
 
 export const getCar = async (
   id: string,
diff --git a/04-frameworks/08-nextjs/06-client-side-rendering/src/pods/car/car.mappers.ts b/04-frameworks/08-nextjs/06-client-side-rendering/src/pods/car/car.mappers.ts
@@ -1,4 +1,4 @@
-import { envConstants } from '#core/constants';
+import { ENV } from '#core/constants';
 import * as apiModel from './api';
 import * as viewModel from './car.vm';
 
@@ -7,7 +7,7 @@ export const mapCarFromApiToVm = (car: apiModel.Car): viewModel.Car =>
     ? {
         id: car.id,
         name: car.name,
-        imageUrl: `${envConstants.BASE_PICTURES_URL}${car.imageUrl}`,
+        imageUrl: `${ENV.BASE_PICTURES_URL}${car.imageUrl}`,
         features: car.features,
         isBooked: car.isBooked,
       }
@@ -16,7 +16,7 @@ export const mapCarFromApiToVm = (car: apiModel.Car): viewModel.Car =>
 export const mapCarFromVmToApi = (car: viewModel.Car): apiModel.Car => ({
   id: car.id,
   name: car.name,
-  imageUrl: car.imageUrl.split(envConstants.BASE_PICTURES_URL)[1],
+  imageUrl: car.imageUrl.split(ENV.BASE_PICTURES_URL)[1],
   features: car.features,
   isBooked: car.isBooked,
 });
diff --git a/04-frameworks/08-nextjs/06-client-side-rendering/tsconfig.json b/04-frameworks/08-nextjs/06-client-side-rendering/tsconfig.json
