text: import Link from 'next/link';
  
  import { useTranslation } from 'next-i18next'
  import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
  
  import { Header } from '../components/Header'
  import { Footer } from '../components/Footer'
  
  const Homepage = () => {
  
    const { t } = useTranslation('common');
  
    return (
      <>
        <main>
          <Header heading={t('h1')} title={t('title')} />
          <div>
            <Link
              href='/'
              locale={'en'}
            >
              <button>
                {t('change-locale', { lng: 'en' })}
              </button>
            </Link>
            <Link
              href='/'
              locale={'de'}
            >
              <button>
                {t('change-locale', { lng: 'de' })}
              </button>
            </Link>
            <Link href='/second-page'>
              <button
                type='button'
              >
                {t('to-second-page')}
              </button>
            </Link>
          </div>
        </main>
        <Footer />
      </>
    )
  }
  
  export const getStaticProps = async ({ locale }) => ({
    props: {
      ...await serverSideTranslations(locale, ['common', 'footer']),
    },
  })
  
  export default Homepage
  