Next.js 国际化路由跳转后语言没更新怎么办？

欧阳艳兵提问于 2026-03-21 10:55:20 阅读 22

框架

我在用 Next.js 的 App Router 做多语言网站，按照官方文档配置了 i18n，切换语言时用 router.push('/en/about') 跳转，页面 URL 变了但内容还是原来语言的，刷新才生效。是不是哪里漏了？

我的 next.config.js 是这样配的：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  i18n: {
    locales: ['zh', 'en'],
    defaultLocale: 'zh',
  },
};
module.exports = nextConfig;

我来解答赞 2 收藏

反馈

1 条解答

一鸣 Dev Lv1

遇到这个问题，通常是因为组件没有重新渲染导致的。你需要确保在路由变化时，组件能够感知到语言的变化并重新渲染。

首先，检查一下你是否在组件内部使用了 useRouter 或 usePathname 来获取当前路径和语言信息。这些钩子会在路径变化时触发重新渲染。

其次，确保你的组件依赖于语言变化重新加载数据或内容。可以尝试使用 useEffect 来监听路径变化，并在这个钩子中执行相应的操作。

这里有一个简单的例子：

import { useRouter } from 'next/navigation';

import { useEffect, useState } from 'react';



function MyComponent() {

  const router = useRouter();

  const [content, setContent] = useState('');



  useEffect(() => {

    // 根据当前路径加载对应语言的内容

    const loadContent = async () => {

      const locale = router.locale || 'zh'; // 获取当前语言

      const response = await fetch(/api/content?locale=${locale});

      const data = await response.json();

      setContent(data.content);

    };



    loadContent();

  }, [router.locale]); // 监听语言变化



  return <div>{content}</div>;

}



export default MyComponent;

注意这里的关键在于 useEffect 的依赖数组里包含了 router.locale，这样当语言变化时，useEffect 会重新执行，从而加载对应语言的内容。

如果问题依然存在，检查一下是否有地方缓存了旧的数据没有及时更新。有时候手动管理的状态或者第三方库的状态需要额外注意。

2026-03-21 11:07