fix(deps): Image component

thanks to https://github.com/prismicio/prismic-next/pull/79 for the fix

README.md

@@ -1,5 +1,8 @@
 # Website
 
+## TODO
+- Remove jank to get the image component to work
+
 This repository contains the source code for [our website](https://pretendo.network). All contributions should go in the [dev branch](https://github.com/PretendoNetwork/website/tree/dev).
 
 ### Localization
@@ -15,4 +18,4 @@ Join our Discord:
 
 <a href="https://discord.gg/DThgbba" target="_blank">
     <img src="https://discordapp.com/api/guilds/408718485913468928/widget.png?style=banner3">
-</a>
+</a>

src/components/Hero/Hero.js

@@ -1,4 +1,4 @@
-import Image from 'next/image';
+import ImageFix from '../ImageFix/ImageFix';
 import n2ds from '/public/assets/images/n2ds.png';
 
 import Title from '../Title/Title';
@@ -150,7 +150,7 @@ export default function Hero() {
 						</g>
 					</svg>
 
-					<Image className={styles.n2ds} src={n2ds} alt="" />
+					<ImageFix className={styles.n2ds} src={n2ds} alt="" />
 				</div>
 			</div>
 		</div>

src/components/ImageFix/ImageFix.js

@@ -0,0 +1,12 @@
+import Image from 'next/image';
+
+// stolen from https://github.com/prismicio/prismic-next/pull/79
+
+// TODO: Remove once https://github.com/vercel/next.js/issues/52216 is resolved.
+// `next/image` seems to be affected by a default + named export bundling bug.
+let ImageFix = Image;
+if ('default' in ImageFix) {
+	ImageFix = ImageFix.default;
+}
+
+export default ImageFix;

src/components/ShowcaseSection/ShowcaseSection.js

@@ -1,7 +1,7 @@
 import styles from './ShowcaseSection.module.css';
 
 import classNames from 'classnames';
-import Image from 'next/image';
+import ImageFix from '../ImageFix/ImageFix';
 
 import Section from '../Section/Section';
 import Title from '../Title/Title';
@@ -17,7 +17,7 @@ export default function ShowcaseSection(ctx) {
 				<Title>{title}</Title>
 				<p className={styles.caption}>{caption}</p>
 			</div>
-			<Image src={image} alt="" className={styles.image} quality={100} sizes="(max-width: 840px) 100vw, 700px" />
+			<ImageFix src={image} alt="" className={styles.image} quality={100} sizes="(max-width: 840px) 100vw, 700px" />
 		</Section>
 	);
 }

src/components/TeamCard/TeamCard.js

@@ -1,5 +1,5 @@
 import styles from './TeamCard.module.css';
-import Image from 'next/image';
+import ImageFix from '../ImageFix/ImageFix';
 import Link from 'next/link';
 
 import { Star } from 'phosphor-react';
@@ -34,7 +34,7 @@ export default function TeamCard(ctx) {
 			)}
 		>
 			<div className={styles.imageWrapper}>
-				<Image src={pic} width={110} height={110} alt="" className={styles.image} />
+				<ImageFix src={pic} width={110} height={110} alt="" className={styles.image} />
 			</div>
 			<div className={styles.text}>
 				<h3>{name}</h3>

src/pages/index.js

@@ -11,7 +11,7 @@ import Title from '../components/Title/Title';
 import Section from '../components/Section/Section';
 import ShowcaseSection from '../components/ShowcaseSection/ShowcaseSection';
 
-import Image from 'next/image';
+import ImageFix from '../components/ImageFix/ImageFix';
 
 import styles from './index.module.css';
 
@@ -66,7 +66,7 @@ export default function Home({ locale }) {
 				})}
 
 				<Section className={styles.showcaseTail} contentClassName={styles.content}>
-					<Image
+					<ImageFix
 						src={wiiuchatImage}
 						className={styles.image}
 						alt=""