Merge pull request #461 from Lemoncode/feature/update-nextjs

Feature/update nextjs

Author: nasdan

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

@@ -18,12 +18,12 @@
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.0",
     "axios": "^1.2.1",
-    "next": "^13.0.7",
+    "next": "^13.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^18.11.17",
+    "@types/node": "^18.11.18",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "cross-env": "^7.0.3",

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

@@ -18,12 +18,12 @@
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.0",
     "axios": "^1.2.1",
-    "next": "^13.0.7",
+    "next": "^13.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^18.11.17",
+    "@types/node": "^18.11.18",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "cross-env": "^7.0.3",

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

@@ -18,13 +18,13 @@
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.0",
     "axios": "^1.2.1",
-    "next": "^13.0.7",
+    "next": "^13.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sharp": "^0.31.2"
   },
   "devDependencies": {
-    "@types/node": "^18.11.17",
+    "@types/node": "^18.11.18",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "cross-env": "^7.0.3",

04-frameworks/08-nextjs/04-static-site-generation/package.json

@@ -19,13 +19,13 @@
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.0",
     "axios": "^1.2.1",
-    "next": "^13.0.7",
+    "next": "^13.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sharp": "^0.31.2"
   },
   "devDependencies": {
-    "@types/node": "^18.11.17",
+    "@types/node": "^18.11.18",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "cross-env": "^7.0.3",

04-frameworks/08-nextjs/05-server-side-rendering/package.json

@@ -19,13 +19,13 @@
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.0",
     "axios": "^1.2.1",
-    "next": "^13.0.7",
+    "next": "^13.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sharp": "^0.31.2"
   },
   "devDependencies": {
-    "@types/node": "^18.11.17",
+    "@types/node": "^18.11.18",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "cross-env": "^7.0.3",

04-frameworks/08-nextjs/06-client-side-rendering/README.md

@@ -18,7 +18,7 @@ If we don't need to pre-render the data and frequently updating data.
 
 - The page is generated on client side.
 - Available on pages and internal components.
-- You can use [SWR](https://swr.vercel.app/) (stale-while-revalidate) or [React query](https://react-query-v3.tanstack.com/) for handle cache
+- You can use [SWR](https://swr.vercel.app/) (stale-while-revalidate) or [React query](https://tanstack.com/query/latest) for handle cache
 
 > SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data
 

04-frameworks/08-nextjs/06-client-side-rendering/package.json

@@ -19,13 +19,13 @@
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.0",
     "axios": "^1.2.1",
-    "next": "^13.0.7",
+    "next": "^13.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sharp": "^0.31.2"
   },
   "devDependencies": {
-    "@types/node": "^18.11.17",
+    "@types/node": "^18.11.18",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "cross-env": "^7.0.3",

04-frameworks/08-nextjs/07-server-components/README.md

@@ -14,8 +14,6 @@ npm install
 
 # Server Components
 
-// TODO: Introduccion
-
 Enable `appDir`:
 
 _./next.config.js_
@@ -207,6 +205,8 @@ export default CarListPage;
 
 ```
 
+Remove previous page `./src/pages/cars.tsx`.
+
 Why it fails? Because all components inside `app` folder are server components by default but if we need to use client hooks such as `useState`, `useEffect`, `React context`, etc we need to mark it as [Client Component](https://beta.nextjs.org/docs/rendering/server-and-client-components#convention):
 
 
@@ -245,8 +245,6 @@ export default CarListPage;
 
 ```
 
-Remove previous page `./src/pages/cars.tsx`.
-
 Why it fails? The error is _You have a Server Component that imports next/router. Use next/navigation instead._ Now, if we need a navigation different than `Link` component we have to use router from [next/navigation](https://beta.nextjs.org/docs/routing/linking-and-navigating#userouter-hook) and it will always be a "client" navigation, [next/router will be legacy](https://beta.nextjs.org/docs/upgrade-guide#step-5-migrating-routing-hooks).
 
 _./app/pods/car-list/components/car-item.component.tsx_

04-frameworks/08-nextjs/07-server-components/app/cars/page.tsx

@@ -6,8 +6,7 @@ import { CarListContainer, api } from '../pods/car-list';
 
 const CarListPage = async () => {
   const carList = await api.getCarList({ cache: 'no-store' });
-  console.log('Car list build time?', { carList });
-
+  console.log('Car list build time', { carList });
   return <CarListContainer carList={carList} />;
 };
 

04-frameworks/08-nextjs/07-server-components/app/pods/car/car.container.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client'
 
 import React from 'react';
 import { useRouter } from 'next/navigation';
@@ -14,7 +14,6 @@ interface Props {
 export const CarContainer: React.FunctionComponent<Props> = (props) => {
   const router = useRouter();
   const car = mapCarFromApiToVm(props.car);
-  
   const handleBook = async () => {
     try {
       const apiCar = mapCarFromVmToApi({ ...car, isBooked: !car.isBooked });

04-frameworks/08-nextjs/07-server-components/package.json

@@ -19,13 +19,13 @@
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.0",
     "axios": "^1.2.1",
-    "next": "13.0.6",
+    "next": "^13.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sharp": "^0.31.2"
   },
   "devDependencies": {
-    "@types/node": "^18.11.17",
+    "@types/node": "^18.11.18",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "cross-env": "^7.0.3",

04-frameworks/08-nextjs/07-server-components/src/layouts/app.layout.module.css

@@ -19,12 +19,12 @@
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.0",
     "axios": "^1.2.1",
-    "next": "^13.0.7",
+    "next": "^13.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^18.11.17",
+    "@types/node": "^18.11.18",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "cross-env": "^7.0.3",

04-frameworks/08-nextjs/07-server-components/src/layouts/app.layout.tsx

@@ -19,12 +19,12 @@
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.0",
     "axios": "^1.2.1",
-    "next": "^13.0.7",
+    "next": "^13.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^18.11.17",
+    "@types/node": "^18.11.18",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "cross-env": "^7.0.3",