解决方案：

查看文档
Internationalized Routing

• 其他解决方案 *

正如next.js docs所说，app.tsx不支持Next.js数据获取方法，如getStaticProps或getServerSideProps。这意味着您不能在app.tsx中给予本地查询参数并决定页面数据或样式
所以你应该从nextjs的数据获取方法中获取查询参数，并将其作为prop传递给Next JS页面。
将布局 Package 在下一个页面中，并将查询传递给它。

// pages/index.js
export async function getServerSideProps(context) {

    return {
        props: { 
           local: context.query.local
       },
     };
    }

function Index(props) {
    const { local } = props;

    return (
     <Layout local={local}>
       <main>
          <div> content </div>
       </main>
     </Layout>
     )
}

建议

我认为这些链接会有帮助
react query as a state management
react query SSR
reduxt toolkit ssr