build(deps): bump Next.js to v13

2024-07-04 01:20:13 +02:00 · 2022-12-13 11:38:07 +01:00 · 2022-12-13 11:38:07 +01:00 · 734357b396
commit 734357b396
parent ccaf5234ed
29 changed files with 3430 additions and 4427 deletions
--- a/.devcontainer/Dockerfile
+++ b/.devcontainer/Dockerfile
@ -1,2 +1,2 @@
-ARG VARIANT="16"
+ARG VARIANT="18"
 FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
--- a/.env.example
+++ b/.env.example
@ -1,3 +1,3 @@
 COMPOSE_PROJECT_NAME=thream-website
-NEXT_PUBLIC_API_URL=http://localhost:8080
+NEXT_PUBLIC_API_URL=http://127.0.0.1:8080
 PORT=3000
--- a/.github/workflows/analyze.yml
+++ b/.github/workflows/analyze.yml
@ -16,12 +16,12 @@ jobs:
        language: ['javascript']

    steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.1.0'

      - name: 'Initialize CodeQL'
-        uses: 'github/codeql-action/init@v1'
+        uses: 'github/codeql-action/init@v2'
        with:
          languages: ${{ matrix.language }}

      - name: 'Perform CodeQL Analysis'
-        uses: 'github/codeql-action/analyze@v1'
+        uses: 'github/codeql-action/analyze@v2'
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@ -10,12 +10,12 @@ jobs:
  build:
    runs-on: 'ubuntu-latest'
    steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.1.0'

      - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.0.0'
+        uses: 'actions/setup-node@v3.5.1'
        with:
-          node-version: '16.x'
+          node-version: '18.x'
          cache: 'npm'

      - name: 'Install'
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@ -10,12 +10,12 @@ jobs:
  lint:
    runs-on: 'ubuntu-latest'
    steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.1.0'

      - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.0.0'
+        uses: 'actions/setup-node@v3.5.1'
        with:
-          node-version: '16.x'
+          node-version: '18.x'
          cache: 'npm'

      - name: 'Install'
@ -42,6 +42,6 @@ jobs:
          github_token: ${{ secrets.github_token }}

      - name: 'lint:docker'
-        uses: 'hadolint/hadolint-action@v1.6.0'
+        uses: 'hadolint/hadolint-action@v3.0.0'
        with:
          dockerfile: './Dockerfile'
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@ -8,7 +8,7 @@ jobs:
  release:
    runs-on: 'ubuntu-latest'
    steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.1.0'
        with:
          fetch-depth: 0
          persist-credentials: false
@ -21,9 +21,9 @@ jobs:
          git_commit_gpgsign: true

      - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.4.0'
+        uses: 'actions/setup-node@v3.5.1'
        with:
-          node-version: '16.x'
+          node-version: '18.x'
          cache: 'npm'

      - name: 'Install'
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -10,12 +10,12 @@ jobs:
  test-unit:
    runs-on: 'ubuntu-latest'
    steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.1.0'

      - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.0.0'
+        uses: 'actions/setup-node@v3.5.1'
        with:
-          node-version: '16.x'
+          node-version: '18.x'
          cache: 'npm'

      - name: 'Install'
@ -27,12 +27,12 @@ jobs:
  test-lighthouse:
    runs-on: 'ubuntu-latest'
    steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.1.0'

      - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.0.0'
+        uses: 'actions/setup-node@v3.5.1'
        with:
-          node-version: '16.x'
+          node-version: '18.x'
          cache: 'npm'

      - name: 'Install'
@ -52,12 +52,12 @@ jobs:
  test-e2e:
    runs-on: 'ubuntu-latest'
    steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.1.0'

      - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.0.0'
+        uses: 'actions/setup-node@v3.5.1'
        with:
-          node-version: '16.x'
+          node-version: '18.x'
          cache: 'npm'

      - name: 'Install'
--- a/.html-w3c-validatorrc.json
+++ b/.html-w3c-validatorrc.json
@ -1,9 +1,9 @@
 {
  "urls": [
-    "http://localhost:3000/",
-    "http://localhost:3000/authentication/forgot-password",
-    "http://localhost:3000/authentication/reset-password",
-    "http://localhost:3000/authentication/signin",
-    "http://localhost:3000/authentication/signup"
+    "http://127.0.0.1:3000/",
+    "http://127.0.0.1:3000/authentication/forgot-password",
+    "http://127.0.0.1:3000/authentication/reset-password",
+    "http://127.0.0.1:3000/authentication/signin",
+    "http://127.0.0.1:3000/authentication/signup"
  ]
 }
--- a/.lighthouserc.json
+++ b/.lighthouserc.json
@ -5,11 +5,11 @@
      "startServerReadyPattern": "ready on",
      "startServerReadyTimeout": 20000,
      "url": [
-        "http://localhost:3000/",
-        "http://localhost:3000/authentication/forgot-password",
-        "http://localhost:3000/authentication/reset-password",
-        "http://localhost:3000/authentication/signin",
-        "http://localhost:3000/authentication/signup"
+        "http://127.0.0.1:3000/",
+        "http://127.0.0.1:3000/authentication/forgot-password",
+        "http://127.0.0.1:3000/authentication/reset-password",
+        "http://127.0.0.1:3000/authentication/signin",
+        "http://127.0.0.1:3000/authentication/signup"
      ],
      "numberOfRuns": 1
    },
--- a/README.md
+++ b/README.md
@ -61,7 +61,7 @@ docker compose up --build

 #### Services started

- website : `http://localhost:3000`
+- website : `http://127.0.0.1:3000`

 ## 💡 Contributing

--- a/components/Application/Channels/Channel.tsx
+++ b/components/Application/Channels/Channel.tsx
@ -22,35 +22,31 @@ const ChannelMemo: React.FC<ChannelProps> = (props) => {
  const { member } = useGuildMember()

  return (
-    <Link href={`/application/${path.guildId}/${channel.id}`}>
-      <a
-        className={classNames(
-          'group relative my-3 mx-3 flex items-center justify-between overflow-hidden rounded-lg py-2 text-sm transition-all duration-200 hover:bg-gray-100 dark:hover:bg-gray-600',
-          {
-            'font-semibold text-green-800 dark:text-green-400': selected
-          }
-        )}
-      >
-        <span
-          className='max-[315px] ml-2 mr-4 break-all'
-          data-cy='channel-name'
+    <Link
+      href={`/application/${path.guildId}/${channel.id}`}
+      className={classNames(
+        'group relative my-3 mx-3 flex items-center justify-between overflow-hidden rounded-lg py-2 text-sm transition-all duration-200 hover:bg-gray-100 dark:hover:bg-gray-600',
+        {
+          'font-semibold text-green-800 dark:text-green-400': selected
+        }
+      )}
+    >
+      <span className='max-[315px] ml-2 mr-4 break-all' data-cy='channel-name'>
+        # {channel.name}
+      </span>
+      {member.isOwner && (
+        <IconButton
+          onClick={async () => {
+            await router.push(
+              `/application/${channel.guildId}/${channel.id}/settings`
+            )
+          }}
+          className='bg-unherit absolute -right-10 h-full w-8 transition-all group-hover:right-0 group-hover:shadow-lg dark:group-hover:bg-gray-600'
+          title='Settings'
        >
-          # {channel.name}
-        </span>
-        {member.isOwner && (
-          <IconButton
-            onClick={async () => {
-              await router.push(
-                `/application/${channel.guildId}/${channel.id}/settings`
-              )
-            }}
-            className='bg-unherit absolute -right-10 h-full w-8 transition-all group-hover:right-0 group-hover:shadow-lg dark:group-hover:bg-gray-600'
-            title='Settings'
-          >
-            <CogIcon height={20} width={20} />
-          </IconButton>
-        )}
-      </a>
+          <CogIcon height={20} width={20} />
+        </IconButton>
+      )}
    </Link>
  )
 }
--- a/components/Application/GuildLeftSidebar/GuildLeftSidebar.tsx
+++ b/components/Application/GuildLeftSidebar/GuildLeftSidebar.tsx
@ -28,20 +28,24 @@ export const GuildLeftSidebar: React.FC<GuildLeftSidebarProps> = (props) => {
      <Divider />
      <div className='mb-1 flex items-center justify-center space-x-6 p-2'>
        {member.isOwner && (
-          <Link href={`/application/${path.guildId}/channels/create`} passHref>
-            <a data-cy='link-add-channel'>
-              <IconButton className='h-10 w-10' title='Add a Channel'>
-                <PlusIcon />
-              </IconButton>
-            </a>
+          <Link
+            href={`/application/${path.guildId}/channels/create`}
+            passHref
+            data-cy='link-add-channel'
+          >
+            <IconButton className='h-10 w-10' title='Add a Channel'>
+              <PlusIcon />
+            </IconButton>
          </Link>
        )}
-        <Link href={`/application/${path.guildId}/settings`} passHref>
-          <a data-cy='link-settings-guild'>
-            <IconButton className='h-7 w-7' title='Settings'>
-              <CogIcon />
-            </IconButton>
-          </a>
+        <Link
+          href={`/application/${path.guildId}/settings`}
+          passHref
+          data-cy='link-settings-guild'
+        >
+          <IconButton className='h-7 w-7' title='Settings'>
+            <CogIcon />
+          </IconButton>
        </Link>
      </div>
    </div>
--- a/components/Application/Members/Member.tsx
+++ b/components/Application/Members/Member.tsx
@ -14,35 +14,33 @@ const MemberMemo: React.FC<MemberProps> = (props) => {

  return (
    <Link href={`/application/users/${member.user.id}`}>
-      <a>
-        <div className='flex cursor-pointer items-center overflow-hidden py-2 px-6 pr-10 hover:bg-gray-300 dark:hover:bg-gray-900'>
-          <div className='flex min-w-[50px] rounded-full'>
-            <Image
-              src={
-                member.user.logo == null
-                  ? '/images/data/user-default.png'
-                  : member.user.logo
-              }
-              alt={"Users's profil picture"}
-              height={50}
-              width={50}
-              draggable={false}
-              className='rounded-full'
-            />
-          </div>
-          <div className='ml-5'>
-            <p data-cy='member-user-name' className='flex truncate font-bold'>
-              {member.user.name}
-              {member.isOwner && (
-                <span className='ml-4'>
-                  <Emoji value=':crown:' size={18} />
-                </span>
-              )}
-            </p>
-            {member.user.status != null && member.user.status}
-          </div>
+      <div className='flex cursor-pointer items-center overflow-hidden py-2 px-6 pr-10 hover:bg-gray-300 dark:hover:bg-gray-900'>
+        <div className='flex min-w-[50px] rounded-full'>
+          <Image
+            src={
+              member.user.logo == null
+                ? '/images/data/user-default.png'
+                : member.user.logo
+            }
+            alt={"Users's profil picture"}
+            height={50}
+            width={50}
+            draggable={false}
+            className='rounded-full'
+          />
        </div>
-      </a>
+        <div className='ml-5'>
+          <p data-cy='member-user-name' className='flex truncate font-bold'>
+            {member.user.name}
+            {member.isOwner && (
+              <span className='ml-4'>
+                <Emoji value=':crown:' size={18} />
+              </span>
+            )}
+          </p>
+          {member.user.status != null && member.user.status}
+        </div>
+      </div>
    </Link>
  )
 }
--- a/components/Application/Messages/Message/Message.tsx
+++ b/components/Application/Messages/Message/Message.tsx
@ -73,37 +73,33 @@ export const Message: React.FC<MessageProps> = (props) => {
      }}
    >
      <Link href={`/application/users/${message.member.user.id}`}>
-        <a>
-          <div className='mr-4 flex h-12 w-12 flex-shrink-0 items-center justify-center'>
-            <div className='h-10 w-10 drop-shadow-md'>
-              <Image
-                quality={100}
-                className='rounded-full'
-                src={
-                  message.member.user.logo == null
-                    ? '/images/data/user-default.png'
-                    : message.member.user.logo
-                }
-                alt={"Users's profil picture"}
-                width={50}
-                height={50}
-                draggable={false}
-              />
-            </div>
+        <div className='mr-4 flex h-12 w-12 flex-shrink-0 items-center justify-center'>
+          <div className='h-10 w-10 drop-shadow-md'>
+            <Image
+              quality={100}
+              className='rounded-full'
+              src={
+                message.member.user.logo == null
+                  ? '/images/data/user-default.png'
+                  : message.member.user.logo
+              }
+              alt={"Users's profil picture"}
+              width={50}
+              height={50}
+              draggable={false}
+            />
          </div>
-        </a>
+        </div>
      </Link>
      <div className='relative w-full whitespace-pre-wrap break-words break-all'>
        <div className='flex w-max items-center'>
          <Link href={`/application/users/${message.member.user.id}`}>
-            <a>
-              <span
-                data-cy='message-member-user-name'
-                className='font-bold text-gray-900 dark:text-gray-200'
-              >
-                {message.member.user.name}
-              </span>
-            </a>
+            <span
+              data-cy='message-member-user-name'
+              className='font-bold text-gray-900 dark:text-gray-200'
+            >
+              {message.member.user.name}
+            </span>
          </Link>
          <span
            data-cy='message-date'
--- a/components/Application/PopupGuild/PopupGuildCard.tsx
+++ b/components/Application/PopupGuild/PopupGuildCard.tsx
@ -23,11 +23,12 @@ export const PopupGuildCard: React.FC<PopupGuildCardProps> = (props) => {
        <p className='mt-6 px-8 text-center text-sm text-gray-200'>
          {description}
        </p>
-        <Link href={link.href}>
-          <a className='mb-6 flex h-10 w-4/5 items-center justify-center self-center rounded-2xl bg-green-400 font-bold tracking-wide text-white transition duration-200 ease-in-out hover:bg-green-600'>
-            {link.icon}
-            {link.text}
-          </a>
+        <Link
+          href={link.href}
+          className='mb-6 flex h-10 w-4/5 items-center justify-center self-center rounded-2xl bg-green-400 font-bold tracking-wide text-white transition duration-200 ease-in-out hover:bg-green-600'
+        >
+          {link.icon}
+          {link.text}
        </Link>
      </div>
    </div>
--- a/components/Application/UserSettings/UserSettings.tsx
+++ b/components/Application/UserSettings/UserSettings.tsx
@ -312,16 +312,15 @@ export const UserSettings: React.FC = () => {
            <Language className='!top-12' />
            <div className='ml-auto flex'>
              <SwitchTheme />
-              <Link href={`/application/users/${user.id}`}>
-                <a
-                  className='group ml-3 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-slate-200 transition-colors hover:bg-slate-300 dark:bg-slate-700 hover:dark:bg-slate-800'
-                  title='Preview Public Profile'
-                >
-                  <EyeIcon
-                    height={20}
-                    className='opacity-50 transition-opacity group-hover:opacity-100'
-                  />
-                </a>
+              <Link
+                href={`/application/users/${user.id}`}
+                className='group ml-3 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-slate-200 transition-colors hover:bg-slate-300 dark:bg-slate-700 hover:dark:bg-slate-800'
+                title='Preview Public Profile'
+              >
+                <EyeIcon
+                  height={20}
+                  className='opacity-50 transition-opacity group-hover:opacity-100'
+                />
              </Link>
            </div>
          </div>
--- a/components/Authentication/Authentication.tsx
+++ b/components/Authentication/Authentication.tsx
@ -139,11 +139,9 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
                : '/authentication/signup'
            }
          >
-            <a>
-              {mode === 'signup'
-                ? t('authentication:already-have-an-account')
-                : t('authentication:dont-have-an-account')}
-            </a>
+            {mode === 'signup'
+              ? t('authentication:already-have-an-account')
+              : t('authentication:dont-have-an-account')}
          </Link>
        </p>
      </AuthenticationForm>
--- a/components/ErrorPage.tsx
+++ b/components/ErrorPage.tsx
@ -23,10 +23,11 @@ export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
      </h1>
      <p className='text-center text-lg'>
        {message}{' '}
-        <Link href='/'>
-          <a className='text-green-800 hover:underline dark:text-green-400'>
-            {t('errors:return-to-home-page')}
-          </a>
+        <Link
+          href='/'
+          className='text-green-800 hover:underline dark:text-green-400'
+        >
+          {t('errors:return-to-home-page')}
        </Link>
      </p>

--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@ -15,10 +15,11 @@ export const Footer: React.FC<FooterProps> = (props) => {
  return (
    <footer className='flex flex-col items-center justify-center border-t-2 border-gray-600 bg-white py-6 text-lg dark:border-gray-400 dark:bg-black'>
      <p>
-        <Link href='/'>
-          <a className='text-green-800 hover:underline dark:text-green-400'>
-            Thream
-          </a>
+        <Link
+          href='/'
+          className='text-green-800 hover:underline dark:text-green-400'
+        >
+          Thream
        </Link>{' '}
        | {t('common:all-rights-reserved')}
      </p>
--- a/components/Header/Header.tsx
+++ b/components/Header/Header.tsx
@ -9,20 +9,18 @@ export const Header: React.FC = () => {
    <header className='sticky top-0 z-50 flex w-full justify-center border-b-2 border-gray-600 bg-white px-6 py-2 dark:border-gray-400 dark:bg-black'>
      <div className='container flex justify-between'>
        <Link href='/'>
-          <a>
-            <div className='flex items-center justify-center'>
-              <Image
-                quality={100}
-                width={60}
-                height={60}
-                src='/images/icons/Thream.png'
-                alt='Thream'
-              />
-              <span className='ml-1 hidden font-headline font-medium text-green-800 dark:text-green-400 xs:block'>
-                Thream
-              </span>
-            </div>
-          </a>
+          <div className='flex items-center justify-center'>
+            <Image
+              quality={100}
+              width={60}
+              height={60}
+              src='/images/icons/Thream.png'
+              alt='Thream'
+            />
+            <span className='ml-1 hidden font-headline font-medium text-green-800 dark:text-green-400 xs:block'>
+              Thream
+            </span>
+          </div>
        </Link>
        <div className='flex justify-between'>
          <Language />
--- a/components/design/IconLink/IconLink.tsx
+++ b/components/design/IconLink/IconLink.tsx
@ -14,24 +14,26 @@ export const IconLink: React.FC<React.PropsWithChildren<IconLinkProps>> = (
  const { children, selected, href, title, className } = props

  return (
-    <Link href={href}>
-      <a className='group relative flex w-full justify-center' title={title}>
-        <div
-          className={classNames('group flex w-full justify-center', className)}
-        >
-          {children}
-          <div className='absolute left-0 flex h-12 w-3 items-center'>
-            <span
-              className={classNames(
-                'absolute w-4/12 rounded-r-lg bg-green-700 group-hover:h-5',
-                {
-                  'h-full': selected
-                }
-              )}
-            ></span>
-          </div>
+    <Link
+      href={href}
+      className='group relative flex w-full justify-center'
+      title={title}
+    >
+      <div
+        className={classNames('group flex w-full justify-center', className)}
+      >
+        {children}
+        <div className='absolute left-0 flex h-12 w-3 items-center'>
+          <span
+            className={classNames(
+              'absolute w-4/12 rounded-r-lg bg-green-700 group-hover:h-5',
+              {
+                'h-full': selected
+              }
+            )}
+          ></span>
        </div>
-      </a>
+      </div>
    </Link>
  )
 }
--- a/components/design/Input/Input.tsx
+++ b/components/design/Input/Input.tsx
@ -44,13 +44,12 @@ export const Input: React.FC<InputProps> = (props) => {
            {label}
          </label>
          {type === 'password' && showForgotPassword ? (
-            <Link href='/authentication/forgot-password'>
-              <a
-                className='text-center font-headline text-xs text-green-800 hover:underline dark:text-green-400 sm:text-sm'
-                data-cy='forgot-password-link'
-              >
-                {t('authentication:forgot-password')}
-              </a>
+            <Link
+              href='/authentication/forgot-password'
+              className='text-center font-headline text-xs text-green-800 hover:underline dark:text-green-400 sm:text-sm'
+              data-cy='forgot-password-link'
+            >
+              {t('authentication:forgot-password')}
            </Link>
          ) : null}
        </div>
--- a/cypress.config.ts
+++ b/cypress.config.ts
@ -23,7 +23,7 @@ export default defineConfig({
  screenshotOnRunFailure: false,

  e2e: {
-    baseUrl: 'http://localhost:3000',
+    baseUrl: 'http://127.0.0.1:3000',
    supportFile: false,
    setupNodeEvents(on, config) {
      on('task', {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -23,26 +23,26 @@
    "lint:prettier": "prettier \".\" --check --ignore-path \".gitignore\"",
    "lint:staged": "lint-staged",
    "test:unit": "cypress run --component",
-    "test:html-w3c-validator": "start-server-and-test \"start\" \"http://localhost:3000\" \"html-w3c-validator\"",
+    "test:html-w3c-validator": "start-server-and-test \"start\" \"http://127.0.0.1:3000\" \"html-w3c-validator\"",
    "test:lighthouse": "lhci autorun",
-    "test:e2e": "start-server-and-test \"start\" \"http://localhost:3000\" \"cypress run\"",
-    "test:dev": "start-server-and-test \"dev\" \"http://localhost:3000\" \"cypress open\"",
+    "test:e2e": "start-server-and-test \"start\" \"http://127.0.0.1:3000\" \"cypress run\"",
+    "test:dev": "start-server-and-test \"dev\" \"http://127.0.0.1:3000\" \"cypress open\"",
    "release": "semantic-release",
    "deploy": "vercel",
    "postinstall": "husky install"
  },
  "dependencies": {
-    "@fontsource/montserrat": "4.5.12",
+    "@fontsource/montserrat": "4.5.13",
    "@fontsource/roboto": "4.5.8",
    "@heroicons/react": "1.0.6",
-    "@sinclair/typebox": "0.24.42",
-    "axios": "0.26.1",
+    "@sinclair/typebox": "0.25.13",
+    "axios": "1.2.1",
    "clsx": "1.2.1",
    "date-and-time": "2.4.1",
    "emoji-mart": "3.0.1",
-    "framer-motion": "7.3.6",
-    "katex": "0.16.2",
-    "next": "12.3.1",
+    "framer-motion": "7.7.2",
+    "katex": "0.16.4",
+    "next": "13.0.6",
    "next-pwa": "5.6.0",
    "next-themes": "0.2.1",
    "next-translate": "1.6.0",
@ -51,63 +51,62 @@
    "react-component-form": "3.1.1",
    "react-dom": "18.2.0",
    "react-infinite-scroll-component": "6.1.0",
-    "react-markdown": "8.0.3",
-    "react-responsive": "8.2.0",
+    "react-markdown": "8.0.4",
+    "react-responsive": "9.0.2",
    "react-swipeable": "7.0.0",
    "react-syntax-highlighter": "15.5.0",
-    "react-textarea-autosize": "8.3.4",
+    "react-textarea-autosize": "8.4.0",
    "read-pkg": "7.1.0",
    "rehype-katex": "6.0.2",
    "remark-breaks": "3.0.2",
    "remark-gfm": "3.0.1",
    "remark-math": "5.1.1",
-    "sharp": "0.31.0",
-    "socket.io-client": "4.5.2",
+    "sharp": "0.31.2",
+    "socket.io-client": "4.5.4",
    "unified": "10.1.2",
    "unist-util-visit": "4.1.1",
    "universal-cookie": "4.0.4"
  },
  "devDependencies": {
-    "@commitlint/cli": "17.1.2",
-    "@commitlint/config-conventional": "17.1.0",
-    "@lhci/cli": "0.9.0",
+    "@commitlint/cli": "17.3.0",
+    "@commitlint/config-conventional": "17.3.0",
+    "@lhci/cli": "0.10.0",
    "@saithodev/semantic-release-backmerge": "2.1.2",
    "@semantic-release/git": "10.0.1",
    "@types/emoji-mart": "3.0.9",
    "@types/hast": "2.3.4",
    "@types/katex": "0.14.0",
-    "@types/node": "18.7.18",
-    "@types/react": "18.0.20",
+    "@types/node": "18.11.14",
+    "@types/react": "18.0.26",
    "@types/react-responsive": "8.0.5",
    "@types/react-syntax-highlighter": "15.5.5",
    "@types/unist": "2.0.6",
-    "@typescript-eslint/eslint-plugin": "5.38.0",
-    "@typescript-eslint/parser": "5.38.0",
-    "autoprefixer": "10.4.12",
-    "cypress": "10.8.0",
+    "@typescript-eslint/eslint-plugin": "5.46.1",
+    "@typescript-eslint/parser": "5.46.1",
+    "autoprefixer": "10.4.13",
+    "cypress": "12.1.0",
    "editorconfig-checker": "4.0.2",
-    "eslint": "8.23.1",
-    "eslint-config-conventions": "4.0.1",
-    "eslint-config-next": "12.3.1",
+    "eslint": "8.29.0",
+    "eslint-config-conventions": "6.0.0",
+    "eslint-config-next": "13.0.6",
    "eslint-config-prettier": "8.5.0",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-promise": "6.0.1",
-    "eslint-plugin-unicorn": "43.0.2",
-    "html-w3c-validator": "1.2.0",
-    "husky": "8.0.1",
-    "lint-staged": "13.0.3",
+    "eslint-plugin-promise": "6.1.1",
+    "eslint-plugin-unicorn": "45.0.2",
+    "html-w3c-validator": "1.2.1",
+    "husky": "8.0.2",
+    "lint-staged": "13.1.0",
    "markdownlint-cli2": "0.5.1",
    "mockttp": "2.7.0",
    "plop": "3.1.1",
-    "postcss": "8.4.16",
-    "prettier": "2.7.1",
-    "prettier-plugin-tailwindcss": "0.1.13",
+    "postcss": "8.4.20",
+    "prettier": "2.8.1",
+    "prettier-plugin-tailwindcss": "0.2.1",
    "semantic-release": "19.0.5",
-    "serve": "14.0.1",
-    "start-server-and-test": "1.14.0",
-    "tailwindcss": "3.1.8",
-    "typescript": "4.8.3",
-    "vercel": "28.3.0"
+    "start-server-and-test": "1.15.2",
+    "tailwindcss": "3.2.4",
+    "typescript": "4.9.4",
+    "vercel": "28.8.0"
  }
 }
--- a/pages/authentication/forgot-password.tsx
+++ b/pages/authentication/forgot-password.tsx
@ -71,7 +71,7 @@ const ForgotPassword: NextPage<FooterProps> = (props) => {
          </Button>
          <p className='mt-3 font-headline text-sm text-green-800 hover:underline dark:text-green-400'>
            <Link href='/authentication/signin'>
-              <a>{t('authentication:already-know-password')}</a>
+              {t('authentication:already-know-password')}
            </Link>
          </p>
        </AuthenticationForm>
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -25,15 +25,14 @@ const Home: NextPage<FooterProps> = (props) => {
        <div className='flex w-4/5 flex-col items-center'>
          <div className='max-w-xs'>
            <Link href='/authentication/signup'>
-              <a>
-                <Image
-                  quality={100}
-                  width={351}
-                  height={341}
-                  src='/images/svg/design/home.svg'
-                  alt={"Thream's chat app"}
-                />
-              </a>
+              <Image
+                quality={100}
+                width={351}
+                height={341}
+                src='/images/svg/design/home.svg'
+                alt={"Thream's chat app"}
+                priority
+              />
            </Link>
          </div>
          <div className='text-center'>
@ -55,7 +54,7 @@ const Home: NextPage<FooterProps> = (props) => {
              />
            </div>
            <div className='mt-8 flex items-center justify-center space-x-4 text-center'>
-              <Link href='/authentication/signup' passHref>
+              <Link href='/authentication/signup' passHref legacyBehavior>
                <ButtonLink data-cy='get-started'>
                  {t('home:get-started')}
                </ButtonLink>
--- a/tools/api.ts
+++ b/tools/api.ts
@ -7,7 +7,7 @@ export const API_DEFAULT_PORT = 8080
 export const API_URL =
  process.env.NEXT_PUBLIC_API_URL != null
    ? process.env.NEXT_PUBLIC_API_URL
-    : `http://localhost:${API_DEFAULT_PORT}`
+    : `http://127.0.0.1:${API_DEFAULT_PORT}`

 export const api = axios.create({
  baseURL: API_URL,
--- a/vercel.json
+++ b/vercel.json
@ -1,4 +1,5 @@
 {
+  "$schema": "https://openapi.vercel.sh/vercel.json",
  "github": {
    "enabled": false
  }