migrate to new next/link

packages/app/src/components/Admin/Common/AdminNavigation.jsx

@@ -55,13 +55,11 @@ const AdminNavigation = (props) => {
     const href = isRoot ? '/admin' : urljoin('/admin', menu);
 
     return (
-      <Link href={href}>
-        <a
-          href={href}
-          className={`${pageTransitionClassName} ${isActive ? 'active' : ''}`}
-        >
-          <MenuLabel menu={menu} />
-        </a>
+      <Link
+        href={href}
+        className={`${pageTransitionClassName} ${isActive ? 'active' : ''}`}
+      >
+        <MenuLabel menu={menu} />
       </Link>
     );
   };

packages/app/src/components/Admin/ManageExternalAccount.tsx

@@ -46,32 +46,32 @@ const ManageExternalAccount = (props: ManageExternalAccountProps): JSX.Element =
     />
   );
 
-  return (
-    <>
-      <p>
-        <Link href="/admin/users" prefetch={false}>
-          <a className="btn btn-outline-secondary">
-            <i className="icon-fw ti ti-arrow-left" aria-hidden="true"></i>
-            {t('admin:user_management.back_to_user_management')}
-          </a>
-        </Link>
-      </p>
-      <h2>{t('admin:user_management.external_account_list')}</h2>
-      {(totalAccounts !== 0) ? (
+  return <>
+    <p>
+      <Link
+        href="/admin/users"
+        prefetch={false}
+        className="btn btn-outline-secondary"
+      >
+        <i className="icon-fw ti ti-arrow-left" aria-hidden="true"></i>
+        {t('admin:user_management.back_to_user_management')}
+      </Link>
+    </p>
+    <h2>{t('admin:user_management.external_account_list')}</h2>
+    {(totalAccounts !== 0) ? (
+      <>
+        {pager}
+        <ExternalAccountTable />
+        {pager}
+      </>
+    )
+      : (
         <>
-          {pager}
-          <ExternalAccountTable />
-          {pager}
+          { t('admin:user_management.external_account_none') }
         </>
       )
-        : (
-          <>
-            { t('admin:user_management.external_account_none') }
-          </>
-        )
-      }
-    </>
-  );
+    }
+  </>;
 };
 
 const ManageExternalAccountWrapper = withUnstatedContainers(ManageExternalAccount, [AdminExternalAccountsContainer]);

packages/app/src/components/Admin/PluginsExtension/PluginCard.tsx

@@ -105,7 +105,7 @@ export const PluginCard = (props: Props): JSX.Element => {
         <div className="row mb-3">
           <div className="col-9">
             <h2 className="card-title h3 border-bottom pb-2 mb-3">
-              <Link href={`${url}`}>{name}</Link>
+              <Link href={`${url}`} legacyBehavior>{name}</Link>
             </h2>
             <p className="card-text text-muted">{desc}</p>
           </div>

packages/app/src/components/Admin/Security/SecurityManagementContents.jsx

@@ -84,10 +84,11 @@ const SecurityManagementContents = () => {
       <div className="mb-5">
         <h2 className="border-bottom">{t('security_settings.xss_prevent_setting')}</h2>
         <div className="text-center">
-          <Link href="/admin/markdown/#preventXSS" prefetch={false}>
-            <a style={{ fontSize: 'large' }}>
-              <i className="fa-fw icon-login"></i> {t('security_settings.xss_prevent_setting_link')}
-            </a>
+          <Link
+            href="/admin/markdown/#preventXSS"
+            style={{ fontSize: 'large' }}
+          >
+            <i className="fa-fw icon-login"></i> {t('security_settings.xss_prevent_setting_link')}
           </Link>
         </div>
       </div>

packages/app/src/components/Admin/UserGroupDetail/UserGroupDetailPage.tsx

@@ -329,7 +329,7 @@ const UserGroupDetailPage = (props: Props): JSX.Element => {
         <ol className="breadcrumb">
           <li className="breadcrumb-item">
             <Link href="/admin/user-groups" prefetch={false}>
-              <a >{t('user_group_management.group_list')}</a>
+              {t('user_group_management.group_list')}
             </Link>
           </li>
           {
@@ -343,7 +343,7 @@ const UserGroupDetailPage = (props: Props): JSX.Element => {
                   <span>{ancestorUserGroup.name}</span>
                 ) : (
                   <Link href={`/admin/user-group-detail/${ancestorUserGroup._id}`} prefetch={false}>
-                    <a href={`/admin/user-group-detail/${ancestorUserGroup._id}`}>{ancestorUserGroup.name}</a>
+                    {ancestorUserGroup.name}
                   </Link>
                 ) }
               </li>

packages/app/src/components/Admin/UserManagement.tsx

@@ -123,11 +123,13 @@ const UserManagement = (props: UserManagementProps) => {
       ) }
       <p>
         <InviteUserControl />
-        <Link href="/admin/users/external-accounts" prefetch={false}>
-          <a className="btn btn-outline-secondary ml-2" role="button">
-            <i className="icon-user-follow mr-1" aria-hidden="true"></i>
-            {t('admin:user_management.external_account')}
-          </a>
+        <Link
+          href="/admin/users/external-accounts"
+          className="btn btn-outline-secondary ml-2"
+          role="button"
+        >
+          <i className="icon-user-follow mr-1" aria-hidden="true"></i>
+          {t('admin:user_management.external_account')}
         </Link>
       </p>
 

packages/app/src/components/Navbar/AuthorInfo.tsx

@@ -33,7 +33,7 @@ export const AuthorInfo = (props: AuthorInfoProps): JSX.Element => {
   const userLabel = user != null
     ? (
       <Link href={userPageRoot(user)} prefetch={false}>
-        <a>{user.name}</a>
+        {user.name}
       </Link>
     )
     : <i>Unknown</i>;

packages/app/src/components/Navbar/GrowiNavbar.tsx

@@ -154,10 +154,8 @@ export const GrowiNavbar = (props: Props): JSX.Element => {
     <nav id="grw-navbar" className={`navbar grw-navbar ${styles['grw-navbar']} navbar-expand navbar-dark sticky-top mb-0 px-0`}>
       {/* Brand Logo  */}
       <div className="navbar-brand mr-0">
-        <Link href="/" prefetch={false}>
-          <a className="grw-logo d-block">
-            <GrowiNavbarLogo isDefaultLogo={isDefaultLogo} />
-          </a>
+        <Link href="/" className="grw-logo d-block">
+          <GrowiNavbarLogo isDefaultLogo={isDefaultLogo} />
         </Link>
       </div>
 

packages/app/src/components/Navbar/PersonalDropdown.jsx

@@ -54,15 +54,19 @@ const PersonalDropdown = () => {
           </div>
 
           <div className="btn-group btn-block mt-2" role="group">
-            <Link href={`/user/${user.username}`}>
-              <a className="btn btn-sm btn-outline-secondary col" data-testid="grw-personal-dropdown-menu-user-home">
-                <i className="icon-fw icon-home"></i>{t('personal_dropdown.home')}
-              </a>
+            <Link
+              href={`/user/${user.username}`}
+              className="btn btn-sm btn-outline-secondary col"
+              data-testid="grw-personal-dropdown-menu-user-home"
+            >
+              <i className="icon-fw icon-home"></i>{t('personal_dropdown.home')}
             </Link>
-            <Link href="/me">
-              <a className="btn btn-sm btn-outline-secondary col" data-testid="grw-personal-dropdown-menu-user-settings">
-                <i className="icon-fw icon-wrench"></i>{t('personal_dropdown.settings')}
-              </a>
+            <Link
+              href="/me"
+              className="btn btn-sm btn-outline-secondary col"
+              data-testid="grw-personal-dropdown-menu-user-settings"
+            >
+              <i className="icon-fw icon-wrench"></i>{t('personal_dropdown.settings')}
             </Link>
           </div>
         </div>

packages/app/src/components/PageAlert/OldRevisionAlert.tsx

@@ -22,7 +22,7 @@ export const OldRevisionAlert = (): JSX.Element => {
     <div className="alert alert-warning">
       <strong>{t('Warning')}: </strong> {t('page_page.notice.version')}
       <Link href={returnPathForURL(page.path, page._id)}>
-        <a><i className="icon-fw icon-arrow-right-circle"></i>{t('Show latest')}</a>
+        <i className="icon-fw icon-arrow-right-circle"></i>{t('Show latest')}
       </Link>
     </div>
   );

packages/app/src/components/PageComment/Comment.tsx

@@ -163,9 +163,7 @@ export const Comment = (props: CommentProps): JSX.Element => {
             <div className="page-comment-body">{commentBody}</div>
             <div className="page-comment-meta">
               <Link href={`#${commentId}`} prefetch={false}>
-                <a>
-                  <FormattedDistanceDate id={commentId} date={comment.createdAt} />
-                </a>
+                <FormattedDistanceDate id={commentId} date={comment.createdAt} />
               </Link>
               { isEdited && (
                 <>
@@ -174,10 +172,13 @@ export const Comment = (props: CommentProps): JSX.Element => {
                 </>
               ) }
               <span className="ml-2">
-                <Link href={urljoin(returnPathForURL(pagePath, pageId), revHref)} prefetch={false}>
-                  <a id={`page-comment-revision-${commentId}`} className="page-comment-revision">
-                    <HistoryIcon />
-                  </a>
+                <Link
+                  id={`page-comment-revision-${commentId}`}
+                  href={urljoin(returnPathForURL(pagePath, pageId), revHref)}
+                  className="page-comment-revision"
+                  prefetch={false}
+                >
+                  <HistoryIcon />
                 </Link>
                 <UncontrolledTooltip placement="bottom" fade={false} target={`page-comment-revision-${commentId}`}>
                   {t('page_comment.display_the_page_when_posting_this_comment')}

packages/app/src/components/PageEditorByHackmd.tsx

@@ -364,7 +364,7 @@ export const PageEditorByHackmd = (): JSX.Element => {
                 {t('hackmd.based_on_revision')} 
                 { pageData != null && (
                   <Link href={urljoin(returnPathForURL(pageData.path, pageData._id), `?revisionId=${revisionIdHackmdSynced}`)} prefetch={false}>
-                    <a><span className="badge badge-secondary">{revisionIdHackmdSynced?.substr(-8)}</span></a>
+                    <span className="badge badge-secondary">{revisionIdHackmdSynced?.substr(-8)}</span>
                   </Link>
                 )}
                 <div className="text-center mt-3">

packages/app/src/components/PageHistory/Revision.tsx

@@ -69,10 +69,13 @@ export const Revision = (props: RevisionProps): JSX.Element => {
           <div className="mb-1">
             <UserDate dateTime={revision.createdAt} />
             <br className="d-xl-none d-block" />
-            <Link href={urljoin(returnPathForURL(currentPagePath, currentPageId), `?revisionId=${revision._id}`)} prefetch={false}>
-              <a className="ml-xl-3" onClick={onClose}>
-                <i className="icon-login"></i> {t('Go to this version')}
-              </a>
+            <Link
+              href={urljoin(returnPathForURL(currentPagePath, currentPageId), `?revisionId=${revision._id}`)}
+              className="ml-xl-3"
+              onClick={onClose}
+              prefetch={false}
+            >
+              <i className="icon-login"></i> {t('Go to this version')}
             </Link>
           </div>
         </div>

packages/app/src/components/PageHistory/RevisionDiff.tsx

@@ -55,18 +55,24 @@ export const RevisionDiff = (props: RevisioinDiffProps): JSX.Element => {
           <div className="row">
             <div className="col comparison-source-wrapper pt-1 px-0">
               <span className="comparison-source pr-3">{t('page_history.comparing_source')}</span><UserDate dateTime={previousRevision.createdAt} />
-              <Link href={urljoin(returnPathForURL(currentPagePath, currentPageId), `?revisionId=${previousRevision._id}`)}>
-                <a className="ml-3" onClick={onClose}>
-                  <i className="icon-login"></i>
-                </a>
+              <Link
+                href={urljoin(returnPathForURL(currentPagePath, currentPageId), `?revisionId=${previousRevision._id}`)}
+                className="ml-3"
+                onClick={onClose}
+                prefetch={false}
+              >
+                <i className="icon-login"></i>
               </Link>
             </div>
             <div className="col comparison-target-wrapper pt-1">
               <span className="comparison-target pr-3">{t('page_history.comparing_target')}</span><UserDate dateTime={currentRevision.createdAt} />
-              <Link href={urljoin(returnPathForURL(currentPagePath, currentPageId), `?revisionId=${currentRevision._id}`)}>
-                <a className="ml-3" onClick={onClose}>
-                  <i className="icon-login"></i>
-                </a>
+              <Link
+                href={urljoin(returnPathForURL(currentPagePath, currentPageId), `?revisionId=${currentRevision._id}`)}
+                className="ml-3"
+                onClick={onClose}
+                prefetch={false}
+              >
+                <i className="icon-login"></i>
               </Link>
             </div>
           </div>

packages/app/src/components/PageList/PageListItemL.tsx

@@ -221,7 +221,10 @@ const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (pr
                 <span className="h5 mb-0">
                   {/* Use permanent links to care for pages with the same name (Cannot use page path url) */}
                   <span className="grw-page-path-hierarchical-link text-break">
-                    <Link href={returnPathForURL(pageData.path, pageData._id)} prefetch={false}>
+                    <Link legacyBehavior
+                      href={returnPathForURL(pageData.path, pageData._id)}
+                      prefetch={false}
+                    >
                       {shouldDangerouslySetInnerHTMLForPaths
                         ? (
                           <a

packages/app/src/components/PagePathHierarchicalLink.tsx

@@ -40,7 +40,7 @@ const PagePathHierarchicalLink = memo((props: PagePathHierarchicalLinkProps): JS
         <RootElm>
           <span className="path-segment">
             <Link href="/trash" prefetch={false}>
-              <a ><i className="icon-trash"></i></a>
+              <i className="icon-trash"></i>
             </Link>
           </span>
           <span className="separator"><a href="/">/</a></span>
@@ -50,10 +50,8 @@ const PagePathHierarchicalLink = memo((props: PagePathHierarchicalLinkProps): JS
         <RootElm>
           <span className="path-segment">
             <Link href="/" prefetch={false}>
-              <a >
-                <i className="icon-home"></i>
-                <span className="separator">/</span>
-              </a>
+              <i className="icon-home"></i>
+              <span className="separator">/</span>
             </Link>
           </span>
         </RootElm>
@@ -83,7 +81,7 @@ const PagePathHierarchicalLink = memo((props: PagePathHierarchicalLinkProps): JS
         <span className="separator">/</span>
       ) }
 
-      <Link href={href} prefetch={false}>
+      <Link href={href} prefetch={false} legacyBehavior>
         {
           shouldDangerouslySetInnerHTML
             // eslint-disable-next-line react/no-danger

packages/app/src/components/PageTimeline.tsx

@@ -26,7 +26,7 @@ const TimelineCard = ({ page }: TimelineCardProps): JSX.Element => {
     <div className={`card card-timeline ${styles['card-timeline']}`}>
       <div className="card-header h4 p-3">
         <Link href={page.path} prefetch={false}>
-          <a>{page.path}</a>
+          {page.path}
         </Link>
       </div>
       <div className="card-body">

packages/app/src/components/PasswordResetExecutionForm.tsx

@@ -81,9 +81,7 @@ const PasswordResetExecutionForm: FC = () => {
         <input name="reset-password-btn" className="btn btn-lg btn-primary btn-block" value={t('forgot_password.reset_password')} type="submit" />
       </div>
       <Link href="/login" prefetch={false}>
-        <a>
-          <i className="icon-login mr-1"></i>{t('forgot_password.sign_in_instead')}
-        </a>
+        <i className="icon-login mr-1"></i>{t('forgot_password.sign_in_instead')}
       </Link>
     </form>
   );

packages/app/src/components/PasswordResetRequestForm.tsx

@@ -48,9 +48,7 @@ const PasswordResetRequestForm: FC = () => {
         </button>
       </div>
       <Link href='/login' prefetch={false}>
-        <a>
-          <i className="icon-login mr-1" />{t('forgot_password.return_to_login')}
-        </a>
+        <i className="icon-login mr-1" />{t('forgot_password.return_to_login')}
       </Link>
     </form>
   );

packages/app/src/components/ReactMarkdownComponents/NextLink.tsx

@@ -60,7 +60,7 @@ export const NextLink = (props: Props): JSX.Element => {
   }
 
   return (
-    <Link {...rest} href={href} prefetch={false}>
+    <Link {...rest} href={href} prefetch={false} legacyBehavior>
       <a href={href} className={className} {...dataAttributes}>{children}</a>
     </Link>
   );

packages/app/src/components/Sidebar/CustomSidebar.tsx

@@ -23,7 +23,7 @@ const SidebarNotFound = () => {
   return (
     <div className="grw-sidebar-content-header h5 text-center py-3">
       <Link href="/Sidebar#edit">
-        <a><i className="icon-magic-wand"></i> Create <strong>/Sidebar</strong> page</a>
+        <i className="icon-magic-wand"></i>Create<strong>/Sidebar</strong>page
       </Link>
     </div>
   );
@@ -47,7 +47,7 @@ const CustomSidebar: FC = () => {
       <div className="grw-sidebar-content-header py-3 d-flex">
         <h3 className="mb-0">
           {t('CustomSidebar')}
-          <Link href="/Sidebar#edit"><a className="h6 ml-2"><i className="icon-pencil"></i></a></Link>
+          <Link href="/Sidebar#edit" className="h6 ml-2"><i className="icon-pencil"></i></Link>
         </h3>
         <SidebarHeaderReloadButton onClick={() => mutate()} />
       </div>

packages/app/src/components/Sidebar/PageTree/Item.tsx

@@ -472,10 +472,12 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
                 </>
               )}
               { page != null && page.path != null && page._id != null && (
-                <Link href={pathUtils.returnPathForURL(page.path, page._id)} prefetch={false}>
-                  <a className="grw-pagetree-title-anchor flex-grow-1">
-                    <p className={`text-truncate m-auto ${page.isEmpty && 'grw-sidebar-text-muted'}`}>{nodePath.basename(page.path ?? '') || '/'}</p>
-                  </a>
+                <Link
+                  href={pathUtils.returnPathForURL(page.path, page._id)}
+                  className="grw-pagetree-title-anchor flex-grow-1"
+                  prefetch={false}
+                >
+                  <p className={`text-truncate m-auto ${page.isEmpty && 'grw-sidebar-text-muted'}`}>{nodePath.basename(page.path ?? '') || '/'}</p>
                 </Link>
               )}
             </>

packages/app/src/components/Sidebar/PageTree/PrivateLegacyPagesLink.tsx

@@ -1,17 +1,19 @@
 import React, { FC, memo } from 'react';
 
+import { useTranslation } from 'next-i18next';
 import Link from 'next/link';
 
-import { useTranslation } from 'next-i18next';
 
 export const PrivateLegacyPagesLink: FC = memo(() => {
   const { t } = useTranslation();
 
   return (
-    <Link href="/_private-legacy-pages" prefetch={false}>
-      <a className="h5 grw-private-legacy-pages-anchor text-decoration-none">
-        <i className="icon-drawer mr-2"></i> {t('private_legacy_pages.title')}
-      </a>
+    <Link
+      href="/_private-legacy-pages"
+      className="h5 grw-private-legacy-pages-anchor text-decoration-none"
+      prefetch={false}
+    >
+      <i className="icon-drawer mr-2"></i> {t('private_legacy_pages.title')}
     </Link>
   );
 });

packages/app/src/components/Sidebar/RecentChanges.tsx

@@ -70,10 +70,13 @@ const PageItem = memo(({ page, isSmall }: PageItemProps): JSX.Element => {
       return <></>;
     }
     return (
-      <Link key={tag.name} href={`/_search?q=tag:${tag.name}`} prefetch={false}>
-        <a className="grw-tag-label badge badge-secondary mr-2 small">
-          {tag.name}
-        </a>
+      <Link
+        key={tag.name}
+        href={`/_search?q=tag:${tag.name}`}
+        className="grw-tag-label badge badge-secondary mr-2 small"
+        prefetch={false}
+      >
+        {tag.name}
       </Link>
     );
   });

packages/app/src/components/Sidebar/SidebarNav.tsx

@@ -64,10 +64,13 @@ const SecondaryItem: FC<SecondaryItemProps> = memo((props: SecondaryItemProps) =
   const { iconName, href, isBlank } = props;
 
   return (
-    <Link href={href} prefetch={false}>
-      <a className="d-block btn btn-primary" target={`${isBlank ? '_blank' : ''}`}>
-        <i className="material-icons">{iconName}</i>
-      </a>
+    <Link
+      href={href}
+      className="d-block btn btn-primary"
+      target={`${isBlank ? '_blank' : ''}`}
+      prefetch={false}
+    >
+      <i className="material-icons">{iconName}</i>
     </Link>
   );
 });

packages/app/src/components/TagCloudBox.tsx

@@ -31,11 +31,12 @@ const TagCloudBox: FC<Props> = memo((props:(Props & typeof defaultProps)) => {
 
     return (
       <Link
-        key={tag.name} href={`${url.pathname}${url.search}`}
+        key={tag.name}
+        href={`${url.pathname}${url.search}`}
+        className="grw-tag-label badge badge-secondary mr-2"
+        prefetch={false}
       >
-        <a className="grw-tag-label badge badge-secondary mr-2">
-          {tagNameFormat}
-        </a>
+        {tagNameFormat}
       </Link>
     );
   });

packages/app/src/components/TagList.tsx

@@ -40,13 +40,11 @@ const TagList: FC<TagListProps> = (props:(TagListProps & typeof defaultProps)) =
         <Link
           key={tag._id}
           href={`${url.pathname}${url.search}`}
+          className={tagListClasses}
+          prefetch={false}
         >
-          <a
-            className={tagListClasses}
-          >
-            <div className="text-truncate list-tag-name">{tag.name}</div>
-            <div className="ml-4 my-auto py-1 px-2 list-tag-count badge badge-secondary text-white">{tag.count}</div>
-          </a>
+          <div className="text-truncate list-tag-name">{tag.name}</div>
+          <div className="ml-4 my-auto py-1 px-2 list-tag-count badge badge-secondary text-white">{tag.count}</div>
         </Link>
       );
     });

packages/app/src/components/User/Username.tsx

@@ -20,7 +20,7 @@ export const Username = (props: UsernameProps): JSX.Element => {
 
   return (
     <Link href={href} prefetch={false}>
-      <a>{name} (@{username})</a>
+      {name}(@{username})
     </Link>
   );
 };

packages/app/src/pages/forgot-password-errors.page.tsx

@@ -42,10 +42,8 @@ const ForgotPasswordErrorsPage: NextPage<Props> = (props: Props) => {
                     <div className="alert alert-warning mb-3">
                       <h2>{ t('forgot_password.incorrect_token_or_expired_url') }</h2>
                     </div>
-                    <Link href="/forgot-password" prefetch={false}>
-                      <a className="link-switch">
-                        <i className="icon-key"></i> { t('forgot_password.forgot_password') }
-                      </a>
+                    <Link href="/forgot-password" className="link-switch" prefetch={false}>
+                      <i className="icon-key"></i> { t('forgot_password.forgot_password') }
                     </Link>
                   </div>
                 ) }

packages/remark-lsx/src/components/LsxPageList/LsxPage.tsx

@@ -82,8 +82,8 @@ export const LsxPage = React.memo((props: Props): JSX.Element => {
         : encodeURI(pathUtils.removeTrailingSlash(pagePath));
 
       pagePathNode = (
-        <Link href={href} prefetch={false}>
-          <a className="page-list-link" href={href}>{pagePathNode}</a>
+        <Link href={href} prefetch={false} className="page-list-link">
+          {pagePathNode}
         </Link>
       );
     }