Skip to content

Commit 7cead59

Browse files
nasdannasdan
authored
Merge pull request #837 from Lemoncode/feature/update-nextjs-examples
Feature/update nextjs examples
2 parents 484f24b + 01dc431 commit 7cead59

92 files changed

Lines changed: 368 additions & 386 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎04-frameworks/08-nextjs/00-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
}

‎04-frameworks/08-nextjs/00-boilerplate/package.json‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
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:api-server": "cd api-server && npm run mock-server",
78
"postinstall": "cd ./api-server && npm install"
89
},
910
"author": "Lemoncode",
1011
"license": "MIT",
1112
"dependencies": {
12-
"react": "^19.0.0",
13-
"react-dom": "^19.0.0"
13+
"react": "^19.2.3",
14+
"react-dom": "^19.2.3"
1415
},
1516
"devDependencies": {
16-
"@types/react": "^19.0.8",
17-
"@types/react-dom": "^19.0.3",
18-
"typescript": "^5.7.3"
17+
"@types/react": "^19.2.7",
18+
"@types/react-dom": "^19.2.3",
19+
"typescript": "^5.9.3"
1920
}
2021
}

‎04-frameworks/08-nextjs/01-config/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ _./package.json_
3434

3535
Before Nextjs 13, we used to create pages inside the `pages` folder and the rest of our files with our custom project structure. Now, with the new version, we can place files inside the `app` folder and every component will be a `React Server Component` by default.
3636

37-
[It's required create a `root layout`](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) inside `app/layout.tsx` with the required <html> and <body> tags:
37+
[It's required create a `root layout`](https://nextjs.org/docs/app/getting-started/layouts-and-pages#creating-a-layout) inside `app/layout.tsx` with the required <html> and <body> tags:
3838

3939
_./app/layout.tsx_
4040

‎04-frameworks/08-nextjs/01-config/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/01-config/next-env.d.ts‎

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/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.

‎04-frameworks/08-nextjs/01-config/package.json‎

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/01-config/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/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>

0 commit comments

Comments
 (0)