Switch the base framework from Create React App to Next.JS

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

src/components/landing-layout/footer/footer.tsx

@@ -1,7 +1,7 @@
 /*
- SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
- SPDX-License-Identifier: AGPL-3.0-only
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
  */
 
 import React from 'react'

src/components/landing-layout/footer/social-links.tsx

@@ -16,11 +16,11 @@ export const SocialLink: React.FC = () => {
       <Trans
         i18nKey='landing.footer.followUs'
         components={[
-          <ExternalLink href={links.githubOrg} icon='github' text='GitHub' />,
-          <ExternalLink href={links.community} icon='users' text='Discourse' />,
-          <ExternalLink href={links.chat} icon='comment' text='Matrix' />,
-          <ExternalLink href={links.mastodon} icon='mastodon' text='Mastodon' />,
-          <ExternalLink href={links.translate} icon='globe' text='POEditor' />
+          <ExternalLink href={links.githubOrg} icon='github' key={'github'} text='GitHub' />,
+          <ExternalLink href={links.community} icon='users' key={'users'} text='Discourse' />,
+          <ExternalLink href={links.chat} icon='comment' key={'comment'} text='Matrix' />,
+          <ExternalLink href={links.mastodon} icon='mastodon' key={'mastodon'} text='Mastodon' />,
+          <ExternalLink href={links.translate} icon='globe' key={'globe'} text='POEditor' />
         ]}
       />
     </p>

src/components/landing-layout/footer/version-info/version-info-link.tsx

@@ -6,7 +6,6 @@
 
 import React, { Fragment, useCallback, useState } from 'react'
 import { Trans } from 'react-i18next'
-import { Link } from 'react-router-dom'
 import { VersionInfoModal } from './version-info-modal'
 import { cypressId } from '../../../../utils/cypress-attribute'
 
@@ -17,9 +16,9 @@ export const VersionInfoLink: React.FC = () => {
 
   return (
     <Fragment>
-      <Link {...cypressId('show-version-modal')} to={'#'} className={'text-light'} onClick={showModal}>
+      <a {...cypressId('show-version-modal')} href={'#'} className={'text-light'} onClick={showModal}>
         <Trans i18nKey={'landing.versionInfo.versionInfo'} />
-      </Link>
+      </a>
       <VersionInfoModal onHide={closeModal} show={show} />
     </Fragment>
   )

src/components/landing-layout/footer/version-info/version-info-modal-column.tsx

@@ -5,11 +5,11 @@
  */
 
 import React from 'react'
-import Col from 'react-bootstrap/esm/Col'
 import { CopyableField } from '../../../common/copyable/copyable-field/copyable-field'
 import { TranslatedExternalLink } from '../../../common/links/translated-external-link'
 import { ShowIf } from '../../../common/show-if/show-if'
 import { Trans, useTranslation } from 'react-i18next'
+import { Col } from 'react-bootstrap'
 
 export interface VersionInfoModalColumnProps {
   titleI18nKey: string

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

@@ -1,19 +1,18 @@
 /*
- SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
- SPDX-License-Identifier: AGPL-3.0-only
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
  */
 
 import React, { Fragment } from 'react'
 import { Navbar } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import { useApplicationState } from '../../../../hooks/common/use-application-state'
-import { HeaderNavLink } from '../header-nav-link'
+import { HeaderNavLink } from './header-nav-link'
 import { NewGuestNoteButton } from '../new-guest-note-button'
 import { NewUserNoteButton } from '../new-user-note-button'
 import { SignInButton } from '../sign-in-button'
 import { UserDropdown } from '../user-dropdown'
-import './header-bar.scss'
 import { cypressId } from '../../../../utils/cypress-attribute'
 
 const HeaderBar: React.FC = () => {
@@ -22,7 +21,7 @@ const HeaderBar: React.FC = () => {
 
   return (
     <Navbar className='justify-content-between'>
-      <div className='nav header-nav'>
+      <div className='nav'>
         <HeaderNavLink to='/intro' {...cypressId('navLinkIntro')}>
           <Trans i18nKey='landing.navigation.intro' />
         </HeaderNavLink>

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

@@ -4,12 +4,10 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-.header-nav {
-  .nav-link {
-    border-bottom: 2px solid transparent
-  }
-
-  .nav-link.active {
-    border-bottom-color: #fff;
-  }
+.nav-link {
+  border-bottom: 2px solid transparent
+}
+
+.nav-link-active {
+  border-bottom-color: #fff;
 }

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

@@ -0,0 +1,42 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import Link from 'next/link'
+import React, { useMemo } from 'react'
+import { Nav } from 'react-bootstrap'
+import type { PropsWithDataCypressId } from '../../../../utils/cypress-attribute'
+import { cypressId } from '../../../../utils/cypress-attribute'
+import styles from './header-nav-link.module.scss'
+import { useRouter } from 'next/router'
+
+export interface HeaderNavLinkProps extends PropsWithDataCypressId {
+  to: string
+}
+
+/**
+ * Renders a link for the navigation top bar.
+ *
+ * @param to The target url
+ * @param children The react elements inside of link for more description
+ * @param props Other navigation item props
+ */
+export const HeaderNavLink: React.FC<HeaderNavLinkProps> = ({ to, children, ...props }) => {
+  const { route } = useRouter()
+
+  const activeClass = useMemo(() => {
+    return route === to ? styles['nav-link-active'] : ''
+  }, [route, to])
+
+  return (
+    <Nav.Item>
+      <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/header-nav-link.tsx

@@ -1,27 +0,0 @@
-/*
- SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
- SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import React from 'react'
-import { Nav } from 'react-bootstrap'
-import { LinkContainer } from 'react-router-bootstrap'
-import type { PropsWithDataCypressId } from '../../../utils/cypress-attribute'
-import { cypressId } from '../../../utils/cypress-attribute'
-
-export interface HeaderNavLinkProps extends PropsWithDataCypressId {
-  to: string
-}
-
-export const HeaderNavLink: React.FC<HeaderNavLinkProps> = ({ to, children, ...props }) => {
-  return (
-    <Nav.Item>
-      <LinkContainer to={to}>
-        <Nav.Link className='text-light' href={to} {...cypressId(props)}>
-          {children}
-        </Nav.Link>
-      </LinkContainer>
-    </Nav.Item>
-  )
-}

src/components/landing-layout/navigation/new-guest-note-button.tsx

@@ -1,21 +1,22 @@
 /*
- SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
- SPDX-License-Identifier: AGPL-3.0-only
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
  */
 
 import React from 'react'
 import { Button } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
-import { LinkContainer } from 'react-router-bootstrap'
 import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
 import { cypressId } from '../../../utils/cypress-attribute'
+import Link from 'next/link'
 
 export const NewGuestNoteButton: React.FC = () => {
   const { t } = useTranslation()
   return (
-    <LinkContainer to={'/new'} title={t('landing.navigation.newGuestNote')}>
+    <Link href={'/new'} passHref={true}>
       <Button
+        title={t('landing.navigation.newGuestNote')}
         variant='primary'
         size='sm'
         className='d-inline-flex align-items-center'
@@ -25,6 +26,6 @@ export const NewGuestNoteButton: React.FC = () => {
           <Trans i18nKey='landing.navigation.newGuestNote' />
         </span>
       </Button>
-    </LinkContainer>
+    </Link>
   )
 }

src/components/landing-layout/navigation/new-user-note-button.tsx

@@ -1,21 +1,22 @@
 /*
- SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
- SPDX-License-Identifier: AGPL-3.0-only
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
  */
 
 import React from 'react'
 import { Button } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
-import { LinkContainer } from 'react-router-bootstrap'
 import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
 import { cypressId } from '../../../utils/cypress-attribute'
+import Link from 'next/link'
 
 export const NewUserNoteButton: React.FC = () => {
   const { t } = useTranslation()
   return (
-    <LinkContainer to={'/new'} title={t('landing.navigation.newNote')}>
+    <Link href={'/new'} passHref={true}>
       <Button
+        title={t('landing.navigation.newNote')}
         variant='primary'
         size='sm'
         className='d-inline-flex align-items-center'
@@ -25,6 +26,6 @@ export const NewUserNoteButton: React.FC = () => {
           <Trans i18nKey='landing.navigation.newNote' />
         </span>
       </Button>
-    </LinkContainer>
+    </Link>
   )
 }

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

@@ -8,12 +8,12 @@ import React, { useMemo } from 'react'
 import { Button } from 'react-bootstrap'
 import type { ButtonProps } from 'react-bootstrap/Button'
 import { Trans, useTranslation } from 'react-i18next'
-import { LinkContainer } from 'react-router-bootstrap'
 import { ShowIf } from '../../common/show-if/show-if'
 import { INTERACTIVE_LOGIN_METHODS } from '../../../api/auth'
 import { useApplicationState } from '../../../hooks/common/use-application-state'
 import { cypressId } from '../../../utils/cypress-attribute'
 import { useBackendBaseUrl } from '../../../hooks/common/use-backend-base-url'
+import Link from 'next/link'
 
 export type SignInButtonProps = Omit<ButtonProps, 'href'>
 
@@ -37,11 +37,11 @@ export const SignInButton: React.FC<SignInButtonProps> = ({ variant, ...props })
 
   return (
     <ShowIf condition={authEnabled}>
-      <LinkContainer to={loginLink} title={t('login.signIn')}>
-        <Button {...cypressId('sign-in-button')} 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>
-      </LinkContainer>
+      </Link>
     </ShowIf>
   )
 }

src/components/landing-layout/navigation/user-dropdown.tsx

@@ -7,12 +7,12 @@
 import React from 'react'
 import { Dropdown } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
-import { LinkContainer } from 'react-router-bootstrap'
 import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
 import { UserAvatar } from '../../common/user-avatar/user-avatar'
 import { useApplicationState } from '../../../hooks/common/use-application-state'
 import { cypressId } from '../../../utils/cypress-attribute'
 import { SignOutDropdownButton } from './sign-out-dropdown-button'
+import Link from 'next/link'
 
 export const UserDropdown: React.FC = () => {
   useTranslation()
@@ -29,18 +29,18 @@ export const UserDropdown: React.FC = () => {
       </Dropdown.Toggle>
 
       <Dropdown.Menu className='text-start'>
-        <LinkContainer to={'/n/features'}>
+        <Link href={'/n/features'} passHref={true}>
           <Dropdown.Item dir='auto' {...cypressId('user-dropdown-features-button')}>
             <ForkAwesomeIcon icon='bolt' fixedWidth={true} className='mx-2' />
             <Trans i18nKey='editor.help.documents.features' />
           </Dropdown.Item>
-        </LinkContainer>
-        <LinkContainer to={'/profile'}>
+        </Link>
+        <Link href={'/profile'} passHref={true}>
           <Dropdown.Item dir='auto' {...cypressId('user-dropdown-profile-button')}>
             <ForkAwesomeIcon icon='user' fixedWidth={true} className='mx-2' />
             <Trans i18nKey='profile.userProfile' />
           </Dropdown.Item>
-        </LinkContainer>
+        </Link>
         <SignOutDropdownButton />
       </Dropdown.Menu>
     </Dropdown>