Next.js 13+next-intl切换语言时持久化状态与上下文的方法

基于Next.js 13 App Router构建网站，使用next-intl实现前缀式国际化路由（如example.com/en/xxx或example.com/nl/xxx）。切换语言时，通过useRouter跳转到对应locale前缀的路由会导致所有上下文状态重置——包括NextIntlClientProvider外部的上下文（比如测试用的TestContext中的showDiv状态）。实际场景中需要让包含语言切换按钮的有状态下拉菜单在切换语言时保持展开状态，尝试过next-intl扩展的路由工具、调整Provider嵌套、移动RootLayout位置等方法均未解决问题。

项目结构 #

├── messages
│   ├── en.json
│   └── nl.json
├── middleware.ts
├── contexts
│   └── testContext.tsx
└── app
    └── [locale]
        ├── layout.tsx
        └── page.tsx

关键代码 #

/middleware.ts #

import createMiddleware from "next-intl/middleware";

export default createMiddleware({
  locales: ["en", "nl"],
  defaultLocale: "en",
});

export const config = {
  matcher: ["/((?!api|_next|.*\\..*).*)"],
};

/contexts/testContext.tsx #

"use client";

import {
  Dispatch,
  ReactNode,
  SetStateAction,
  createContext,
  useState,
} from "react";

type TestContext = {
  showDiv: boolean;
  setShowDiv: Dispatch<SetStateAction<boolean>>;
};

export const TestContext = createContext<TestContext | null>(null);

const TestContextProvider = ({ children }: { children: ReactNode }) => {
  const [showDiv, setShowDiv] = useState(false);

  return (
    <TestContext.Provider value={{ showDiv, setShowDiv }}>
      {children}
    </TestContext.Provider>
  );
};

export default TestContextProvider;

/app/[locale]/layout.tsx #

import { NextIntlClientProvider } from "next-intl";
import { notFound } from "next/navigation";
import TestContextProvider from "@/contexts/testContext";

export function generateStaticParams() {
  return [{ locale: "en" }, { locale: "nl" }];
}

export default async function RootLayout({
  children,
  params: { locale },
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  let messages;
  try {
    messages = (await import(`../../messages/${locale}.json`)).default;
  } catch (error) {
    notFound();
  }

  return (
    <html lang={locale}>
      <TestContextProvider>
        <NextIntlClientProvider locale={locale} messages={messages}>
          <body>{children}</body>
        </NextIntlClientProvider>
      </TestContextProvider>
    </html>
  );
}

方案1：将状态提升到全局客户端根Layout（推荐） #

核心思路：让需要持久化的状态Provider脱离[locale]路由层级，因为切换语言时[locale]下的所有组件会重新挂载，而外层的全局Layout不会被重置。

1. 在app目录下创建根layout.tsx（跳出[locale]文件夹）：

"use client";
import TestContextProvider from "@/contexts/testContext";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        <TestContextProvider>{children}</TestContextProvider>
      </body>
    </html>
  );
}

2. 修改app/[locale]/layout.tsx，移除内部的TestContextProvider：

import { NextIntlClientProvider } from "next-intl";
import { notFound } from "next/navigation";

export function generateStaticParams() {
  return [{ locale: "en" }, { locale: "nl" }];
}

export default async function LocaleLayout({
  children,
  params: { locale },
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  let messages;
  try {
    messages = (await import(`../../messages/${locale}.json`)).default;
  } catch (error) {
    notFound();
  }

  return (
    <NextIntlClientProvider locale={locale} messages={messages}>
      {children}
    </NextIntlClientProvider>
  );
}

此时TestContextProvider位于[locale]路由的上层，切换语言时仅[locale]下的组件重新挂载，全局上下文状态得以保留。

方案2：用localStorage持久化状态 #

如果无法调整Provider层级，可将状态存储到浏览器的localStorage中，组件重新挂载时读取初始值：

修改/contexts/testContext.tsx：

"use client";

import {
  Dispatch,
  ReactNode,
  SetStateAction,
  createContext,
  useState,
  useEffect,
} from "react";

type TestContext = {
  showDiv: boolean;
  setShowDiv: Dispatch<SetStateAction<boolean>>;
};

export const TestContext = createContext<TestContext | null>(null);

const TestContextProvider = ({ children }: { children: ReactNode }) => {
  // 从localStorage读取初始状态
  const [showDiv, setShowDiv] = useState(() => {
    if (typeof window !== "undefined") {
      const saved = localStorage.getItem("showDiv");
      return saved ? JSON.parse(saved) : false;
    }
    return false;
  });

  // 状态变化时同步到localStorage
  useEffect(() => {
    localStorage.setItem("showDiv", JSON.stringify(showDiv));
  }, [showDiv]);

  return (
    <TestContext.Provider value={{ showDiv, setShowDiv }}>
      {children}
    </TestContext.Provider>
  );
};

export default TestContextProvider;

该方案适合需要长期保留的状态，即使关闭页面再打开也能恢复，但需注意localStorage的跨标签页同步问题（如需同步需额外监听storage事件）。

方案3：用URL参数传递临时状态（适合下拉菜单场景） #

针对下拉菜单展开/折叠这类临时状态，可在切换语言时通过URL参数传递状态，组件挂载后读取参数恢复状态：

1. 语言切换按钮组件：

"use client";
import { useRouter, usePathname } from "next/navigation";
import { useContext } from "react";
import { TestContext } from "@/contexts/testContext";

export default function LanguageSwitcher() {
  const router = useRouter();
  const pathname = usePathname();
  const { showDiv } = useContext(TestContext)!;

  const switchLocale = (newLocale: string) => {
    const searchParams = new URLSearchParams();
    if (showDiv) {
      searchParams.set("menuOpen", "true");
    }
    // 构建目标路由，保留原有路径并添加状态参数
    const targetPath = `/${newLocale}${pathname.split("/").slice(2).join("/")}`;
    router.push(`${targetPath}?${searchParams.toString()}`);
  };

  return (
    <div>
      <button onClick={() => switchLocale("en")}>English</button>
      <button onClick={() => switchLocale("nl")}>Nederlands</button>
    </div>
  );
}

2. 读取URL参数恢复状态的组件：

"use client";
import { useContext, useEffect } from "react";
import { TestContext } from "@/contexts/testContext";
import { useSearchParams } from "next/navigation";

export default function TestComponent() {
  const { showDiv, setShowDiv } = useContext(TestContext)!;
  const searchParams = useSearchParams();

  useEffect(() => {
    const menuOpen = searchParams.get("menuOpen");
    if (menuOpen === "true") {
      setShowDiv(true);
      // 可选：移除URL参数，避免刷新后参数残留
      const newParams = new URLSearchParams(searchParams);
      newParams.delete("menuOpen");
      window.history.replaceState({}, "", `${window.location.pathname}${newParams.toString() ? `?${newParams.toString()}` : ""}`);
    }
  }, [searchParams, setShowDiv]);

  return (
    <div>
      <button onClick={() => setShowDiv(!showDiv)}>Toggle Div</button>
      {showDiv && <div>Visible when showDiv is true</div>}
    </div>
  );
}

该方案适合临时状态传递，不会持久化存储，但需要处理URL参数的读取和清理。

内容的提问来源于stack exchange，提问作者Wouter van der Laan