chore(deps): Update to next 13 and react 18

components/atoms/Artwork/Artwork.tsx

@@ -18,6 +18,7 @@ import {
 
 export const Artwork: ArtworkComponent = memo(
   function ArtworkComponentMemo({
+    alt,
     className,
     height = 512,
     isSquare = true,
@@ -26,7 +27,6 @@ export const Artwork: ArtworkComponent = memo(
     src,
     subtitle,
     width = 512,
-    ...props
   }) {
     const [failedToLoad, setFailedToLoad] = useState(false);
     const squareClassName = useClassNames(square, className);
@@ -46,12 +46,12 @@ export const Artwork: ArtworkComponent = memo(
     const imageOrPlaceholder = shouldShowImage ? (
       <Box
         as={Image}
+        alt={alt}
         className={artworkClassName}
         height={height}
         onError={handleError}
         src={src}
         width={width}
-        {...props}
       />
     ) : (
       <Typography

components/atoms/LinkStack/LinkStack.tsx

@@ -1,13 +1,13 @@
+import Link, { LinkProps } from 'next/link';
 import type { FunctionComponent } from 'react';
 
-import { Link } from 'components/atoms/Link';
 import { Stack } from 'components/layouts/Stack';
 import { useClassNames } from 'hooks/useClassNames';
-import type { ILinkProps, StackProps } from 'types';
+import type { StackProps } from 'types';
 
 import { linkStackClassName } from './linkStack.css';
 
-type LinkStackProps = (StackProps & ILinkProps) | StackProps;
+type LinkStackProps = (StackProps & LinkProps) | StackProps;
 
 /**
  * Allows all properties of both `Link` and `Stack`. Helpful when showing

components/molecules/Footer/Footer.tsx

@@ -1,5 +1,6 @@
+import Link from 'next/link';
+
 import { ExternalLink } from 'components/atoms/ExternalLink';
-import { Link } from 'components/atoms/Link';
 import { Typography } from 'components/atoms/Typography';
 import { Stack } from 'components/layouts/Stack';
 

components/molecules/Header/Header.tsx

@@ -1,8 +1,8 @@
+import Link from 'next/link';
 import { useRouter } from 'next/router';
 import type { FunctionComponent } from 'react';
 
 import { Icon } from 'components/atoms/Icon';
-import { Link } from 'components/atoms/Link';
 import { Typography } from 'components/atoms/Typography';
 import { Stack } from 'components/layouts/Stack';
 import LogoIcon from 'icons/logo.svg';
@@ -70,11 +70,12 @@ export const Header: FunctionComponent<IHeaderProps> = ({
         shouldUseCapsize={false}
       >
         <Link
-          anchorProps={{ 'aria-label': 'Pod Monster' }}
+          passHref={true}
+          aria-label="Pod Monster"
           href="/"
           className={homeLinkClassName}
         >
-          <Icon size="large">
+          <Icon size="large" aria-hidden="true">
             <LogoIcon className={homeIconClassName} />
           </Icon>
           {isAppNameHidden ? null : 'Pod Monster'}

components/molecules/SubscriptionItem/SubscriptionItem.tsx

@@ -1,9 +1,9 @@
+import Link from 'next/link';
 import type { ApiResponse } from 'podcastdx-client/src/types';
 import { useQuery } from 'react-query';
 
 import { Artwork } from 'components/atoms/Artwork';
 import { Dot } from 'components/atoms/Dot';
-import { Link } from 'components/atoms/Link';
 import { Typography } from 'components/atoms/Typography';
 import { Stack } from 'components/layouts/Stack';
 import { useSettingsContext } from 'contexts/SettingsContext';

components/organisms/MediaPlayer/MediaPlayer.tsx

@@ -1,4 +1,5 @@
 import { AnimatePresence, m } from 'framer-motion';
+import Link from 'next/link';
 import { useRouter } from 'next/router';
 import {
   FunctionComponent,
@@ -11,7 +12,6 @@ import {
 import { Artwork } from 'components/atoms/Artwork';
 import { Icon } from 'components/atoms/Icon';
 import { IconButton } from 'components/atoms/IconButton';
-import { Link } from 'components/atoms/Link';
 import { PlayPauseIcon } from 'components/atoms/PlayPauseIcon';
 import { Range } from 'components/atoms/Range';
 import { Typography } from 'components/atoms/Typography';
@@ -292,10 +292,8 @@ export const MediaPlayer: FunctionComponent = () => {
                         <Link
                           className={underlinedLink}
                           href={getEpisodePath({ episodeId, feedId })}
-                          anchorProps={{
-                            onClick: () => {
-                              setSize(1);
-                            },
+                          onClick={() => {
+                            setSize(1);
                           }}
                         >
                           {episodeTitle}
@@ -314,10 +312,8 @@ export const MediaPlayer: FunctionComponent = () => {
                     >
                       {currentChapter?.url ? (
                         <Link
-                          anchorProps={{
-                            rel: 'noreferrer noopener',
-                            target: '_blank',
-                          }}
+                          rel="noreferrer noopener"
+                          target="_blank"
                           className={underlinedLink}
                           href={currentChapter?.url}
                         >

contexts/MediaContext.tsx

@@ -205,17 +205,17 @@ export const MediaProvider: FunctionComponent<PropsWithChildren<unknown>> = ({
   }, []);
 
   const seekBackward = useCallback(
-    ({ seekOffset }) => {
-      const resultTime = mediaPlayerCurrentTime - seekOffset;
+    ({ seekOffset }: Partial<MediaSessionActionDetails>) => {
+      const resultTime = mediaPlayerCurrentTime - (seekOffset ?? 0);
 
       setCurrentTime(resultTime);
     },
     [mediaPlayerCurrentTime]
   );
 
   const seekForward = useCallback(
-    ({ seekOffset }) => {
-      const resultTime = mediaPlayerCurrentTime + seekOffset;
+    ({ seekOffset }: Partial<MediaSessionActionDetails>) => {
+      const resultTime = mediaPlayerCurrentTime + (seekOffset ?? 0);
 
       setCurrentTime(resultTime);
     },

next.config.js

@@ -19,9 +19,6 @@ const nextConfig = {
   },
   productionBrowserSourceMaps: true,
   reactStrictMode: true,
-  svgrOptions: {
-    icon: true,
-  },
 };
 
 module.exports = withSentryConfig(