ohmyform-ui/pages/index.tsx

import { Layout } from 'antd'
import { AuthFooter } from 'components/auth/footer'
import { NextPage } from 'next'
import getConfig from 'next/config'
import { useRouter } from 'next/router'
import React, { useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { LoadingPage } from '../components/loading.page'

const { publicRuntimeConfig } = getConfig()

const Index: NextPage = () => {
  const router = useRouter()
  const { t } = useTranslation()

  useEffect(() => {
    if (router.pathname !== window.location.pathname) {
      let href = router.asPath
      const as = router.asPath

      ;[/(\/form\/)[^/]+/i, /(\/admin\/forms\/)[^/]+/i, /(\/admin\/users\/)[^/]+/i].forEach((r) => {
        if (r.test(as)) {
          href = href.replace(r, '$1[id]')
        }
      })

      router.replace(href, as)
    }
  })

  if (
    publicRuntimeConfig.spa ||
    (process.browser && router.pathname !== window.location.pathname)
  ) {
    return <LoadingPage message={t('loading')} />
  }

  return (
    <Layout
      style={{
        height: '100vh',
        background: '#437fdc',
      }}
    >
      <img
        alt={'OhMyForm'}
        style={{
          margin: 'auto',
          maxWidth: '90%',
          width: 500,
          textAlign: 'center',
        }}
        src={require('../assets/images/logo_white.png')}
      />

      <AuthFooter />
    </Layout>
  )
}

export default Index