update 05-server-side-rendering

nasdan · nasdan · commit 7c0891c62195 · 2025-12-13T16:50:15.000+01:00
diff --git a/04-frameworks/08-nextjs/05-server-side-rendering/README.md b/04-frameworks/08-nextjs/05-server-side-rendering/README.md
@@ -141,9 +141,9 @@ export default CarPage;
 
 > `cache: 'force-cache'`: will fetch data only once.
 
->`cache: 'no-store'`: will fetch data on each refresh (F5).
+> `cache: 'no-store'`: will fetch data on each refresh (F5).
 
->`next: { revalidate: 10 },`: will fetch data on each refresh (F5) after revalidate seconds.
+> `next: { revalidate: 10 },`: will fetch data on each refresh (F5) after revalidate seconds.
 
 # About Basefactor + Lemoncode
 
diff --git a/04-frameworks/08-nextjs/05-server-side-rendering/next-env.d.ts b/04-frameworks/08-nextjs/05-server-side-rendering/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/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/05-server-side-rendering/next.config.js b/04-frameworks/08-nextjs/05-server-side-rendering/next.config.js
diff --git a/04-frameworks/08-nextjs/05-server-side-rendering/next.config.ts b/04-frameworks/08-nextjs/05-server-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/05-server-side-rendering/package.json b/04-frameworks/08-nextjs/05-server-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/05-server-side-rendering/src/app/cars/[carId]/page.tsx b/04-frameworks/08-nextjs/05-server-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/05-server-side-rendering/src/app/cars/layout.tsx b/04-frameworks/08-nextjs/05-server-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 classes from './layout.module.css';
 
 interface Props {
diff --git a/04-frameworks/08-nextjs/05-server-side-rendering/src/app/cars/page.tsx b/04-frameworks/08-nextjs/05-server-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/05-server-side-rendering/src/app/layout.tsx b/04-frameworks/08-nextjs/05-server-side-rendering/src/app/layout.tsx
@@ -1,7 +1,7 @@
+import { Inter } from 'next/font/google';
 import 'normalize.css';
-import './material-icons.css';
 import React from 'react';
-import { Inter } from 'next/font/google';
+import './material-icons.css';
 
 const inter = Inter({
   subsets: ['latin'],
@@ -16,7 +16,9 @@ const RootLayout = (props: Props) => {
   const { children } = props;
   return (
     <html lang="en" className={inter.className}>
-      <body>{children}</body>
+      <body>
+        <main>{children}</main>
+      </body>
     </html>
   );
 };
diff --git a/04-frameworks/08-nextjs/05-server-side-rendering/src/app/page.tsx b/04-frameworks/08-nextjs/05-server-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/05-server-side-rendering/src/core/constants/env.constants.ts b/04-frameworks/08-nextjs/05-server-side-rendering/src/core/constants/env.constants.ts
@@ -1,4 +1,4 @@
-export const envConstants = {
+export const ENV = {
   BASE_API_URL: process.env.BASE_API_URL,
   BASE_PICTURES_URL: process.env.BASE_PICTURES_URL,
 };
diff --git a/04-frameworks/08-nextjs/05-server-side-rendering/src/pods/car-list/api/car-list.api.ts b/04-frameworks/08-nextjs/05-server-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/05-server-side-rendering/src/pods/car-list/car-list.component.tsx b/04-frameworks/08-nextjs/05-server-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/05-server-side-rendering/src/pods/car-list/car-list.mappers.ts b/04-frameworks/08-nextjs/05-server-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/05-server-side-rendering/src/pods/car-list/components/car-item.component.tsx b/04-frameworks/08-nextjs/05-server-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/05-server-side-rendering/src/pods/car-list/components/car-item.module.css b/04-frameworks/08-nextjs/05-server-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/05-server-side-rendering/src/pods/car/api/car.api.ts b/04-frameworks/08-nextjs/05-server-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/05-server-side-rendering/src/pods/car/car.mappers.ts b/04-frameworks/08-nextjs/05-server-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/05-server-side-rendering/tsconfig.json b/04-frameworks/08-nextjs/05-server-side-rendering/tsconfig.json
@@ -1,10 +1,7 @@
 {
   "compilerOptions": {
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -15,27 +12,24 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "plugins": [
       {
         "name": "next"
       }
     ],
     "baseUrl": ".",
     "paths": {
-      "#*": [
-        "./src/*"
-      ]
-    },
-    "target": "ES2017"
+      "#*": ["./src/*"]
+    }
   },
   "include": [
     "next-env.d.ts",
     ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts",
     "**/*.ts",
     "**/*.tsx"
   ],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules"]
 }
