Next.js切换语言后如何触发getServerSideProps并刷新页面？

核心问题修正与方案 #

你当前的代码存在两个关键问题：一是getServerSideProps错误使用了context.locale（这是Next.js内置路由本地化的属性，而非查询参数）；二是router.push的调用方式不对，导致未触发服务器端渲染。以下是具体解决方案：

1. 修正getServerSideProps：从查询参数获取语言

因为你使用?lang=en这种查询参数方式做本地化，所以需要从context.query中读取语言值，同时设置默认语言兜底：

export const getServerSideProps = async (context) => {
  // 从查询参数取语言，默认值设为'en'
  const locale = context.query.lang || 'en';
  const data = await fetchData(locale);

  return {
    props: data,
    // 如果数据为空返回404，按需调整
    notFound: !data?.index 
  };
};

2. 修复语言切换函数：触发getServerSideProps

当前的router.push调用未正确修改查询参数，因此无法触发服务器端重新获取数据。调整为直接修改URL的查询参数：

const changeLanguage = (newLang) => {
  // 基于当前路由，替换/新增lang查询参数
  router.push({
    pathname: router.pathname,
    query: { ...router.query, lang: newLang }
  });
};

• 这种方式会触发getServerSideProps，因为页面配置了服务器端渲染逻辑，Next.js会在导航时重新执行该函数获取对应语言的数据。
• 如果上述方式仍未触发SSR，可以改用强制页面刷新（适合不需要客户端过渡的场景）：

  const changeLanguage = (newLang) => {
    const currentUrl = new URL(window.location.href);
    currentUrl.searchParams.set('lang', newLang);
    window.location.href = currentUrl.toString();
  };
  

3. 正确检测语言切换

在客户端可以通过监听路由变化来检测语言切换，同步本地状态：

import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';

const Index = ({ index }) => {
  const router = useRouter();
  const [currentLang, setCurrentLang] = useState(router.query.lang || 'en');

  useEffect(() => {
    // 监听路由完成事件，更新当前语言
    const handleLangChange = () => {
      setCurrentLang(router.query.lang || 'en');
    };

    router.events.on('routeChangeComplete', handleLangChange);
    // 组件卸载时移除监听
    return () => router.events.off('routeChangeComplete', handleLangChange);
  }, [router]);

  // ...其余代码
};

这样每次语言切换后，currentLang会自动更新，你可以基于这个状态做客户端的UI适配（比如切换语言按钮的高亮状态）。

内容的提问来源于stack exchange，提问作者Developer