Hello! π
I recently built my own website, also using NextJS and with inspiration from your great work on mulitlingual support for SSG projects! π
There were two points that I would be happy to discuss with you, if that's ok....
1.
On your src/pages/index.tsx
, why using window.location.replace
instead of next router? If I'm right, you could have achieve the same goal with router.replace('/[lang]',
/${getInitialLocale()})
, couldn't you? So if true is there a particular reason on using the window.location.replace
here?
2.
Finally, I was having some SEO issues, as the root path without language was not properly crawled by Twitter Card Validator:
And I was thinking about what solution I could find:
- rewriting
/
to /fr
(default locale), but I was not sure about the risk of duplicate content for robots... π€
- copying code from default locale homepage to index...Hmm seems dirty to me π€
- using the same approach as the MDN website, which seems to apply quite well with yours (and mine, so^^). Then I'd have to copy my SEO meta tags to this
src/pages/index.tsx
in order to make Twitter Card Valdator happy (and other SEO tools, I guess...).
I chose this last option, and added my SEO tags (component) in this page. And now here is my new src/pages/index.js
:
import PropTypes from 'prop-types'
import Head from 'next/head'
import { useRouter } from 'next/router'
import { useEffect } from 'react'
import { getI18n } from '@utils/api'
import { DEFAULT_LOCALE, useLocale } from '@utils/locale'
import Seo from '@components/Seo'
import { getInitialLocale } from '@utils/locale'
export default function Index({ translations }) {
const { t } = useLocale(translations)
const router = useRouter()
useEffect(() => {
router.replace('/[lang]', `/${getInitialLocale()}`)
})
return (
<>
<Seo description={[t('description.title'), t('description.subtitle')].join(' ')} />
<Head>
<meta key="robots" name="robots" content="noindex, nofollow" />
</Head>
</>
)
}
Index.propTypes = {
translations: PropTypes.arrayOf(
PropTypes.object
).isRequired
}
export async function getStaticProps({ params }) {
const lang = params?.lang || DEFAULT_LOCALE
const translations = getI18n(lang, 'home')
return { props: { translations }}
}
What do you think about it? I'd be very happy to discuss about these points with you! Don"t hesitate also to take a look at my repo π