feat: no literals eslint rule

.eslintrc.json

@@ -43,6 +43,13 @@
           }
         ]
       }
+    ],
+    "react/jsx-no-literals": [
+      "error",
+      {
+        "noStrings": true,
+        "ignoreProps": true
+      }
     ]
   }
 }

src/app/[locale]/page.tsx

@@ -1,24 +1,25 @@
+'use client';
+
 import { Inter } from 'next/font/google';
 
 import SampleForm from '@/components/sample-form';
 import serverLogger from '@/lib/axiom/log-server';
+import { useScopedI18n } from '@/i18n/client';
 
 const inter = Inter({ subsets: ['latin'] });
 
 export default function Page() {
+  const t = useScopedI18n('common');
+
   const logger = serverLogger();
 
   logger.info('Hello from server logger!');
 
   return (
     <main
       className={`flex h-screen flex-col items-center justify-center gap-8 text-center ${inter.className}`}>
-      <h1 className="text-4xl font-bold">
-        Next.js + Tailwind CSS + TypeScript
-      </h1>
-      <h2 className="text-lg font-bold text-gray-500">
-        with i18n, jest, zod, react-hook-form
-      </h2>
+      <h1 className="text-4xl font-bold">{t('title')}</h1>
+      <h2 className="text-lg font-bold text-gray-500">{t('subtitle')}</h2>
       <SampleForm />
     </main>
   );

src/i18n/en/common.ts

@@ -1,4 +1,7 @@
 export default {
   'test#other': '{count} tests',
   'test#one': 'test',
+
+  title: 'Next.js + Tailwind CSS + TypeScript',
+  subtitle: 'with i18n, jest, zod, react-hook-form',
 } as const;

src/i18n/sl/common.ts

@@ -3,4 +3,7 @@ export default {
   'test#two': '{count} testa',
   'test#few': '{count} testi',
   'test#other': '{count} testov',
+
+  title: 'Next.js + Tailwind CSS + TypeScript',
+  subtitle: 'with i18n, jest, zod, react-hook-form',
 } as const;