fix: revert next 13 update

The update causes problems with the emoji picker in the production build

Revert "fix: Fix sign-in-button cypress tests"
Revert "chore(deps): update nextjs monorepo to v13"
Revert "fix: Remove anchor hack from internal-link"
Revert "fix: Remove a tag childs from NextJS link components"

This reverts commit f2ae04743a.
This reverts commit a7fd14a3
This reverts commit 6d30448157.
This reverts commit 7f7f020d91.

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

src/components/common/links/internal-link.tsx

@@ -31,12 +31,14 @@ export const InternalLink: React.FC<LinkWithTextProps> = ({
   title
 }) => {
   return (
-    <Link href={href} className={className} id={id} title={title}>
-      <ShowIf condition={!!icon}>
-        <ForkAwesomeIcon icon={icon as IconName} fixedWidth={true} />
-        &nbsp;
-      </ShowIf>
-      {text}
+    <Link href={href}>
+      <a className={className} id={id} title={title}>
+        <ShowIf condition={!!icon}>
+          <ForkAwesomeIcon icon={icon as IconName} fixedWidth={true} />
+          &nbsp;
+        </ShowIf>
+        {text}
+      </a>
     </Link>
   )
 }

src/components/common/redirect.tsx

@@ -32,7 +32,10 @@ export const Redirect: React.FC<RedirectProps> = ({ to }) => {
 
   return (
     <span {...testId('redirect')}>
-      Redirecting to <Link href={to}>{to}</Link>
+      Redirecting to{' '}
+      <Link href={to}>
+        <a>{to}</a>
+      </Link>
     </span>
   )
 }

src/components/editor-page/app-bar/navbar-branding.tsx

@@ -23,12 +23,14 @@ export const NavbarBranding: React.FC = () => {
 
   return (
     <Navbar.Brand>
-      <Link href='/intro' className='text-secondary text-decoration-none d-flex align-items-center'>
-        <HedgeDocLogoWithText
-          logoType={darkModeActivated ? HedgeDocLogoType.WB_HORIZONTAL : HedgeDocLogoType.BW_HORIZONTAL}
-          size={HedgeDocLogoSize.SMALL}
-        />
-        <Branding inline={true} />
+      <Link href='/intro'>
+        <a className='text-secondary text-decoration-none d-flex align-items-center'>
+          <HedgeDocLogoWithText
+            logoType={darkModeActivated ? HedgeDocLogoType.WB_HORIZONTAL : HedgeDocLogoType.BW_HORIZONTAL}
+            size={HedgeDocLogoSize.SMALL}
+          />
+          <Branding inline={true} />
+        </a>
       </Link>
     </Navbar.Brand>
   )

src/components/editor-page/app-bar/read-only-mode-button.tsx

@@ -19,14 +19,16 @@ export const ReadOnlyModeButton: React.FC = () => {
   const noteIdentifier = useApplicationState((state) => state.noteDetails.primaryAddress)
 
   return (
-    <Link href={`/s/${noteIdentifier}`} target='_blank'>
-      <Button
-        title={t('editor.documentBar.readOnlyMode')}
-        className='ms-2 text-secondary'
-        size='sm'
-        variant='outline-light'>
-        <ForkAwesomeIcon icon='file-text-o' />
-      </Button>
+    <Link href={`/s/${noteIdentifier}`}>
+      <a target='_blank'>
+        <Button
+          title={t('editor.documentBar.readOnlyMode')}
+          className='ms-2 text-secondary'
+          size='sm'
+          variant='outline-light'>
+          <ForkAwesomeIcon icon='file-text-o' />
+        </Button>
+      </a>
     </Link>
   )
 }

src/components/editor-page/app-bar/slide-mode-button.tsx

@@ -19,14 +19,16 @@ export const SlideModeButton: React.FC = () => {
   const noteIdentifier = useApplicationState((state) => state.noteDetails.primaryAddress)
 
   return (
-    <Link href={`/p/${noteIdentifier}`} target='_blank'>
-      <Button
-        title={t('editor.documentBar.slideMode')}
-        className='ms-2 text-secondary'
-        size='sm'
-        variant='outline-light'>
-        <ForkAwesomeIcon icon='television' />
-      </Button>
+    <Link href={`/p/${noteIdentifier}`}>
+      <a target='_blank'>
+        <Button
+          title={t('editor.documentBar.slideMode')}
+          className='ms-2 text-secondary'
+          size='sm'
+          variant='outline-light'>
+          <ForkAwesomeIcon icon='television' />
+        </Button>
+      </a>
     </Link>
   )
 }

src/components/history-page/history-card/history-card.tsx

@@ -64,20 +64,22 @@ export const HistoryCard: React.FC<HistoryEntryProps & HistoryEventHandlers> = (
           <div className={'d-flex flex-column'}>
             <PinButton isDark={false} isPinned={entry.pinStatus} onPinClick={onPinEntry} />
           </div>
-          <Link href={`/n/${entry.identifier}`} className='text-decoration-none flex-fill text-dark'>
-            <div className={'d-flex flex-column justify-content-between'}>
-              <Card.Title className='m-0 mt-1dot5' {...cypressId('history-entry-title')}>
-                {entryTitle}
-              </Card.Title>
-              <div>
-                <div className='text-black-50 mt-2'>
-                  <ForkAwesomeIcon icon='clock-o' /> {DateTime.fromISO(entry.lastVisitedAt).toRelative()}
-                  <br />
-                  {lastVisited}
+          <Link href={`/n/${entry.identifier}`}>
+            <a className='text-decoration-none flex-fill text-dark'>
+              <div className={'d-flex flex-column justify-content-between'}>
+                <Card.Title className='m-0 mt-1dot5' {...cypressId('history-entry-title')}>
+                  {entryTitle}
+                </Card.Title>
+                <div>
+                  <div className='text-black-50 mt-2'>
+                    <ForkAwesomeIcon icon='clock-o' /> {DateTime.fromISO(entry.lastVisitedAt).toRelative()}
+                    <br />
+                    {lastVisited}
+                  </div>
+                  <div className={`${styles['card-footer-min-height']} p-0`}>{tags}</div>
                 </div>
-                <div className={`${styles['card-footer-min-height']} p-0`}>{tags}</div>
               </div>
-            </div>
+            </a>
           </Link>
           <div className={'d-flex flex-column'}>
             <EntryMenu

src/components/history-page/history-table/history-table-row.tsx

@@ -45,8 +45,10 @@ export const HistoryTableRow: React.FC<HistoryEntryProps & HistoryEventHandlers>
   return (
     <tr>
       <td>
-        <Link href={`/n/${entry.identifier}`} className='text-light' {...cypressId('history-entry-title')}>
-          {entryTitle}
+        <Link href={`/n/${entry.identifier}`}>
+          <a className='text-light' {...cypressId('history-entry-title')}>
+            {entryTitle}
+          </a>
         </Link>
       </td>
       <td>{formatHistoryDate(entry.lastVisitedAt)}</td>

src/components/landing-layout/navigation/header-bar/header-nav-link.tsx

@@ -33,8 +33,10 @@ export const HeaderNavLink: React.FC<PropsWithChildren<HeaderNavLinkProps>> = ({
 
   return (
     <Nav.Item>
-      <Link href={to} className={`nav-link text-light ${activeClass} ${styles['nav-link']}`} {...cypressId(props)}>
-        {children}
+      <Link href={to} passHref={true}>
+        <a className={`nav-link text-light ${activeClass} ${styles['nav-link']}`} href={to} {...cypressId(props)}>
+          {children}
+        </a>
       </Link>
     </Nav.Item>
   )

src/components/landing-layout/navigation/sign-in-button.tsx

@@ -39,8 +39,8 @@ export const SignInButton: React.FC<SignInButtonProps> = ({ variant, ...props })
 
   return (
     <ShowIf condition={authProviders.length > 0}>
-      <Link href={loginLink} passHref={true} {...cypressId('sign-in-button')}>
-        <Button title={t('login.signIn')} variant={variant || 'success'} {...props}>
+      <Link href={loginLink} passHref={true}>
+        <Button title={t('login.signIn')} {...cypressId('sign-in-button')} variant={variant || 'success'} {...props}>
           <Trans i18nKey='login.signIn' />
         </Button>
       </Link>