update 02-navigation

Author: nasdan

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

@@ -61,9 +61,10 @@ const RootPage = () => {
 export default RootPage;
 
 ```
+
 > [Next link](https://nextjs.org/docs/app/api-reference/components/link)
 >
-> [Routing](https://nextjs.org/docs/app/building-your-application/routing)
+> [Routing](https://nextjs.org/docs/app/getting-started/linking-and-navigating)
 
 Or programmatically:
 
@@ -96,7 +97,7 @@ export default CarListPage;
 
 ```
 
-> [useRouter](https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#userouter-hook): It will do a `client-side` navigation between routes. 
+> [useRouter](https://nextjs.org/docs/app/api-reference/functions/use-router): It will do a `client-side` navigation between routes.
 >
 > Also, since we are using a button with `onClick` event, we must add `'use client'` directive to mark it as a client component.
 
@@ -108,11 +109,11 @@ _./app/cars/\[carId\]/page.tsx_
 import React from 'react';
 
 interface Props {
-  params: { carId: string };
+  params: Promise<{ carId: string }>;
 }
 
-const CarPage = (props: Props) => {
-  const { params } = props;
+const CarPage = async (props: Props) => {
+  const params = await props.params;
   return (
     <>
       <h2>Car detail page</h2>
@@ -122,14 +123,11 @@ const CarPage = (props: Props) => {
 };
 
 export default CarPage;
-
 ```
 
 > [Dynamic routes](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes)
 >
 > [i18n-routing](https://nextjs.org/docs/app/building-your-application/routing/internationalization)
->
-> [Warning `params` should be awaited before using its properties](https://nextjs.org/docs/messages/sync-dynamic-apis)
 
 Open `http://localhost:3000/cars/audi`;
 
@@ -174,7 +172,6 @@ const CarsLayout = (props: Props) => {
 };
 
 export default CarsLayout;
-
 ```
 
 > We only can use `Metadata` on `server components`.
@@ -192,17 +189,17 @@ 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) => {
 ...
 
 ```

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

@@ -2,17 +2,17 @@
   "name": "car-api",
   "version": "1.0.0",
   "description": "Car API",
-  "main": "index.js",
+  "type": "module",
   "scripts": {
     "mock-server": "tsx watch src/index.ts"
   },
   "author": "Lemoncode",
   "license": "MIT",
   "dependencies": {
-    "@hono/node-server": "^1.13.8",
-    "hono": "^4.6.20"
+    "@hono/node-server": "^1.19.7",
+    "hono": "^4.11.0"
   },
   "devDependencies": {
-    "tsx": "^4.19.2"
+    "tsx": "^4.21.0"
   }
 }

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

@@ -2,18 +2,18 @@ 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 { params } = props;
+const CarPage = async (props: Props) => {
+  const params = await props.params;
   return (
     <>
       <h2>Car detail page</h2>

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

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Metadata } from 'next';
+import React from 'react';
 
 export const metadata: Metadata = {
   title: 'Rent a car - Car list',

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

@@ -1,5 +1,4 @@
 'use client';
-import React from 'react';
 import { useRouter } from 'next/navigation';
 
 const CarListPage = () => {

04-frameworks/08-nextjs/02-navigation/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',

04-frameworks/08-nextjs/02-navigation/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

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

@@ -1,7 +1,8 @@
 {
-  "name": "07-nextjs-examples",
+  "name": "nextjs-examples",
   "version": "1.0.0",
   "description": "Nextjs examples",
+  "type": "module",
   "scripts": {
     "start": "next dev",
     "build": "next build",
@@ -12,14 +13,14 @@
   "author": "Lemoncode",
   "license": "MIT",
   "dependencies": {
-    "next": "^15.1.6",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "next": "^16.0.10",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
   },
   "devDependencies": {
-    "@types/node": "22.13.0",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
-    "typescript": "^5.7.3"
+    "@types/node": "25.0.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "^5.9.3"
   }
 }

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

@@ -16,7 +16,7 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "plugins": [
       {
         "name": "next"
@@ -26,6 +26,8 @@
   "include": [
     "next-env.d.ts",
     ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts",
     "**/*.ts",
     "**/*.tsx"
   ],

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

@@ -2,17 +2,17 @@
   "name": "car-api",
   "version": "1.0.0",
   "description": "Car API",
-  "main": "index.js",
+  "type": "module",
   "scripts": {
     "mock-server": "tsx watch src/index.ts"
   },
   "author": "Lemoncode",
   "license": "MIT",
   "dependencies": {
-    "@hono/node-server": "^1.13.8",
-    "hono": "^4.6.20"
+    "@hono/node-server": "^1.19.7",
+    "hono": "^4.11.0"
   },
   "devDependencies": {
-    "tsx": "^4.19.2"
+    "tsx": "^4.21.0"
   }
 }