Refactoring

src/app/profile/[username]/layout.tsx

@@ -1,9 +1,10 @@
+import { ReactNode } from "react";
+import Image from "next/image";
 import { Button } from "@/modules/common/components/button";
 import { fetchCurrentUser } from "@/modules/features/auth/fetch/fetchCurrentUser";
 import { FollowButton } from "@/modules/features/profile/components/followButton";
 import { fetchProfile } from "@/modules/features/profile/fetch/fetchProfile";
 import { getSession } from "@/utils/auth/session";
-import { ReactNode } from "react";
 import { showEditProfileSettingsButton, showFollowButton } from "./_functions";
 
 type Props = {
@@ -23,7 +24,7 @@ const Layout = async ({ children, params }: Props) => {
         <div className="container">
           <div className="row">
             <div className="col-xs-12 col-md-10 offset-md-1">
-              {profile.image && <img src={profile.image} className="user-img" alt="" />}
+              {profile.image && <Image src={profile.image} className="user-img" alt="" />}
               <h4>{profile.username}</h4>
               {profile.bio && <p>{profile.bio}</p>}
               {showFollowButton(profile.username, currentUser) && <FollowButton {...profile} color="secondary" />}