perf: next/image

components/cards/profile-card/ProfileCard.jsx

@@ -1,16 +1,16 @@
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
-import CardMedia from '@mui/material/CardMedia';
 import Typography from '@mui/material/Typography';
+import Image from 'next/image';
 
 const ProfileCard = ({ profileData }) => {
   return (
-    <Card sx={{ maxWidth: 345, marginX: 'auto', marginY: 25, boxShadow: 10 }}>
-      <CardMedia
-        component="img"
-        height="140"
-        image="https://www.business2community.com/wp-content/uploads/2017/08/blank-profile-picture-973460_640.png"
-        alt="green iguana"
+    <Card sx={{ maxWidth: 345, marginX: 'auto', marginY: 10, boxShadow: 10 }}>
+      <Image
+        src="https://www.business2community.com/wp-content/uploads/2017/08/blank-profile-picture-973460_640.png"
+        alt="profile picture"
+        width={600}
+        height={500}
       />
       <CardContent>
         <Typography gutterBottom variant="h5" component="div">

components/layout/navbar/Navbar.jsx

@@ -1,7 +1,6 @@
 import AdbIcon from '@mui/icons-material/Adb';
 import MenuIcon from '@mui/icons-material/Menu';
 import AppBar from '@mui/material/AppBar';
-import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Container from '@mui/material/Container';
@@ -12,6 +11,7 @@ import Toolbar from '@mui/material/Toolbar';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { signOut, useSession } from 'next-auth/react';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useState } from 'react';
 import { LOGIN_PAGE, PROFILE_PAGE } from '../../../constants/pages';
@@ -42,7 +42,6 @@ const Navbar = () => {
     signOut();
   }
 
-  console.log(session);
   return (
     <AppBar position="static">
       <Container maxWidth="xl">
@@ -136,9 +135,12 @@ const Navbar = () => {
               <>
                 <Tooltip title="Open settings">
                   <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
-                    <Avatar
-                      alt="Profile picture"
+                    <Image
                       src="https://www.business2community.com/wp-content/uploads/2017/08/blank-profile-picture-973460_640.png"
+                      alt="profile picture"
+                      width={40}
+                      height={40}
+                      style={{ borderRadius: '50%' }}
                     />
                   </IconButton>
                 </Tooltip>

next.config.js

@@ -2,6 +2,9 @@
 const { i18n } = require('./next-i18next.config');
 
 const nextConfig = {
+  images: {
+    domains: ['www.business2community.com'],
+  },
   reactStrictMode: true,
   swcMinify: true,
   i18n,