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

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

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>
+  )
+}