Next.js 使用样式化组件在LTR和RTL之间切换？

我正在用next.js构建一个英语-阿拉伯语应用程序，希望用户能够在两种语言之间切换。
我在next.js中找到了这个示例：。它使用StylesRTPlugin，可翻转所有CSS样式以适应RTL布局：

/\u document.js

它工作正常，但问题是我无法根据当前的

区域设置有条件地删除
StylesRTLplugin
，因为我无法访问
\u document.js
中的
useRouter（）

我希望能够做到的是：

将此配置添加到
.babelrc
以强制在服务器上呈现样式

  "plugins": [
    [
      "styled-components",
      {
        "ssr": true,
      }
    ]
  ]

我尝试在
\u app.js
中使用
，而不是在
\u document.js
中使用
\locale
道具，效果很好，但我认为这不是服务器端渲染的正确方法，在
\u document.js
中的页面渲染过程中应该提供样式，但这是否意味着，即使
在“\u document.js”中的
collectStyles（）
之外，也会在服务器中预先呈现正确的样式？我不知道。但是，如果您只是简单地使用“查看页面源代码”（而不是元素检查器！）查看获取的html代码，会怎么样呢。如果样式为ssr-d，则应在其中可见。