next-i18next 无法与 Next Auth + Apollo 一起正常工作答案

【问题标题】：next-i18next isn't working properly with Next Auth + Apollonext-i18next 无法与 Next Auth + Apollo 一起正常工作
【发布时间】：2022-02-17 21:17:48
【问题描述】：

我最近加入了一个新项目，我必须实施 i18n。前端栈：NextJS (with Next Auth) + Apollo + next-i18next 我跟着 next-i18next starter 来实现翻译。在我添加 addWithTranslation 部分之前，一切正常，如下面的代码所示：

在_app.tsx

    import { appWithTranslation } from 'next-i18next';

    const MyApp = ({ Component, pageProps: { session, ...pageProps } }) => {
    return (
        <>
            <ApolloProvider client={client}>
                    <SessionProvider session={session}>
                        {Component.requireAuth ? (
                            <>
                                <Auth>
                                    <Layout>
                                        <Component {...pageProps} />
                                    </Layout>
                                </Auth>
                            </>
                        ) : (
                            <>
                                <Component {...pageProps} />
                            </>
                        )}
                    </SessionProvider>
            </ApolloProvider>
        </>
    );
};

const Auth = ({ children }) => {
    const router = useRouter();
    const { status } = useSession();

useEffect(() => {
        if (status === 'unauthenticated') {
            router.push('/auth/signIn');
        }
    }, [status, router]);

    if (status === 'authenticated') {
        return children;
    }

    return (
        <div className="lds-ellipsis">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    );
};

export default appWithTranslation(MyApp);

我的问题：每当用户尝试访问另一个页面时，整个应用程序似乎都会重新安装，因此它会重定向到/auth/signin，而不是立即到达正确的页面。当我记录会话时，每次用户导航到另一个页面时它似乎都会重置（仅当我添加 appWithTranslation() 部分时）。

有人知道我该如何解决吗？

【问题讨论】：

标签： reactjs next.js apollo next-auth next-i18next

【解决方案1】：

基于this discussion，您不应将SessionProvider 包装在appWithTranslation 中。所以尝试这样的事情：

import { appWithTranslation } from 'next-i18next';

const MyApp = ({ Component, pageProps }) => {
  return (
    <>
      {Component.requireAuth ? (
        <Auth>
          <Layout>
            <Component {...pageProps} />
          </Layout>
        </Auth>
      ) : (
        <Component {...pageProps} />
      )}
    </>
  );
};

const AppWithI18n = appWithTranslation(MyApp);

const AppWithAuth = (props) => {
  const { pageProps } = props;

  return (
    <ApolloProvider client={pageProps.client}>
      <SessionProvider session={pageProps.session}>
        <AppWithI18n {...props} />
      </SessionProvider>
    </ApolloProvider>
  );
};

export default AppWithAuth;

【讨论】：