Skip to content

Commit 80c48ec

Browse files
nasdannasdan
committed
update 04
1 parent 5d76ec3 commit 80c48ec

File tree

13 files changed

+94
-60
lines changed

13 files changed

+94
-60
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ let db = {
1010
};
1111

1212
const app = new Hono();
13-
app.use(logger());
1413
app.use('/*', serveStatic({ root: './public' }));
1514

15+
app.use(logger());
1616
app.use('/api/*', cors());
1717

1818
app.get('/api/cars', (context) => {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ let db = {
1010
};
1111

1212
const app = new Hono();
13-
app.use(logger());
1413
app.use('/*', serveStatic({ root: './public' }));
1514

15+
app.use(logger());
1616
app.use('/api/*', cors());
1717

1818
app.get('/api/cars', (context) => {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ let db = {
1010
};
1111

1212
const app = new Hono();
13-
app.use(logger());
1413
app.use('/*', serveStatic({ root: './public' }));
1514

15+
app.use(logger());
1616
app.use('/api/*', cors());
1717

1818
app.get('/api/cars', (context) => {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ let db = {
1010
};
1111

1212
const app = new Hono();
13-
app.use(logger());
1413
app.use('/*', serveStatic({ root: './public' }));
1514

15+
app.use(logger());
1616
app.use('/api/*', cors());
1717

1818
app.get('/api/cars', (context) => {

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

Lines changed: 54 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,43 @@ import classes from './layout.module.css';
137137

138138
```
139139

140+
Fix the `car details` page:
141+
142+
_./src/app/cars/\[carId\]/page.tsx_
143+
144+
```diff
145+
import React from 'react';
146+
import { Metadata } from 'next';
147+
148+
interface Props {
149+
- params: { carId: string };
150+
+ params: Promise<{ carId: string }>;
151+
}
152+
153+
export const generateMetadata = async (props: Props): Promise<Metadata> => {
154+
- const { params } = props;
155+
+ const params = await props.params;
156+
return {
157+
title: `Rent a car - Car ${params.carId} details`,
158+
};
159+
};
160+
161+
- const CarPage = (props: Props) => {
162+
+ const CarPage = async (props: Props) => {
163+
- const { params } = props;
164+
+ const params = await props.params;
165+
return (
166+
<>
167+
<h2>Car detail page</h2>
168+
<p>{params.carId}</p>
169+
</>
170+
);
171+
};
172+
173+
export default CarPage;
174+
175+
```
176+
140177
Run in `prod` mode (two terminals):
141178

142179
```bash
@@ -203,32 +240,22 @@ import React from 'react';
203240
import { Metadata } from 'next';
204241
+ import { Car, api, mapCarFromApiToVm } from '#pods/car';
205242

206-
interface Props {
207-
params: { carId: string };
208-
}
243+
...
209244

210-
export const generateMetadata = async (props: Props): Promise<Metadata> => {
211-
const { params } = props;
212-
return {
213-
title: `Rent a car - Car ${params.carId} details`,
214-
};
245+
const CarPage = async (props: Props) => {
246+
const params = await props.params;
247+
+ const car = await api.getCar(params.carId);
248+
+ console.log('Car page', car);
249+
250+
- return (
251+
- <>
252+
- <h2>Car detail page</h2>
253+
- <p>{params.carId}</p>
254+
- </>
255+
- );
256+
+ return <Car car={mapCarFromApiToVm(car)} />;
215257
};
216258

217-
- const CarPage = (props: Props) => {
218-
+ const CarPage = async (props: Props) => {
219-
const { params } = props;
220-
+ const car = await api.getCar(params.carId);
221-
+ console.log('Car page', car);
222-
223-
- return (
224-
- <>
225-
- <h2>Car detail page</h2>
226-
- <p>{params.carId}</p>
227-
- </>
228-
- );
229-
+ return <Car car={mapCarFromApiToVm(car)} />;
230-
};
231-
232259
export default CarPage;
233260

234261
```
@@ -249,15 +276,15 @@ npm run start:prod
249276
>
250277
> It will cache on routing navigation.
251278
252-
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:
279+
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:
253280

254281
_./src/app/cars/\[carId\]/page.tsx_
255282

256283
```diff
257284
...
258285

259286
export const generateMetadata = async (props: Props): Promise<Metadata> => {
260-
const { params } = props;
287+
const params = await props.params;
261288
return {
262289
title: `Rent a car - Car ${params.carId} details`,
263290
};
@@ -270,7 +297,7 @@ export const generateMetadata = async (props: Props): Promise<Metadata> => {
270297
...
271298
```
272299

273-
Disable `prefetch`:
300+
Disable `prefetch` for demo purposes:
274301

275302
_./src/pods/car-list/components/car-item.component.tsx_
276303

@@ -322,7 +349,7 @@ _./src/app/cars/\[carId\]/page.tsx_
322349
...
323350

324351
export const generateMetadata = async (props: Props): Promise<Metadata> => {
325-
const { params } = props;
352+
const params = await props.params;
326353
+ const car = await api.getCar(params.carId);
327354
return {
328355
- title: `Rent a car - Car ${params.carId} details`,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ let db = {
1010
};
1111

1212
const app = new Hono();
13-
app.use(logger());
1413
app.use('/*', serveStatic({ root: './public' }));
1514

15+
app.use(logger());
1616
app.use('/api/*', cors());
1717

1818
app.get('/api/cars', (context) => {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
/// <reference types="next/image-types/global" />
33

44
// NOTE: This file should not be edited
5-
// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
5+
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

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

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,31 @@
33
"version": "1.0.0",
44
"description": "Nextjs examples",
55
"scripts": {
6-
"start": "run-p start:dev start:api-server",
6+
"start": "run-p -l start:dev start:api-server",
77
"start:dev": "next dev",
88
"build": "rimraf .next && next build",
99
"start:prod": "next start -p 8080",
1010
"start:api-server": "cd api-server && npm run mock-server",
1111
"postinstall": "cd ./api-server && npm install"
1212
},
1313
"imports": {
14-
"#*": [
15-
"./src/*",
16-
"./src/*.ts",
17-
"./src/*.tsx",
18-
"./src/*/index.ts",
19-
"./src/*/index.tsx"
20-
]
14+
"#*": "./src/*"
2115
},
2216
"author": "Lemoncode",
2317
"license": "MIT",
2418
"dependencies": {
25-
"next": "^14.2.9",
19+
"next": "^15.1.6",
2620
"normalize.css": "^8.0.1",
27-
"react": "^18.3.1",
28-
"react-dom": "^18.3.1",
21+
"react": "^19.0.0",
22+
"react-dom": "^19.0.0",
2923
"sharp": "^0.33.5"
3024
},
3125
"devDependencies": {
32-
"@types/node": "22.5.4",
33-
"@types/react": "^18.3.5",
34-
"@types/react-dom": "^18.3.0",
26+
"@types/node": "22.13.1",
27+
"@types/react": "^19.0.8",
28+
"@types/react-dom": "^19.0.3",
3529
"npm-run-all": "^4.1.5",
3630
"rimraf": "^6.0.1",
37-
"typescript": "^5.6.2"
31+
"typescript": "^5.7.3"
3832
}
3933
}

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,12 @@ import { Metadata } from 'next';
33
import { Car, api, mapCarFromApiToVm } from '#pods/car';
44

55
interface Props {
6-
params: { carId: string };
6+
params: Promise<{ carId: string }>;
77
}
88

99
export const generateMetadata = async (props: Props): Promise<Metadata> => {
10-
const { params } = props;
10+
const params = await props.params;
1111
const car = await api.getCar(params.carId);
12-
1312
return {
1413
title: `Rent a car - Car ${car.name} details`,
1514
};
@@ -20,7 +19,7 @@ export async function generateStaticParams() {
2019
}
2120

2221
const CarPage = async (props: Props) => {
23-
const { params } = props;
22+
const params = await props.params;
2423
const car = await api.getCar(params.carId);
2524
console.log('Car page', car);
2625

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const getCar = async (id: string): Promise<Car> => {
99

1010
export const bookCar = async (car: Car): Promise<boolean> => {
1111
await fetch(`${url}/${car.id}`, {
12-
method: 'PUT',
12+
method: 'PATCH',
1313
headers: { 'Content-Type': 'application/json' },
1414
body: JSON.stringify(car),
1515
});

0 commit comments

Comments
 (0)