feat(frontend): rsc i18n

.github/workflows/frontend-lint.yml

@@ -0,0 +1,26 @@
+name: Frontend Linter
+
+on: [pull_request, push]
+
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          submodules: 'true'
+
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '20'
+
+      - uses: pnpm/action-setup@v4
+      - name: Install dependency
+        run: pnpm install
+
+      - name: Run Lint
+        run: npm run lint
+        working-directory: frontend

frontend/src/app/[lang]/appRouterI18n.ts

@@ -2,8 +2,7 @@ import 'server-only'
 
 import type { LinguiConfig } from '@lingui/conf'
 import { I18n, Messages, setupI18n } from '@lingui/core'
-
-import linguiConfig from '../../../lingui.config.mjs'
+import linguiConfig from 'lingui.config.mjs'
 
 const { locales } = linguiConfig as LinguiConfig
 type SupportedLocales = string
@@ -34,5 +33,5 @@ export const allI18nInstances: AllI18nInstances = locales.reduce((acc, locale) =
 }, {})
 
 export function getI18nInstance(locale: string) {
-  return allI18nInstances[locale]
+  return allI18nInstances[locale] ?? allI18nInstances[linguiConfig.sourceLocale!]
 }

frontend/src/app/[lang]/layout.tsx

@@ -1,17 +1,17 @@
+import '@/styles/globals.css'
+
 import { setI18n } from '@lingui/react/server'
-import { ReactNode } from 'react'
+import type { Metadata } from 'next'
 
 import { getI18nInstance } from '@/app/[lang]/appRouterI18n'
 import { LinguiClientProvider } from '@/app/[lang]/LinguiClientProvider'
+import { BaseAppRouterProps } from '@/types/BaseAppRouterProps'
 
-interface Props {
-  params: {
-    lang: string
-  }
-  children: ReactNode
+export const metadata: Metadata = {
+  title: 'UTXO Stack Explorer',
 }
 
-export default function RootLayout({ params: { lang }, children }: Props) {
+export default function RootLayout({ params: { lang }, children }: BaseAppRouterProps) {
   const i18n = getI18nInstance(lang)
   setI18n(i18n)
 

frontend/src/app/[lang]/page.tsx

@@ -1,8 +1,14 @@
+import { t } from '@lingui/macro'
+
+import { getI18nInstance } from '@/app/[lang]/appRouterI18n'
 import { Link } from '@/components/ui/link'
+import type { BaseAppRouterProps } from '@/types/BaseAppRouterProps'
 
-export default function Home() {
+export default function Home({ params: { lang } }: BaseAppRouterProps) {
+  const i18n = getI18nInstance(lang)
   return (
     <Link href="/about" bg="#000" color="white" locale="en">
+      {t(i18n)`Test`}
       /About
     </Link>
   )

frontend/src/locales/en/messages.po

@@ -12,3 +12,7 @@ msgstr ""
 "Last-Translator: \n"
 "Language-Team: \n"
 "Plural-Forms: \n"
+
+#: src/app/[lang]/page.tsx:11
+msgid "Test"
+msgstr "Test"

frontend/src/locales/zh-cn/messages.po

@@ -12,3 +12,7 @@ msgstr ""
 "Last-Translator: \n"
 "Language-Team: \n"
 "Plural-Forms: \n"
+
+#: src/app/[lang]/page.tsx:11
+msgid "Test"
+msgstr "测试"

frontend/src/locales/zh-tw/messages.po

@@ -12,3 +12,7 @@ msgstr ""
 "Last-Translator: \n"
 "Language-Team: \n"
 "Plural-Forms: \n"
+
+#: src/app/[lang]/page.tsx:11
+msgid "Test"
+msgstr "測試"

frontend/src/middleware.ts

@@ -1,10 +1,8 @@
-import type { LinguiConfig } from '@lingui/conf'
+import linguiConfig from 'lingui.config.mjs'
 import Negotiator from 'negotiator'
 import { type NextRequest, NextResponse } from 'next/server'
 
-import linguiConfig from '../lingui.config.mjs'
-
-const { locales } = linguiConfig as LinguiConfig
+const { locales } = linguiConfig
 
 export const config = {
   matcher: ['/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)'],

frontend/src/types/BaseAppRouterProps.ts

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from 'react'
+
+export interface BaseAppRouterProps extends PropsWithChildren {
+  params: {
+    lang: string
+  }
+}