update 04

Author: nasdan

04-frameworks/08-nextjs/00-boilerplate/api-server/src/index.ts

@@ -10,9 +10,9 @@ let db = {
 };
 
 const app = new Hono();
-app.use(logger());
 app.use('/*', serveStatic({ root: './public' }));
 
+app.use(logger());
 app.use('/api/*', cors());
 
 app.get('/api/cars', (context) => {

04-frameworks/08-nextjs/01-config/api-server/src/index.ts

@@ -10,9 +10,9 @@ let db = {
 };
 
 const app = new Hono();
-app.use(logger());
 app.use('/*', serveStatic({ root: './public' }));
 
+app.use(logger());
 app.use('/api/*', cors());
 
 app.get('/api/cars', (context) => {

04-frameworks/08-nextjs/02-navigation/api-server/src/index.ts

@@ -10,9 +10,9 @@ let db = {
 };
 
 const app = new Hono();
-app.use(logger());
 app.use('/*', serveStatic({ root: './public' }));
 
+app.use(logger());
 app.use('/api/*', cors());
 
 app.get('/api/cars', (context) => {

04-frameworks/08-nextjs/03-boilerplate/api-server/src/index.ts

@@ -10,9 +10,9 @@ let db = {
 };
 
 const app = new Hono();
-app.use(logger());
 app.use('/*', serveStatic({ root: './public' }));
 
+app.use(logger());
 app.use('/api/*', cors());
 
 app.get('/api/cars', (context) => {

04-frameworks/08-nextjs/04-static-site-generation/README.md

@@ -137,6 +137,43 @@ import classes from './layout.module.css';
 
 ```
 
+Fix the `car details` page:
+
+_./src/app/cars/\[carId\]/page.tsx_
+
+```diff
+import React from 'react';
+import { Metadata } from 'next';
+
+interface Props {
+- params: { carId: string };
++ params: Promise<{ carId: string }>;
+}
+
+export const generateMetadata = async (props: Props): Promise<Metadata> => {
+- const { params } = props;
++ const params = await props.params;
+  return {
+    title: `Rent a car - Car ${params.carId} details`,
+  };
+};
+
+- const CarPage = (props: Props) => {
++ const CarPage = async (props: Props) => {
+-   const { params } = props;
++   const params = await props.params;
+    return (
+      <>
+        <h2>Car detail page</h2>
+        <p>{params.carId}</p>
+      </>
+    );
+  };
+
+export default CarPage;
+
+```
+
 Run in `prod` mode (two terminals):
 
 ```bash
@@ -203,32 +240,22 @@ import React from 'react';
 import { Metadata } from 'next';
 + import { Car, api, mapCarFromApiToVm } from '#pods/car';
 
-interface Props {
-  params: { carId: string };
-}
+...
 
-export const generateMetadata = async (props: Props): Promise<Metadata> => {
-  const { params } = props;
-  return {
-    title: `Rent a car - Car ${params.carId} details`,
-  };
+const CarPage = async (props: Props) => {
+  const params = await props.params;
++ const car = await api.getCar(params.carId);
++ console.log('Car page', car);
+
+- return (
+-   <>
+-     <h2>Car detail page</h2>
+-     <p>{params.carId}</p>
+-   </>
+- );
++ return <Car car={mapCarFromApiToVm(car)} />;
 };
 
-- const CarPage = (props: Props) => {
-+ const CarPage = async (props: Props) => {
-    const { params } = props;
-+   const car = await api.getCar(params.carId);
-+   console.log('Car page', car);
-
--   return (
--     <>
--       <h2>Car detail page</h2>
--       <p>{params.carId}</p>
--     </>
--   );
-+   return <Car car={mapCarFromApiToVm(car)} />;
-  };
-
 export default CarPage;
 
 ```
@@ -249,15 +276,15 @@ npm run start:prod
 >
 > It will cache on routing navigation.
 
-But if we run this code at build time, we need to use [generateStaticParams](https://nextjs.org/docs/app/api-reference/functions/generate-static-params) too:
+But if we want to run this code at build time, we need to use [generateStaticParams](https://nextjs.org/docs/app/api-reference/functions/generate-static-params) too:
 
 _./src/app/cars/\[carId\]/page.tsx_
 
 ```diff
 ...
 
 export const generateMetadata = async (props: Props): Promise<Metadata> => {
-  const { params } = props;
+  const params = await props.params;
   return {
     title: `Rent a car - Car ${params.carId} details`,
   };
@@ -270,7 +297,7 @@ export const generateMetadata = async (props: Props): Promise<Metadata> => {
 ...
 ```
 
-Disable `prefetch`:
+Disable `prefetch` for demo purposes:
 
 _./src/pods/car-list/components/car-item.component.tsx_
 
@@ -322,7 +349,7 @@ _./src/app/cars/\[carId\]/page.tsx_
 ...
 
 export const generateMetadata = async (props: Props): Promise<Metadata> => {
-  const { params } = props;
+  const params = await props.params;
 + const car = await api.getCar(params.carId);
   return {
 -   title: `Rent a car - Car ${params.carId} details`,

04-frameworks/08-nextjs/04-static-site-generation/api-server/src/index.ts

@@ -10,9 +10,9 @@ let db = {
 };
 
 const app = new Hono();
-app.use(logger());
 app.use('/*', serveStatic({ root: './public' }));
 
+app.use(logger());
 app.use('/api/*', cors());
 
 app.get('/api/cars', (context) => {

04-frameworks/08-nextjs/04-static-site-generation/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

04-frameworks/08-nextjs/04-static-site-generation/package.json

@@ -3,37 +3,31 @@
   "version": "1.0.0",
   "description": "Nextjs examples",
   "scripts": {
-    "start": "run-p start:dev start:api-server",
+    "start": "run-p -l start:dev start:api-server",
     "start:dev": "next dev",
     "build": "rimraf .next && next build",
     "start:prod": "next start -p 8080",
     "start:api-server": "cd api-server && npm run mock-server",
     "postinstall": "cd ./api-server && npm install"
   },
   "imports": {
-    "#*": [
-      "./src/*",
-      "./src/*.ts",
-      "./src/*.tsx",
-      "./src/*/index.ts",
-      "./src/*/index.tsx"
-    ]
+    "#*": "./src/*"
   },
   "author": "Lemoncode",
   "license": "MIT",
   "dependencies": {
-    "next": "^14.2.9",
+    "next": "^15.1.6",
     "normalize.css": "^8.0.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "sharp": "^0.33.5"
   },
   "devDependencies": {
-    "@types/node": "22.5.4",
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.3.0",
+    "@types/node": "22.13.1",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "npm-run-all": "^4.1.5",
     "rimraf": "^6.0.1",
-    "typescript": "^5.6.2"
+    "typescript": "^5.7.3"
   }
 }

04-frameworks/08-nextjs/04-static-site-generation/src/app/cars/[carId]/page.tsx

@@ -3,13 +3,12 @@ import { Metadata } from 'next';
 import { Car, api, mapCarFromApiToVm } from '#pods/car';
 
 interface Props {
-  params: { carId: string };
+  params: Promise<{ carId: string }>;
 }
 
 export const generateMetadata = async (props: Props): Promise<Metadata> => {
-  const { params } = props;
+  const params = await props.params;
   const car = await api.getCar(params.carId);
-
   return {
     title: `Rent a car - Car ${car.name} details`,
   };
@@ -20,7 +19,7 @@ export async function generateStaticParams() {
 }
 
 const CarPage = async (props: Props) => {
-  const { params } = props;
+  const params = await props.params;
   const car = await api.getCar(params.carId);
   console.log('Car page', car);
 

04-frameworks/08-nextjs/04-static-site-generation/src/pods/car/api/car.api.ts

@@ -9,7 +9,7 @@ export const getCar = async (id: string): Promise<Car> => {
 
 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),
   });