update boilerplate

Author: nasdan

04-frameworks/08-nextjs/03-boilerplate/README.md

@@ -10,6 +10,11 @@ Next.js is unopinionated about how you [organize your project](https://nextjs.or
 
 - [Route groups](https://nextjs.org/docs/app/building-your-application/routing/colocation#route-groups): `(folderName)` to groups several routes under the same folder without create a new group route.
 
+- [Image component](https://nextjs.org/docs/app/api-reference/components/image) in `./src/app/cars/layout.tsx`, differences with `<img style={{ width: 32, height: 'auto' }} src="/home-logo.png" />`.
+  - If we use `img` it downloads the full image and resizes it in the browser: ~214kB.
+  - If we use `Image` component it downloads the image with the size we need: ~3.2kB.
+  - Try `Image` component with `blurDataURL="/home-logo-low-resolution.png"` and `placeholder="blur"`.
+
 - [Using fonts](https://nextjs.org/docs/app/building-your-application/optimizing/fonts)
   - [Font display values](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display#values)
 

04-frameworks/08-nextjs/03-boilerplate/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/03-boilerplate/package.json

@@ -10,29 +10,23 @@
     "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/03-boilerplate/public/home-logo-low-resolution.png

@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -19,9 +23,19 @@
     ],
     "baseUrl": ".",
     "paths": {
-      "#*": ["./src/*"]
-    }
+      "#*": [
+        "./src/*"
+      ]
+    },
+    "target": "ES2017"
   },
-  "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

04-frameworks/08-nextjs/03-boilerplate/tsconfig.json

@@ -4,14 +4,16 @@ Let's works with Nextjs using pages generated at build time.
 
 We will start from `03-boilerplate`.
 
-# Steps to build it
+## Steps to build it
 
 `npm install` to install previous sample packages:
 
 ```bash
 npm install
 ```
 
+## Rendering modes
+
 We can render Nextjs pages in 3 modes:
 
 - Static Site Generation
@@ -20,7 +22,7 @@ We can render Nextjs pages in 3 modes:
 
 > We can combine them
 
-# Static Site Generation
+## Static Site Generation
 
 Pages are generated at build time, it means that it will fetch all necessary data from backend at build time.