feat(next-international): plurals with count 0 works with #zero

packages/next-international/__tests__/use-i18n.test.tsx

@@ -315,4 +315,69 @@ describe('useI18n', () => {
 
     expect(Array.isArray(result.current)).toBe(true);
   });
+
+  const pluralTestCases = [
+    {
+      count: 0,
+      expected: 'No cows (#zero)',
+    },
+    {
+      count: 1,
+      expected: 'One cow (#one)',
+    },
+    {
+      count: 2,
+      expected: '2 cows (#other)',
+    },
+    ...[...new Array(30).fill(0)].map((_, i) => ({ count: i + 3, expected: `${i + 3} cows (#other)` })),
+  ];
+
+  it.each(pluralTestCases)('should return correct plural: $count ($expected)', async ({ count, expected }) => {
+    const { useI18n, I18nProvider } = createI18n({
+      en: () => import('./utils/en'),
+      fr: () => import('./utils/fr'),
+    });
+
+    const App = ({ children }: { children: React.ReactNode }) => {
+      return <I18nProvider locale={en}>{children}</I18nProvider>;
+    };
+
+    const { result } = renderHook(
+      () => {
+        const t = useI18n();
+        return t('cow', {
+          count,
+        });
+      },
+      {
+        wrapper: App,
+      },
+    );
+
+    expect(result.current).toBe(expected);
+  });
+  it('should fallback on #other if #zero is not defined', async () => {
+    const { useI18n, I18nProvider } = createI18n({
+      en: () => import('./utils/en'),
+      fr: () => import('./utils/fr'),
+    });
+
+    const App = ({ children }: { children: React.ReactNode }) => {
+      return <I18nProvider locale={en}>{children}</I18nProvider>;
+    };
+
+    const { result } = renderHook(
+      () => {
+        const t = useI18n();
+        return t('horse', {
+          count: 0,
+        });
+      },
+      {
+        wrapper: App,
+      },
+    );
+
+    expect(result.current).toBe('0 horses (#other)');
+  });
 });

packages/next-international/__tests__/utils/en.ts

@@ -10,4 +10,9 @@ export default {
   'namespace.subnamespace.user.description': '{name} is {years} years old',
   'only.exists.in.en': 'EN locale',
   'double.param': 'This {param} is used twice ({param})',
+  'cow#zero': 'No cows (#zero)',
+  'cow#one': 'One cow (#one)',
+  'cow#other': '{count} cows (#other)',
+  'horse#one': 'One horse (#one)',
+  'horse#other': '{count} horses (#other)',
 } as const;

packages/next-international/src/common/create-t.ts

@@ -27,8 +27,14 @@ export function createT<Locale extends BaseLocale, Scope extends Scopes<Locale>
       .filter(key => key.includes('#'))
       .map(key => key.split('#')[0]),
   );
+
   const pluralRules = new Intl.PluralRules(context.locale);
 
+  function getPluralKey(count: number) {
+    if (count === 0) return 'zero';
+    return pluralRules.select(count);
+  }
+
   function t<Key extends LocaleKeys<Locale, Scope>, Value extends LocaleValue = ScopedValue<Locale, Scope, Key>>(
     key: Key,
     ...params: CreateParams<ParamsObject<Value>, Locale, Scope, Key, Value>
@@ -48,7 +54,7 @@ export function createT<Locale extends BaseLocale, Scope extends Scopes<Locale>
       const isPluralKey = scope ? pluralKeys.has(`${scope}.${key}`) : pluralKeys.has(key);
 
       if (isPluralKey) {
-        key = `${key}#${pluralRules.select(paramObject.count)}` as Key;
+        key = `${key}#${getPluralKey(paramObject.count)}` as Key;
         isPlural = true;
       }
     }