update 03-boilerplate

Author: nasdan

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

@@ -1,29 +1,30 @@
 # 03 Boilerplate
 
-Next.js is unopinionated about how you [organize your project](https://nextjs.org/docs/app/building-your-application/routing/colocation) but it gives you some features to avoid create unnecessary routes like:
+Next.js is unopinionated about how you [organize your project](https://nextjs.org/docs/app/getting-started/project-structure) but it gives you some features to avoid create unnecessary routes like:
 
-- [src directory](https://nextjs.org/docs/app/building-your-application/routing/colocation#src-directory)
+- [src directory](https://nextjs.org/docs/app/getting-started/project-structure#src-folder)
 
-- [Store project files outside of app](https://nextjs.org/docs/app/building-your-application/routing/colocation#store-project-files-outside-of-app)
+- [Store project files outside of app](https://nextjs.org/docs/app/getting-started/project-structure#store-project-files-outside-of-app)
 
-- [Private folders](https://nextjs.org/docs/app/building-your-application/routing/colocation#private-folders) using underscore as prefix: `_folderName`.
+- [Private folders](https://nextjs.org/docs/app/getting-started/project-structure#private-folders) using underscore as prefix: `_folderName`.
 
-- [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.
+- [Route groups](https://nextjs.org/docs/app/getting-started/project-structure#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)
 
-- [Working on support emotion and MUI](https://nextjs.org/docs/app/building-your-application/styling/css-in-js)
+- [CSS-in-JS support](https://nextjs.org/docs/app/building-your-application/styling/css-in-js)
 
 - [Material Icons discussion](https://github.com/vercel/next.js/discussions/42881)
 
-- [Module aliases](https://nextjs.org/docs/app/building-your-application/configuring/absolute-imports-and-module-aliases#module-aliases)
-
+- [Module aliases](https://nextjs.org/docs/app/getting-started/installation#set-up-absolute-imports-and-module-path-aliases)
 
 # About Basefactor + Lemoncode
 

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

@@ -1,32 +1,32 @@
 {
-  "name": "07-nextjs-examples",
+  "name": "nextjs-examples",
   "version": "1.0.0",
   "description": "Nextjs examples",
+  "type": "module",
+  "imports": {
+    "#*": "./src/*"
+  },
   "scripts": {
     "start": "next dev",
-    "build": "rimraf .next && next build",
+    "build": "next build",
     "start:prod": "next start -p 8080",
     "start:api-server": "cd api-server && npm run mock-server",
     "postinstall": "cd ./api-server && npm install"
   },
-  "imports": {
-    "#*": "./src/*"
-  },
   "author": "Lemoncode",
   "license": "MIT",
   "dependencies": {
-    "next": "^15.1.6",
+    "next": "^16.0.10",
     "normalize.css": "^8.0.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "sharp": "^0.33.5"
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "sharp": "^0.34.5"
   },
   "devDependencies": {
-    "@types/node": "22.13.1",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
+    "@types/node": "25.0.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "npm-run-all": "^4.1.5",
-    "rimraf": "^6.0.1",
-    "typescript": "^5.7.3"
+    "typescript": "^5.9.3"
   }
 }

04-frameworks/08-nextjs/03-boilerplate/src/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/03-boilerplate/src/app/layout.tsx

@@ -1,7 +1,7 @@
+import { Inter } from 'next/font/google';
 import 'normalize.css';
-import './material-icons.css';
 import React from 'react';
-import { Inter } from 'next/font/google';
+import './material-icons.css';
 
 const inter = Inter({
   subsets: ['latin'],
@@ -16,7 +16,9 @@ const RootLayout = (props: Props) => {
   const { children } = props;
   return (
     <html lang="en" className={inter.className}>
-      <body>{children}</body>
+      <body>
+        <main>{children}</main>
+      </body>
     </html>
   );
 };

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

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "target": "ES2017",
     "lib": [
       "dom",
       "dom.iterable",
@@ -15,23 +16,18 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "plugins": [
       {
         "name": "next"
       }
-    ],
-    "baseUrl": ".",
-    "paths": {
-      "#*": [
-        "./src/*"
-      ]
-    },
-    "target": "ES2017"
+    ]
   },
   "include": [
     "next-env.d.ts",
     ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts",
     "**/*.ts",
     "**/*.tsx"
   ],