build(deps): bump Next.js to v13

components/ErrorPage.tsx

@@ -30,10 +30,11 @@ export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
           </h1>
           <p className='text-center text-lg'>
             {message}{' '}
-            <Link href='/'>
-              <a className='text-yellow hover:underline dark:text-yellow-dark'>
-                {t('errors:return-to-home-page')}
-              </a>
+            <Link
+              href='/'
+              className='text-yellow hover:underline dark:text-yellow-dark'
+            >
+              {t('errors:return-to-home-page')}
             </Link>
           </p>
         </main>

components/Footer.tsx

@@ -17,10 +17,11 @@ export const Footer: React.FC<FooterProps> = (props) => {
   return (
     <footer className='flex flex-col items-center justify-center border-t-2 border-gray-600 bg-white py-6 text-lg dark:border-gray-400 dark:bg-black'>
       <p>
-        <Link href='/'>
-          <a className='text-yellow hover:underline dark:text-yellow-dark'>
-            Divlo
-          </a>
+        <Link
+          href='/'
+          className='text-yellow hover:underline dark:text-yellow-dark'
+        >
+          Divlo
         </Link>{' '}
         | {t('common:all-rights-reserved')}
       </p>

components/Header/index.tsx

@@ -14,30 +14,27 @@ export const Header: React.FC<HeaderProps> = (props) => {
   return (
     <header className='sticky top-0 z-50 flex w-full justify-between border-b-2 border-gray-600 bg-white px-6 py-2 dark:border-gray-400 dark:bg-black'>
       <Link href='/'>
-        <a>
-          <div className='flex items-center justify-center'>
-            <Image
-              quality={100}
-              width={60}
-              height={60}
-              src='/images/divlo_icon_small.png'
-              alt='Divlo'
-            />
-            <strong className='ml-1 hidden font-headline font-semibold text-yellow dark:text-yellow-dark xs:block'>
-              Divlo
-            </strong>
-          </div>
-        </a>
+        <div className='flex items-center justify-center'>
+          <Image
+            quality={100}
+            width={60}
+            height={60}
+            src='/images/divlo_icon_small.png'
+            alt='Divlo'
+          />
+          <strong className='ml-1 hidden font-headline font-semibold text-yellow dark:text-yellow-dark xs:block'>
+            Divlo
+          </strong>
+        </div>
       </Link>
       <div className='flex justify-between'>
         <div className='flex flex-col items-center justify-center px-6'>
-          <Link href='/blog'>
-            <a
-              data-cy='header-blog-link'
-              className='text-yellow hover:underline dark:text-yellow-dark'
-            >
-              Blog
-            </a>
+          <Link
+            href='/blog'
+            data-cy='header-blog-link'
+            className='text-yellow hover:underline dark:text-yellow-dark'
+          >
+            Blog
           </Link>
         </div>
         {showLanguage && <Language />}

components/Portfolio/PortfolioItem.tsx

@@ -24,7 +24,7 @@ export const PortfolioItem: React.FC<PortfolioItemProps> = (props) => {
         <div className='flex justify-center'>
           <Image
             quality={100}
-            className='transition-opacity duration-500 group-hover:opacity-20 dark:group-hover:opacity-5'
+            className='h-auto w-auto transition-opacity duration-500 group-hover:opacity-20 dark:group-hover:opacity-5'
             width={300}
             height={300}
             src={image}

components/Profile/ProfileLogo.tsx

@@ -5,7 +5,7 @@ import DivloLogo from 'public/images/divlo_logo.png'
 export const ProfileLogo: React.FC = () => {
   return (
     <div className='max-h-[370px] max-w-[370px] px-2 py-6'>
-      <Image quality={100} src={DivloLogo} alt='Divlo' />
+      <Image quality={100} src={DivloLogo} alt='Divlo' priority />
     </div>
   )
 }

components/Skills/Skill.tsx

@@ -32,7 +32,14 @@ export const SkillComponent: React.FC<SkillComponentProps> = (props) => {
       rel='noopener noreferrer'
     >
       <div className='text-center'>
-        <Image quality={100} width={60} height={60} alt={skill} src={image} />
+        <Image
+          className='inline h-auto w-auto'
+          quality={100}
+          width={60}
+          height={60}
+          alt={skill}
+          src={image}
+        />
         <p className='mt-1'>{skill}</p>
       </div>
     </a>