nextjs＆＃x2B; Next-I18Next：语言的更改总是重新加载页面

发布于 2025-02-09 07:02:42 字数 4136 浏览 1 评论 0原文

我正在尝试在网站上使用Next-i18next（单页）实现本地化，一切都应该奏效，除非我通过NextJS路由器更改语言，否则页面总是重新加载并返回到页面的顶部只需要用不同的语言重新渲染组件），我不知道为什么这是这样的（也许我缺少getStaticProps的东西？）。

在我的代码中是摘要：

next-i18next.config

module.exports = {
    i18n: {
        locales: ['en', 'cs'],
        defaultLocale: 'en',
    },
};

应用程序文件 - ＆gt;我还在使用GetStaticProps中获取一些组件

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;

选项中的MongoDB数据（在这里我定义了Li要在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;

- 在这里，我在这里调用Usetranslation Hook并显示字符串 const Herosection =（）=＆gt; { 令{t} = usetranslation（）; 返回（ { ）；

来自/public/locales/en的通用文件，

{ "welcome_msg": "Hello there, I am" }

谢谢您的任何建议或指示

原文

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