I am trying to implement localization with next-i18next on the website(single page), everything works as it should be except when I change the language through the nextjs router, the page always reloads and returns to the top of the page (obviously I want only components to re-render with different language), And I cannot figure out why is that so ( maybe something with getStaticProps that I am missing ? ).
under are snippets from my code:
next-i18next.config
module.exports = {
i18n: {
locales: ['en', 'cs'],
defaultLocale: 'en',
},
};
App file --> I am also pulling some data from MongoDB with getStaticProps for my components
interface HomeProps {
featuredProjectsData: ProjectProps[];
projectCardsData: CardProps[];
locale: any;
}
const Home: NextPage<HomeProps> = ({ projectCardsData, featuredProjectsData,locale }) => {
return (
<>
<Head>
<title>Personal Portfolio</title>
<meta
name='description'
content='Welcome to my personal website, where you can find information about me, my work/projects and also contact details'
/>
</Head>
{useMediaQuery(darkTheme.breakpoints.up('md')) && <Socials />}
<Header />
<Container maxWidth='lg'>
<main>
<HeroSection />
<About />
<Skills />
<FeaturedProjects projects={featuredProjectsData} />
<ProjectCards cards={projectCardsData} />
<Contact />
</main>
<Footer />
</Container>
</>
);
};
export const getStaticProps: GetStaticProps = async ({ locale }) => {
const client = await clientPromise;
const db = client.db('personal-website'); // accessing db
let featuredCollection = await db.collection('featured').find({}).toArray(); // accessing collection & getting all documents
let projectsCollection = await db.collection('projects').find({}).toArray();
featuredCollection = JSON.parse(JSON.stringify(featuredCollection));
projectsCollection = JSON.parse(JSON.stringify(projectsCollection));
return {
props: {
featuredProjectsData: featuredCollection.map((featured) => ({
title: featured.title,
description: featured.desc,
tech: featured.usedtech,
image: featured.img,
links: featured.links,
id: featured._id.toString(),
})),
projectCardsData: projectsCollection.map((project) => ({
title: project.title,
description: project.desc,
tags: project.tags,
links: project.links,
id: project._id,
})),
...(await serverSideTranslations(locale as string, ['common'])),
},
};
};
export default Home;
Options ( here I am defining LI to toggle between langs )
const Options = () => {
const router = useRouter();
const { theme, resolvedTheme, setTheme } = useTheme();
const loaded = useLoaded();
return (
<StyledOptions>
<ul>
<li>
<IconButton
onClick={() => setTheme(resolvedTheme === 'light' ? 'dark':'light')}
>
{theme === 'dark' && loaded ? <MdLightMode /> : <MdDarkMode />}
</IconButton>
</li>
<li onClick={() => router.push('/', '/', { locale: 'cs' })}>
CZK
</li>
<li onClick={() => router.push('/', '/', { locale: 'en' })} >
ENG
</li>
</ul>
</StyledOptions>
);
};
export default Options;
HeroSection - Here I am calling useTranslation hook and display string const HeroSection = () => { let { t } = useTranslation(); return ( {t('common:welcome_msg')} );
common file from /public/locales/en
{ "welcome_msg": "Hello there, I am" }
Thank you for any advice or direction where to search
