I'm using a data stored in a file which has a set of apps, I then import it and load them into my AppItemCard component as below

import Apps from '../../../../data/favourites';
import AppItemCard from './AppItemCard';

export default function AppsTools() {
    return (
        <ul className='grid grid-cols-1 justify-items-center md:grid-cols-2 lg:grid-cols-3 gap-4'>
            {Apps.map((app, index) => (
                <li className="col-span-1 w-full h-full" key={index}>
                    <AppItemCard
                        title={app.title}
                        description={app.description}
                        image={`/imgs/favourites/${app.image}`}
                        link={app.url}
                        bgColor={app.bgColor}
                    />
                </li>
            ))}
        </ul>
    );
}

### AppItemCard.jsx

import Image from 'next/image';
import { toBase64 } from '../../../utils/utils';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';

export default function AppItemCard({ title, description, image, link, bgColor }) {
    const AppBgStyle = {
        '--app-item-bg-color': `rgba(${bgColor},0.20)`
    }
    
    return (
        <a href={link} rel="noopener noreferrer" target="_blank" className={`relative h-full min-h-[5rem] rounded-lg grid items-center place-content-center grid-cols-[4.5rem,1fr] gap-4 group py-xs px-sm bg-card/60 supports-backdropFilter:backdrop-blur-md supports-[saturation:180%] border-2 border-font-primary/10 transition-all duration-200 hover:scale-[0.99] hover:border-font-primary/40`}>
            <div className={`w-full h-[4.5rem] flex items-center justify-center rounded-lg bg-[var(--app-item-bg-color)] transition-shadow duration-200 group-hover:shadow-md group-hover:shadow-black/30`} style={AppBgStyle}>
                <Image src={image} 
                       alt={`Logo of ${title}`}
                       width={512}
                       height={512}
                       placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(56, 56))}`}
                       className="w-14 h-14 rounded-lg" />
            </div>

            <div className="h-full flex flex-col justify-evenly">
                <p className="font-bold text-base">{title}</p>
                <p className="text-sm">{description}</p>
            </div>
            
            <FontAwesomeIcon icon={faArrowUpRightFromSquare} className='absolute -top-2 -right-2 origin-center text-xl text-accent/90 opacity-0 scale-90 transition-all duration-250 group-hover:opacity-100 group-hover:scale-100' />
        </a>
    );
}

const shimmer = (w, h) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="g">
      <stop stop-color="#333" offset="20%" />
      <stop stop-color="#222" offset="50%" />
      <stop stop-color="#333" offset="70%" />
    </linearGradient>
  </defs>
  <rect width="${w}" height="${h}" fill="#333" />
  <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
  <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
</svg>`

Now on my PC, NodeJs memory usage goes upto 6-8GB and on Codespace it crashes after a bit. Am I doing something wrong here for the memory to spike up?