next-i18next serverSideTranslations导致_app.js在NextJS路由改变时重新渲染

Question

export async function getServerSideProps({ locale }) {
const data = await serverSideTranslations(locale, ['apple', 'home']);
return {
props: data,
};
}
export default function IndexPage() {
return <h1>Hi!</h1>
}

我注意到，如果你传递数据给道具，那么当你改变路由在NextJS _app.js是重新渲染导致闪烁(给一个白色的背光)，但如果你不传递数据给道具，那么一切工作正常。如何去除闪烁?

next-i18next.config.js

module.exports = {
i18n: {
defaultLocale: 'fr',
locales: ['fr', 'en'],
},
reloadOnPrerender: process.env.NODE_ENV === 'development',
};

next.config.js

const { i18n } = require('./next-i18next.config');
/** @type {import('next').NextConfig} */
const nextConfig = {
i18n,
reactStrictMode: true,
swcMinify: true,
poweredByHeader: false,
async rewrites() {
return [
{
source: '/api/:path*',
destination: 'http://localhost:8080/:path*',
},
];
},
};
module.exports = nextConfig;

Answer 1

事实证明，如果你打开一个没有serverSideTranslations的路由，那么这会导致重置状态并重新渲染_app.js。解决方案:有必要在每一页都注明

serverSideTranslations