所以,情况就是这样。
我正在尝试在应用程序初始化中获取“语言”cookie,以相应地更改 UI。例如,如果语言是“阿拉伯语”(ar),我将布局恢复为“RTL”,反之亦然。
有两种方法可以实现,第一种方法是获取“useEffect()”里面的cookie,像这样......
import { parseCookies } from "nookies";
import { useEffect, useLayoutEffect, useState } from "react";
import { StyleSheetManager, ThemeProvider } from "styled-components";
import rtlPlugin from "stylis-plugin-rtl";
function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
const [appLanguage, setAppLanguage] = useState("en");
useEffect(() => {
const cookies = parseCookies();
setAppLanguage(cookies.language);
}, []);
useEffect(() => {
history.scrollRestoration = "manual";
if (appLanguage === "ar") {
document.documentElement.classList.add("rtl");
document.documentElement.dir = "rtl";
} else {
document.documentElement.classList.remove("rtl");
document.documentElement.dir = "ltr";
}
}, [appLanguage]);
console.log("Appp Language", appLanguage);
return (
<>
<ThemeProvider theme={theme}>
<StyleSheetManager stylisPlugins={[rtlPlugin]}>
<>
<GlobalStyle />
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
</>
</StyleSheetManager>
</ThemeProvider>
</>
);
}
export default wrapper.withRedux(MyApp);
这可行,但您可以想象的问题是页面在默认的“英语”布局下闪烁片刻,直到useEffect()
执行。
避免这种闪烁行为的另一种方法当然是getInitialProps
在 _app.tsx 级别上使用,就像这样......
MyApp.getInitialProps = async (appContext: AppContext) => {
const cookies = nookies.get(appContext)
const appLanguage = cookies.language;
const appProps = await App.getInitialProps(appContext);
return { appLanguage, ...appProps };
};
现在,您可以在根 _app 级别使用“appLanguage”道具来做任何您想做的事情。
这种方法的唯一问题是“Next.js”团队不建议在 _app 级别使用“getInitialProps”,因为根据文档......
“这会禁用执行自动静态优化的能力,导致应用程序中的每个页面都在服务器端呈现。”
另一方面,您似乎无法在根 _app 级别使用“getServerSideProps”。
所以,我的问题是,如何两全其美?获取一个状态以从根“_app”级别共享它而不使用 getInitialProps 来不渲染每个页面服务器端?
甚至可能吗?或者有没有办法在根“_app”文件中使用“getServerSideProps”?
任何帮助表示赞赏。