Upgrade dependencies and solved warnings nextjs

.eslintrc.js

@@ -20,5 +20,6 @@ module.exports = {
   ],
   rules: {
     'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
+    'no-console': 'off',
   },
 };

next.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  reactStrictMode: true,
+  images: {
+    domains: ['media.tenor.com', 'media1.tenor.com', 'cdn.dribbble.com', 'www.freeiconspng.com', 'www.alura.com.br', 'images.uncyc.org'],
+  },
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "with-styled-components",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "scripts": {
     "dev": "next",
     "build": "next build",
@@ -10,14 +10,14 @@
   },
   "dependencies": {
     "bootstrap": "^5.2.3",
-    "framer-motion": "^9.0.1",
-    "next": "13.1.6",
+    "framer-motion": "^10.16.4",
+    "next": "14.0.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-bootstrap": "^2.7.0",
+    "react-bootstrap": "^2.9.1",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "styled-components": "^5.3.6"
+    "styled-components": "^6.1.0"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^13.1.6",

pages/index.js

@@ -49,7 +49,7 @@ export default function Home() {
 
             <p>{db.description}</p>
 
-            <form onSubmit={function (infosDoEvento) {
+            <form onSubmit={function infoDoEvento(infosDoEvento) {
               infosDoEvento.preventDefault();
               router.push(`/quiz?name=${name}`);
             }}

src/components/Footer/index.js

@@ -1,5 +1,6 @@
 /* eslint-disable react/react-in-jsx-scope */
 import styled from 'styled-components';
+import Image from 'next/image';
 
 // src/components/Footer/index.js
 const FooterWrapper = styled.footer`
@@ -45,7 +46,7 @@ export default function Footer(props) {
     // eslint-disable-next-line react/jsx-props-no-spreading
     <FooterWrapper {...props}>
       <a className="link-alura" href="https://www.alura.com.br/">
-        <img src="https://www.alura.com.br/assets/img/alura-logo-white.1570550707.svg" alt="Logo Alura" />
+        <Image src="https://www.alura.com.br/assets/img/alura-logo-white.1570550707.svg" alt="Logo Alura" />
       </a>
       <p className="text-alura">
         Orgulhosamente criado durante

src/screens/Quiz/index.js

@@ -5,6 +5,8 @@
 /* eslint-disable react/jsx-no-bind */
 import React from 'react';
 import Head from 'next/head';
+import Image from 'next/image';
+import Link from 'next/link';
 import db from '../../../db.json';
 import AlternativesForm from '../../components/AlternativeForm';
 import Widget from '../../components/Widget';
@@ -29,7 +31,7 @@ function ResultWidget({ results }) {
         <p style={{ fontSize: '20px' }}>Resultados</p>
       </Widget.Header>
 
-      <img
+      <Image
         alt="Imagem do Loading"
         style={{
           width: '100%',
@@ -63,7 +65,7 @@ function ResultWidget({ results }) {
             </li>
           ))}
         </ul>
-        <a href="/">Tentar novamente...</a>
+        <Link href="/">Tentar novamente...</Link>
       </Widget.Content>
 
     </Widget>
@@ -78,7 +80,7 @@ function LoadingWidget() {
       </Widget.Header>
 
       <Widget.Content style={{ padding: '0px' }}>
-        <img
+        <Image
           alt="Imagem do Loading"
           style={{
             width: '100%',
@@ -130,7 +132,7 @@ function QuestionWidget({
         </h3>
       </Widget.Header>
 
-      <img
+      <Image
         alt="Descrição"
         style={{
           width: '100%',