update 04-static-site-generation

Author: nasdan

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

@@ -8,7 +8,7 @@
   },
   "scripts": {
     "start": "next dev",
-    "build": "next build",
+    "build": "rimraf .next && next build",
     "start:prod": "next start -p 8080",
     "start:api-server": "cd api-server && npm run mock-server",
     "postinstall": "cd ./api-server && npm install"
@@ -27,6 +27,7 @@
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "npm-run-all": "^4.1.5",
+    "rimraf": "^6.1.2",
     "typescript": "^5.9.3"
   }
 }

04-frameworks/08-nextjs/03-boilerplate/src/core/constants/env.constants.ts

@@ -1,4 +1,4 @@
-export const envConstants = {
+export const ENV = {
   BASE_API_URL: process.env.BASE_API_URL,
   BASE_PICTURES_URL: process.env.BASE_PICTURES_URL,
 };

04-frameworks/08-nextjs/03-boilerplate/src/pods/car-list/api/car-list.api.ts

@@ -1,7 +1,7 @@
-import { envConstants } from '#core/constants';
+import { ENV } from '#core/constants';
 import { Car } from './car-list.api-model';
 
-const url = `${envConstants.BASE_API_URL}/cars`;
+const url = `${ENV.BASE_API_URL}/cars`;
 
 export const getCarList = async (): Promise<Car[]> => {
   return await fetch(url).then((response) => response.json());

04-frameworks/08-nextjs/03-boilerplate/src/pods/car-list/car-list.mappers.ts

@@ -1,5 +1,5 @@
 import { mapToCollection } from '#common/mappers';
-import { envConstants } from '#core/constants';
+import { ENV } from '#core/constants';
 import * as apiModel from './api';
 import * as viewModel from './car-list.vm';
 
@@ -10,6 +10,6 @@ export const mapCarListFromApiToVm = (
 const mapCarFromApiToVm = (car: apiModel.Car): viewModel.Car => ({
   id: car.id,
   name: car.name,
-  imageUrl: `${envConstants.BASE_PICTURES_URL}${car.imageUrl}`,
+  imageUrl: `${ENV.BASE_PICTURES_URL}${car.imageUrl}`,
   isBooked: car.isBooked,
 });

04-frameworks/08-nextjs/03-boilerplate/src/pods/car-list/components/car-item.component.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import Link from 'next/link';
 import { routeConstants } from '#core/constants';
+import Link from 'next/link';
+import React from 'react';
 import { Car } from '../car-list.vm';
 import classes from './car-item.module.css';
 
@@ -25,7 +25,7 @@ export const CarItem: React.FC<Props> = (props) => {
         )}
         <span>{car.name}</span>
       </h2>
-      <img src={car.imageUrl} alt={car.name} />
+      <img className={classes.image} src={car.imageUrl} alt={car.name} />
     </Link>
   );
 };

04-frameworks/08-nextjs/03-boilerplate/src/pods/car-list/components/car-item.module.css

@@ -1,6 +1,4 @@
 .root {
-  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
-    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
   text-decoration: none;
 }
 
@@ -15,3 +13,8 @@
   letter-spacing: 0.01071em;
   color: black;
 }
+
+.image {
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+}

04-frameworks/08-nextjs/03-boilerplate/src/pods/car/api/car.api.ts

@@ -1,7 +1,7 @@
-import { envConstants } from '#core/constants';
+import { ENV } from '#core/constants';
 import { Car } from './car.api-model';
 
-const url = `${envConstants.BASE_API_URL}/cars`;
+const url = `${ENV.BASE_API_URL}/cars`;
 
 export const getCar = async (id: string): Promise<Car> => {
   return await fetch(`${url}/${id}`).then((response) => response.json());

04-frameworks/08-nextjs/03-boilerplate/src/pods/car/car.mappers.ts

@@ -1,4 +1,4 @@
-import { envConstants } from '#core/constants';
+import { ENV } from '#core/constants';
 import * as apiModel from './api';
 import * as viewModel from './car.vm';
 
@@ -7,7 +7,7 @@ export const mapCarFromApiToVm = (car: apiModel.Car): viewModel.Car =>
     ? {
         id: car.id,
         name: car.name,
-        imageUrl: `${envConstants.BASE_PICTURES_URL}${car.imageUrl}`,
+        imageUrl: `${ENV.BASE_PICTURES_URL}${car.imageUrl}`,
         features: car.features,
         isBooked: car.isBooked,
       }
@@ -16,7 +16,7 @@ export const mapCarFromApiToVm = (car: apiModel.Car): viewModel.Car =>
 export const mapCarFromVmToApi = (car: viewModel.Car): apiModel.Car => ({
   id: car.id,
   name: car.name,
-  imageUrl: car.imageUrl.split(envConstants.BASE_PICTURES_URL)[1],
+  imageUrl: car.imageUrl.split(ENV.BASE_PICTURES_URL)[1],
   features: car.features,
   isBooked: car.isBooked,
 });

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

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -21,7 +17,11 @@
       {
         "name": "next"
       }
-    ]
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "#*": ["./src/*"]
+    }
   },
   "include": [
     "next-env.d.ts",
@@ -31,7 +31,5 @@
     "**/*.ts",
     "**/*.tsx"
   ],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules"]
 }

04-frameworks/08-nextjs/04-static-site-generation/README.md

@@ -29,7 +29,7 @@ Pages are generated at build time, it means that it will fetch all necessary dat
 - Recommended whenever possible because it's much faster than having server render the page on every request.
 - The build time will be larger than SSR mode.
 - Only available on `Server Components`.
-- [More about static data fetching](https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic-rendering#static-data-fetching-default)
+- [More about SSG](https://nextjs.org/docs/app/api-reference/file-conventions/route#static-generation-with-generatestaticparams)
 
 We will fetch data from an API (`api-server`), so let's start this server on `start` command:
 
@@ -137,43 +137,6 @@ import classes from './layout.module.css';
 
 ```
 
-Fix the `car details` page:
-
-_./src/app/cars/\[carId\]/page.tsx_
-
-```diff
-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) => {
--   const { params } = props;
-+   const params = await props.params;
-    return (
-      <>
-        <h2>Car detail page</h2>
-        <p>{params.carId}</p>
-      </>
-    );
-  };
-
-export default CarPage;
-
-```
-
 Run in `prod` mode (two terminals):
 
 ```bash
@@ -362,7 +325,7 @@ export const generateMetadata = async (props: Props): Promise<Metadata> => {
 
 > It will fetch the car details data only once.
 >
-> [Automatic fetch request deduping](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#reusing-data-across-multiple-functions)
+> [Automatic fetch request deduping](https://nextjs.org/docs/app/getting-started/fetching-data#deduplicate-requests-and-cache-data)
 
 Run again:
 
@@ -372,7 +335,7 @@ npm run build
 npm run start:prod
 ```
 
-What's if `api-server` has new data, let's use [Incremental Static Regeneration or Revalidating Data](https://nextjs.org/docs/app/building-your-application/data-fetching/revalidating):
+What's if `api-server` has new data, let's use [Incremental Static Regeneration or Revalidating Data](https://nextjs.org/docs/app/guides/incremental-static-regeneration):
 
 _./src/pods/car-list/api/car-list.api.ts_
 
@@ -414,7 +377,7 @@ export default CarListPage;
 
 ```
 
-> It also have other  [on-demand revalidation](https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration#time-based-revalidation) options
+> It also have other [on-demand revalidation](https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration#time-based-revalidation) options
 
 Run again:
 
@@ -471,11 +434,14 @@ BASE_PICTURES_URL=http://localhost:3001
 
 ```
 
-_./next.config.js_
+_./next.config.ts_
 
 ```javascript
-module.exports = {
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
   images: {
+    dangerouslyAllowLocalIP: true, // only for local development
     remotePatterns: [
       {
         hostname: process.env.IMAGES_DOMAIN,
@@ -484,6 +450,7 @@ module.exports = {
   },
 };
 
+export default nextConfig;
 ```
 
 > [Remote Images](https://nextjs.org/docs/app/building-your-application/optimizing/images#remote-images)