Skip to content

Commit 0292836

Browse files
committed
update 02-navigation
1 parent 807ca04 commit 0292836

13 files changed

Lines changed: 48 additions & 49 deletions

File tree

04-frameworks/08-nextjs/02-navigation/README.md

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -61,9 +61,10 @@ const RootPage = () => {
6161
export default RootPage;
6262

6363
```
64+
6465
> [Next link](https://nextjs.org/docs/app/api-reference/components/link)
6566
>
66-
> [Routing](https://nextjs.org/docs/app/building-your-application/routing)
67+
> [Routing](https://nextjs.org/docs/app/getting-started/linking-and-navigating)
6768
6869
Or programmatically:
6970

@@ -96,7 +97,7 @@ export default CarListPage;
9697

9798
```
9899

99-
> [useRouter](https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#userouter-hook): It will do a `client-side` navigation between routes.
100+
> [useRouter](https://nextjs.org/docs/app/api-reference/functions/use-router): It will do a `client-side` navigation between routes.
100101
>
101102
> Also, since we are using a button with `onClick` event, we must add `'use client'` directive to mark it as a client component.
102103
@@ -108,11 +109,11 @@ _./app/cars/\[carId\]/page.tsx_
108109
import React from 'react';
109110

110111
interface Props {
111-
params: { carId: string };
112+
params: Promise<{ carId: string }>;
112113
}
113114

114-
const CarPage = (props: Props) => {
115-
const { params } = props;
115+
const CarPage = async (props: Props) => {
116+
const params = await props.params;
116117
return (
117118
<>
118119
<h2>Car detail page</h2>
@@ -122,14 +123,11 @@ const CarPage = (props: Props) => {
122123
};
123124

124125
export default CarPage;
125-
126126
```
127127

128128
> [Dynamic routes](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes)
129129
>
130130
> [i18n-routing](https://nextjs.org/docs/app/building-your-application/routing/internationalization)
131-
>
132-
> [Warning `params` should be awaited before using its properties](https://nextjs.org/docs/messages/sync-dynamic-apis)
133131
134132
Open `http://localhost:3000/cars/audi`;
135133

@@ -174,7 +172,6 @@ const CarsLayout = (props: Props) => {
174172
};
175173

176174
export default CarsLayout;
177-
178175
```
179176

180177
> We only can use `Metadata` on `server components`.
@@ -192,17 +189,17 @@ import React from 'react';
192189
+ import { Metadata } from 'next';
193190

194191
interface Props {
195-
params: { carId: string };
192+
params: Promise<{ carId: string }>;
196193
}
197194

198195
+ export const generateMetadata = async (props: Props): Promise<Metadata> => {
199-
+ const { params } = props;
196+
+ const params = await props.params;
200197
+ return {
201198
+ title: `Rent a car - Car ${params.carId} details`,
202199
+ };
203200
+ };
204201

205-
const CarPage = (props: Props) => {
202+
const CarPage = async (props: Props) => {
206203
...
207204

208205
```

04-frameworks/08-nextjs/02-navigation/api-server/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@
22
"name": "car-api",
33
"version": "1.0.0",
44
"description": "Car API",
5-
"main": "index.js",
5+
"type": "module",
66
"scripts": {
77
"mock-server": "tsx watch src/index.ts"
88
},
99
"author": "Lemoncode",
1010
"license": "MIT",
1111
"dependencies": {
12-
"@hono/node-server": "^1.13.8",
13-
"hono": "^4.6.20"
12+
"@hono/node-server": "^1.19.7",
13+
"hono": "^4.11.0"
1414
},
1515
"devDependencies": {
16-
"tsx": "^4.19.2"
16+
"tsx": "^4.21.0"
1717
}
1818
}

04-frameworks/08-nextjs/02-navigation/app/cars/[carId]/page.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@ import React from 'react';
22
import { Metadata } from 'next';
33

44
interface Props {
5-
params: { carId: string };
5+
params: Promise<{ carId: string }>;
66
}
77

88
export const generateMetadata = async (props: Props): Promise<Metadata> => {
9-
const { params } = props;
9+
const params = await props.params;
1010
return {
1111
title: `Rent a car - Car ${params.carId} details`,
1212
};
1313
};
1414

15-
const CarPage = (props: Props) => {
16-
const { params } = props;
15+
const CarPage = async (props: Props) => {
16+
const params = await props.params;
1717
return (
1818
<>
1919
<h2>Car detail page</h2>

04-frameworks/08-nextjs/02-navigation/app/cars/layout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React from 'react';
21
import { Metadata } from 'next';
2+
import React from 'react';
33

44
export const metadata: Metadata = {
55
title: 'Rent a car - Car list',

04-frameworks/08-nextjs/02-navigation/app/cars/page.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
'use client';
2-
import React from 'react';
32
import { useRouter } from 'next/navigation';
43

54
const CarListPage = () => {

04-frameworks/08-nextjs/02-navigation/app/page.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import React from 'react';
2-
import Link from 'next/link';
31
import { Metadata } from 'next';
2+
import Link from 'next/link';
43

54
export const metadata: Metadata = {
65
title: 'Rent a car - Home',
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/// <reference types="next" />
22
/// <reference types="next/image-types/global" />
3+
import "./.next/dev/types/routes.d.ts";
34

45
// NOTE: This file should not be edited
56
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
{
2-
"name": "07-nextjs-examples",
2+
"name": "nextjs-examples",
33
"version": "1.0.0",
44
"description": "Nextjs examples",
5+
"type": "module",
56
"scripts": {
67
"start": "next dev",
78
"build": "next build",
@@ -12,14 +13,14 @@
1213
"author": "Lemoncode",
1314
"license": "MIT",
1415
"dependencies": {
15-
"next": "^15.1.6",
16-
"react": "^19.0.0",
17-
"react-dom": "^19.0.0"
16+
"next": "^16.0.10",
17+
"react": "^19.2.3",
18+
"react-dom": "^19.2.3"
1819
},
1920
"devDependencies": {
20-
"@types/node": "22.13.0",
21-
"@types/react": "^19.0.8",
22-
"@types/react-dom": "^19.0.3",
23-
"typescript": "^5.7.3"
21+
"@types/node": "25.0.1",
22+
"@types/react": "^19.2.7",
23+
"@types/react-dom": "^19.2.3",
24+
"typescript": "^5.9.3"
2425
}
2526
}

04-frameworks/08-nextjs/02-navigation/tsconfig.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"moduleResolution": "node",
1717
"resolveJsonModule": true,
1818
"isolatedModules": true,
19-
"jsx": "preserve",
19+
"jsx": "react-jsx",
2020
"plugins": [
2121
{
2222
"name": "next"
@@ -26,6 +26,8 @@
2626
"include": [
2727
"next-env.d.ts",
2828
".next/types/**/*.ts",
29+
".next/dev/types/**/*.ts",
30+
"**/*.mts",
2931
"**/*.ts",
3032
"**/*.tsx"
3133
],

04-frameworks/08-nextjs/03-boilerplate/api-server/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@
22
"name": "car-api",
33
"version": "1.0.0",
44
"description": "Car API",
5-
"main": "index.js",
5+
"type": "module",
66
"scripts": {
77
"mock-server": "tsx watch src/index.ts"
88
},
99
"author": "Lemoncode",
1010
"license": "MIT",
1111
"dependencies": {
12-
"@hono/node-server": "^1.13.8",
13-
"hono": "^4.6.20"
12+
"@hono/node-server": "^1.19.7",
13+
"hono": "^4.11.0"
1414
},
1515
"devDependencies": {
16-
"tsx": "^4.19.2"
16+
"tsx": "^4.21.0"
1717
}
1818
}

0 commit comments

Comments
 (0)