Next.js结合next-intl实现SCSS Modules多语言样式适配

不用重复编写SCSS文件，核心思路是利用CSS逻辑属性结合next-intl的语言标识，自动适配RTL（阿拉伯语）和LTR（英语等）的布局差异，再配合少量CSS变量处理特殊数值需求。

1. 根布局动态设置语言方向 #

在根布局文件（如app/layout.tsx）中，通过next-intl的useLocale获取当前语言，给根html标签设置dir属性：

import { useLocale } from 'next-intl';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const locale = useLocale();
  const dir = locale === 'ar' ? 'rtl' : 'ltr';

  return (
    <html lang={locale} dir={dir}>
      <body>{children}</body>
    </html>
  );
}

2. 用CSS逻辑属性替换原有左右属性 #

把组件SCSS中所有和左右相关的属性，替换成CSS逻辑属性，自动适配方向：

示例组件SCSS修改：

// 原代码
.card {
  padding-left: 20px;
  left: 0;
  text-align: left;
}

// 修改后
.card {
  padding-inline-start: 20px;
  inset-inline-start: 0;
  text-align: start;
}

3. 特殊数值用CSS变量适配 #

如果某些数值需要在不同语言下单独调整（比如LTR时padding-left是20px，RTL时padding-right是15px），可以在根布局注入动态变量：

// 根布局中添加动态style
<body style={{
  '--inline-start-padding': locale === 'ar' ? '15px' : '20px',
  '--inline-end-padding': locale === 'ar' ? '20px' : '15px'
}}>

然后在组件SCSS中使用：

.card {
  padding-inline-start: var(--inline-start-padding);
  padding-inline-end: var(--inline-end-padding);
}

4. 兼容已有代码的快速方案 #

如果不想大面积修改原有SCSS属性，可以利用根元素的dir属性做条件样式：

.card {
  padding-left: 20px;
  left: 0;
}

// 针对RTL语言覆盖样式
[dir="rtl"] .card {
  padding-left: 0;
  padding-right: 20px;
  left: auto;
  right: 0;
}

这种方式不需要修改原有LTR代码，只需要补充RTL的覆盖规则，适合已有大量代码的项目。

内容的提问来源于stack exchange，提问作者Elias