Introduce i18n

next-i18next.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  i18n: {
+    locales: ['en-US', 'ko-KR'],
+    defaultLocale: 'en-US',
+  },
+  reloadOnPrerender: true,
+}

next.config.js

@@ -0,0 +1,5 @@
+const { i18n } = require('./next-i18next.config')
+
+module.exports = {
+  i18n,
+}

package-lock.json

@@ -735,6 +735,15 @@
         "@theme-ui/mdx": "0.12.1"
       }
     },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -754,8 +763,7 @@
     "@types/prop-types": {
       "version": "15.7.4",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
-      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
-      "dev": true
     },
     "@types/ramda": {
       "version": "0.27.60",
@@ -770,7 +778,6 @@
       "version": "17.0.37",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.37.tgz",
       "integrity": "sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg==",
-      "dev": true,
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -780,8 +787,7 @@
     "@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
-      "dev": true
     },
     "@types/styled-system": {
       "version": "5.1.13",
@@ -1321,6 +1327,11 @@
         }
       }
     },
+    "core-js": {
+      "version": "3.20.2",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.20.2.tgz",
+      "integrity": "sha512-nuqhq11DcOAbFBV4zCbKeGbKQsUDRqTX0oqx7AttUBuqe3h20ixsE039QHelbL6P4h+9kytVqyEtyZ6gsiwEYw=="
+    },
     "core-js-pure": {
       "version": "3.20.0",
       "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.20.0.tgz",
@@ -2468,6 +2479,19 @@
         }
       }
     },
+    "html-escaper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg=="
+    },
+    "html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "requires": {
+        "void-elements": "3.1.0"
+      }
+    },
     "http-errors": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
@@ -2485,6 +2509,19 @@
       "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
     },
+    "i18next": {
+      "version": "21.6.4",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-21.6.4.tgz",
+      "integrity": "sha512-pk0Utxtq5g//Q9ONQ0w3+PRSwOFJ7+m4rAekhHHg1Xql0KcUjJU7DzmzweGy6DsrIQ1GM/t57wLeeGuyGKtjTg==",
+      "requires": {
+        "@babel/runtime": "^7.12.0"
+      }
+    },
+    "i18next-fs-backend": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/i18next-fs-backend/-/i18next-fs-backend-1.1.4.tgz",
+      "integrity": "sha512-/MfAGMP0jHonV966uFf9PkWWuDjPYLIcsipnSO3NxpNtAgRUKLTwvm85fEmsF6hGeu0zbZiCQ3W74jwO6K9uXA=="
+    },
     "iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -3028,6 +3065,20 @@
         "watchpack": "2.3.0"
       }
     },
+    "next-i18next": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/next-i18next/-/next-i18next-10.1.0.tgz",
+      "integrity": "sha512-KvrXiSLRjsJrP8Uv+MFNuTXk1tlwaktce+3yTDtYqh/75BExLmV4Dr9om+zhAz8P+yMke5yhmR2Lnl0FV6mhsQ==",
+      "requires": {
+        "@babel/runtime": "^7.13.17",
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "core-js": "^3",
+        "hoist-non-react-statics": "^3.2.0",
+        "i18next": "^21.5.3",
+        "i18next-fs-backend": "^1.0.7",
+        "react-i18next": "^11.8.13"
+      }
+    },
     "node-fetch": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
@@ -3450,6 +3501,16 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-i18next": {
+      "version": "11.15.3",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.15.3.tgz",
+      "integrity": "sha512-RSUEM4So3Tu2JHV0JsZ5Yje+4nz66YViMfPZoywxOy0xyn3L7tE2CHvJ7Y9LUsrTU7vGmZ5bwb8PpjnkatdIxg==",
+      "requires": {
+        "@babel/runtime": "^7.14.5",
+        "html-escaper": "^2.0.2",
+        "html-parse-stringify": "^3.0.1"
+      }
+    },
     "react-indiana-drag-scroll": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/react-indiana-drag-scroll/-/react-indiana-drag-scroll-2.1.0.tgz",
@@ -3984,6 +4045,11 @@
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
       "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
     },
+    "void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk="
+    },
     "watchpack": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.0.tgz",

package.json

@@ -8,6 +8,7 @@
     "@mdi/react": "^1.5.0",
     "date-fns": "^2.27.0",
     "next": "^12.0.7",
+    "next-i18next": "^10.1.0",
     "open-color": "^1.9.1",
     "ramda": "^0.27.1",
     "react": "^17.0.2",

public/locales/en-US/common.json

@@ -0,0 +1,9 @@
+{
+  "nav": {
+    "versions": "Versions",
+    "battlesuits": "Battlesuits",
+    "weapons": "Weapons",
+    "stigmata": "Stigmata",
+    "elfs": "ELFs"
+  }
+}

public/locales/ko-KR/common.json

@@ -0,0 +1,10 @@
+{
+  "nav": {
+    "honkai-3rd": "붕괴 3rd",
+    "versions": "업데이트",
+    "battlesuits": "발키리",
+    "weapons": "무기",
+    "stigmata": "성흔",
+    "elfs": "무장인형"
+  }
+}

src/components/organisms/Honkai3rdNavigator.tsx

@@ -1,8 +1,14 @@
 /** @jsxImportSource theme-ui */
 import { NavLink, Heading, Flex } from '@theme-ui/components'
 import NextLink from 'next/link'
+import { useRouter } from 'next/router'
+import { useTranslation } from 'next-i18next'
 
 const Honkai3rdNavigator = () => {
+  const router = useRouter()
+  const { pathname, asPath, query, locale } = router
+  const { t } = useTranslation()
+
   return (
     <Flex mx={3} sx={{ alignItems: 'center' }}>
       <Flex sx={{ alignItems: 'center', height: 50 }} mr={3}>
@@ -12,36 +18,44 @@ const Honkai3rdNavigator = () => {
           </NextLink>
           :
           <NextLink href='/honkai3rd' passHref>
-            <NavLink ml={2}>Honkai 3rd</NavLink>
+            <NavLink ml={2}>{t('nav.honkai-3rd')}</NavLink>
           </NextLink>
         </Heading>
       </Flex>
       <NextLink href='/honkai3rd/versions' passHref>
         <NavLink mr={3} sx={{ fontFamily: 'monospace' }}>
-          Versions
+          {t('nav.versions')}
         </NavLink>
       </NextLink>
       <Flex sx={{ height: 40, alignItems: 'center' }}>
         <NextLink href='/honkai3rd/battlesuits' passHref>
           <NavLink mr={3} sx={{ fontFamily: 'monospace' }}>
-            Battlesuits
+            {t('nav.battlesuits')}
           </NavLink>
         </NextLink>
         <NextLink href='/honkai3rd/weapons' passHref>
           <NavLink mr={3} sx={{ fontFamily: 'monospace' }}>
-            Weapons
+            {t('nav.weapons')}
           </NavLink>
         </NextLink>
         <NextLink href='/honkai3rd/stigmata' passHref>
           <NavLink mr={3} sx={{ fontFamily: 'monospace' }}>
-            Stigmata
+            {t('nav.stigmata')}
           </NavLink>
         </NextLink>
         <NextLink href='/honkai3rd/elfs' passHref>
           <NavLink mr={3} sx={{ fontFamily: 'monospace' }}>
-            ELFs
+            {t('nav.elfs')}
           </NavLink>
         </NextLink>
+        <NextLink
+          href={{ pathname, query }}
+          locale={locale === 'en-US' ? 'ko-KR' : 'en-US'}
+          as={asPath}
+          passHref
+        >
+          <NavLink>{locale === 'en-US' ? '🇺🇸' : '🇰🇷'}</NavLink>
+        </NextLink>
       </Flex>
     </Flex>
   )

src/lib/i18n.ts

@@ -0,0 +1,8 @@
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+
+export function getI18NProps(
+  locale: string = 'en-US',
+  nameSpaces: string[] = []
+) {
+  return serverSideTranslations(locale, ['common', ...nameSpaces])
+}

src/pages/_app.tsx

@@ -1,4 +1,5 @@
 import type { AppProps } from 'next/app'
+import { appWithTranslation } from 'next-i18next'
 import { ThemeProvider } from 'theme-ui'
 import { theme } from '../lib/theme'
 
@@ -10,4 +11,4 @@ function MyApp({ Component, pageProps }: AppProps) {
   )
 }
 
-export default MyApp
+export default appWithTranslation(MyApp)

src/pages/honkai3rd/battlesuits/[battlesuitId].tsx

@@ -15,6 +15,7 @@ import {
   BattlesuitData,
   BattlesuitSkillGroup,
 } from '../../../lib/honkai3rd/battlesuits'
+import { getI18NProps } from '../../../lib/i18n'
 import {
   getBattlesuitById,
   listBattlesuits,
@@ -149,12 +150,13 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
 
 export default BattlesuitShowPage
 
-export function getStaticProps(
+export async function getStaticProps({
-  context: NextPageContext & { params: { battlesuitId: string } }
+  params,
-) {
+  locale,
-  const battlesuit = getBattlesuitById(context.params.battlesuitId)
+}: NextPageContext & { params: { battlesuitId: string } }) {
+  const battlesuit = getBattlesuitById(params.battlesuitId)
   return {
-    props: { battlesuit },
+    props: { battlesuit, ...(await getI18NProps(locale)) },
   }
 }
 

src/pages/honkai3rd/battlesuits/index.tsx

@@ -14,6 +14,8 @@ import {
 } from '../../../lib/honkai3rd/battlesuits'
 import BattlesuitCard from '../../../components/molecules/BattlesuitCard'
 import { useRouter } from 'next/router'
+import { NextPageContext } from 'next'
+import { getI18NProps } from '../../../lib/i18n'
 
 type BattlesuitListItemData = Pick<
   BattlesuitData,
@@ -117,12 +119,13 @@ const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
 
 export default BattlesuitListPage
 
-export async function getStaticProps() {
+export async function getStaticProps({ locale }: NextPageContext) {
   return {
     props: {
       battlesuits: listBattlesuits().map((battlesuit) =>
         pick(['id', 'name', 'features', 'type', 'valkyrie'], battlesuit)
       ),
+      ...(await getI18NProps(locale)),
     },
   }
 }

src/pages/honkai3rd/elfs/[elfId].tsx

@@ -8,6 +8,7 @@ import SecondaryLabel from '../../../components/atoms/SecondaryLabel'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
 import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
 import { ElfData } from '../../../lib/honkai3rd/elfs'
+import { getI18NProps } from '../../../lib/i18n'
 import { capitalize } from '../../../lib/string'
 import { getElfById, listElfs } from '../../../server/data/honkai3rd/elfs'
 
@@ -103,12 +104,13 @@ const ElfShowPage = ({ elf }: ElfShowPageProps) => {
 
 export default ElfShowPage
 
-export function getStaticProps(
+export async function getStaticProps({
-  context: NextPageContext & { params: { elfId: string } }
+  params,
-) {
+  locale,
-  const elf = getElfById(context.params.elfId)
+}: NextPageContext & { params: { elfId: string } }) {
+  const elf = getElfById(params.elfId)
   return {
-    props: { elf },
+    props: { elf, ...(await getI18NProps(locale)) },
   }
 }
 

src/pages/honkai3rd/elfs/index.tsx

@@ -1,10 +1,12 @@
 /** @jsxImportSource theme-ui */
 import { Box, Heading, Flex } from '@theme-ui/components'
+import { NextPageContext } from 'next'
 import { pick } from 'ramda'
 import ElfCard from '../../../components/molecules/ElfCard'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
 import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
 import { ElfData } from '../../../lib/honkai3rd/elfs'
+import { getI18NProps } from '../../../lib/i18n'
 import { listElfs } from '../../../server/data/honkai3rd/elfs'
 
 interface ElfListPageProps {
@@ -43,10 +45,11 @@ const ElfListPage = ({ elfs }: ElfListPageProps) => {
 
 export default ElfListPage
 
-export async function getStaticProps() {
+export async function getStaticProps({ locale }: NextPageContext) {
   return {
     props: {
       elfs: listElfs().map((elf) => pick(['id', 'name'], elf)),
+      ...(await getI18NProps(locale)),
     },
   }
 }

src/pages/honkai3rd/index.tsx

@@ -4,29 +4,12 @@ import Image from 'next/image'
 import NextLink from 'next/link'
 import Breadcrumb from '../../components/organisms/Breadcrumb'
 import Honkai3rdNavigator from '../../components/organisms/Honkai3rdNavigator'
+import { NextPageContext } from 'next'
+import { getI18NProps } from '../../lib/i18n'
 
 const updateNotes = [
-  ['v5.3', 'https://honkaiimpact3.mihoyo.com/asia/en-us/news/17399'],
+  ['v5.3', 'https://honkaiimpact3.mihoyo.com/global/en-us/news/17390'],
-  ['v5.2', 'https://honkaiimpact3.mihoyo.com/asia/en-us/news/16632'],
+  ['v5.2', 'https://honkaiimpact3.mihoyo.com/global/en-us/news/16625'],
-  ['v5.1', 'https://honkaiimpact3.mihoyo.com/asia/en-us/news/15882'],
-  ['v5.0', 'https://honkaiimpact3.mihoyo.com/asia/en-us/news/14917'],
-  ['v4.9', 'https://honkaiimpact3.mihoyo.com/asia/en-us/news/13943'],
-  ['v4.8', 'https://honkaiimpact3.mihoyo.com/asia/en-us/news/13044'],
-  ['v4.7', 'https://honkaiimpact3.mihoyo.com/asia/en-us/news/11980'],
-  ['v4.6', 'https://honkaiimpact3.mihoyo.com/asia/en-us/news/9101'],
-  ['v4.5', 'https://honkaiimpact3.mihoyo.com/asia/en-us/news/7996'],
-  ['v4.4', 'https://honkaiimpact3.mihoyo.com/asia/en-us/news/7312'],
-  ['v4.3', 'https://honkaiimpact3.mihoyo.com/asia/en-us/news/6105'],
-  ['v4.2', 'https://honkaiimpact3.mihoyo.com/asia/en-us/news/5489'],
-  ['v4.1', 'https://honkaiimpact3.mihoyo.com/asia/en-us/news/4965'],
-  ['v4.0', 'https://honkaiimpact3.mihoyo.com/asia/en-us/news/4421'],
-  ['v3.9', 'https://honkaiimpact3.mihoyo.com/asia/en-us/news/3296'],
-  ['v3.8', 'https://honkaiimpact3.mihoyo.com/asia/en-us/news/2855'],
-  ['v3.7', 'https://honkaiimpact3.mihoyo.com/asia/en-us/news/2337'],
-  ['v3.6', 'https://honkaiimpact3.mihoyo.com/asia/en-us/news/1936'],
-  ['v3.5', 'https://honkaiimpact3.mihoyo.com/asia/en-us/news/1505'],
-  ['v3.4', 'https://honkaiimpact3.mihoyo.com/asia/en-us/news/1092'],
-  ['v3.3', 'https://honkaiimpact3.mihoyo.com/asia/en-us/news/851'],
 ]
 
 const Honkai3rdIndexPage = () => {
@@ -82,4 +65,12 @@ const Honkai3rdIndexPage = () => {
   )
 }
 
+export async function getStaticProps({ locale }: NextPageContext) {
+  return {
+    props: {
+      ...(await getI18NProps(locale)),
+    },
+  }
+}
+
 export default Honkai3rdIndexPage

src/pages/honkai3rd/stigmata/[stigmataId].tsx

@@ -6,6 +6,7 @@ import SingleStigmataPage, {
 import StigmataSetPage, {
   StigmataSetProps,
 } from '../../../components/pages/StigmataSetPage'
+import { getI18NProps } from '../../../lib/i18n'
 import {
   listStigmata,
   getStigmataById,
@@ -26,10 +27,11 @@ const StigmataListPage = (props: StigmataShowPageProps) => {
 
 export default StigmataListPage
 
-export async function getStaticProps(
+export async function getStaticProps({
-  ctx: NextPageContext & { params: { stigmataId: string } }
+  params,
-) {
+  locale,
-  const stigmataData = getStigmataById(ctx.params.stigmataId)!
+}: NextPageContext & { params: { stigmataId: string } }) {
+  const stigmataData = getStigmataById(params.stigmataId)!
   if (stigmataData != null) {
     return {
       props: {
@@ -42,7 +44,7 @@ export async function getStaticProps(
       },
     }
   }
-  const [stigmataSetId] = ctx.params.stigmataId.split('-set')
+  const [stigmataSetId] = params.stigmataId.split('-set')
   const stigmataSet = getStigmataSetBySetId(stigmataSetId)!
   return {
     props: {
@@ -51,6 +53,7 @@ export async function getStaticProps(
       stigmataSetList: (getStigmataListBySetId(stigmataSet.id) || []).sort(
         (a, b) => -a.type.localeCompare(b.type)
       ),
+      ...(await getI18NProps(locale)),
     },
   }
 }

src/pages/honkai3rd/stigmata/index.tsx

@@ -1,5 +1,6 @@
 /** @jsxImportSource theme-ui */
 import { Box, Heading, Flex } from '@theme-ui/components'
+import { NextPageContext } from 'next'
 import { useRouter } from 'next/router'
 import { pick } from 'ramda'
 import { useMemo } from 'react'
@@ -9,6 +10,7 @@ import StigmataSetCard from '../../../components/molecules/StigmataSetCard'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
 import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
 import { StigmataData, StigmataSet } from '../../../lib/honkai3rd/stigmata'
+import { getI18NProps } from '../../../lib/i18n'
 import {
   listStigmata,
   listStigmataSet,
@@ -89,7 +91,7 @@ const StigmataListPage = ({
 
 export default StigmataListPage
 
-export async function getStaticProps() {
+export async function getStaticProps({ locale }: NextPageContext) {
   return {
     props: {
       stigmataDataList: listStigmata().map((stigmata) =>
@@ -98,6 +100,7 @@ export async function getStaticProps() {
       stigmataSetList: listStigmataSet().map((stigmataSet) =>
         pick(['id', 'name', 'rarity'], stigmataSet)
       ),
+      ...(await getI18NProps(locale)),
     },
   }
 }

src/pages/honkai3rd/versions/[versionId].tsx

@@ -20,6 +20,7 @@ import { BattlesuitData } from '../../../lib/honkai3rd/battlesuits'
 import { WeaponData } from '../../../lib/honkai3rd/weapons'
 import { SupplyEventData } from '../../../lib/honkai3rd/supplyEvents'
 import { VersionData } from '../../../lib/honkai3rd/versions'
+import { getI18NProps } from '../../../lib/i18n'
 
 interface VersionShowPageProps {
   versionData: VersionData
@@ -186,6 +187,7 @@ export default VersionShowPage
 
 export async function getStaticProps({
   params,
+  locale,
 }: NextPageContext & { params: { versionId: string } }) {
   const versionData = getVersion(params.versionId)!
 
@@ -204,6 +206,7 @@ export async function getStaticProps({
       battlesuits,
       weapons,
       supplyEvents,
+      ...(await getI18NProps(locale)),
     },
   }
 }

src/pages/honkai3rd/versions/index.tsx

@@ -19,6 +19,8 @@ import { BattlesuitData } from '../../../lib/honkai3rd/battlesuits'
 import { WeaponData } from '../../../lib/honkai3rd/weapons'
 import { VersionData } from '../../../lib/honkai3rd/versions'
 import { SupplyEventData } from '../../../lib/honkai3rd/supplyEvents'
+import { getI18NProps } from '../../../lib/i18n'
+import { NextPageContext } from 'next'
 
 interface VersionIndexPageProps {
   versionDataList: VersionData[]
@@ -216,7 +218,7 @@ const VersionIndexPage = ({
   )
 }
 
-export async function getStaticProps() {
+export async function getStaticProps({ locale }: NextPageContext) {
   const currentVersionData = getCurrentVersion()!
 
   const currentVersionNewBattlesuits = currentVersionData.newBattlesuits.map(
@@ -241,6 +243,7 @@ export async function getStaticProps() {
       currentVersionNewWeapons,
       currentVersionSupplyEvents,
       versionDataList: listVersionData(),
+      ...(await getI18NProps(locale)),
     },
   }
 }

src/pages/honkai3rd/weapons/[weaponId].tsx

@@ -5,6 +5,7 @@ import SquareImageBox from '../../../components/atoms/SquareImageBox'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
 import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
 import { WeaponData } from '../../../lib/honkai3rd/weapons'
+import { getI18NProps } from '../../../lib/i18n'
 import { capitalize } from '../../../lib/string'
 import {
   getWeaponById,
@@ -80,12 +81,14 @@ const WeaponShowPage = ({ weapon }: WeaponShowPageProps) => {
 
 export default WeaponShowPage
 
-export function getStaticProps(
+export async function getStaticProps({
-  context: NextPageContext & { params: { weaponId: string } }
+  params,
-) {
+  locale,
-  const weapon = getWeaponById(context.params.weaponId)
+}: NextPageContext & { params: { weaponId: string } }) {
+  const weapon = getWeaponById(params.weaponId)
+
   return {
-    props: { weapon },
+    props: { weapon, ...(await getI18NProps(locale)) },
   }
 }
 

src/pages/honkai3rd/weapons/index.tsx

@@ -9,6 +9,8 @@ import FilterButton from '../../../components/atoms/FilterButton'
 import { useRouter } from 'next/router'
 import { WeaponData } from '../../../lib/honkai3rd/weapons'
 import WeaponCard from '../../../components/molecules/WeaponCard'
+import { getI18NProps } from '../../../lib/i18n'
+import { NextPageContext } from 'next'
 
 type WeaponListItemData = Pick<
   WeaponData,
@@ -94,12 +96,13 @@ const WeaponListPage = ({ weaponDataList }: WeaponListPageProps) => {
 
 export default WeaponListPage
 
-export async function getStaticProps() {
+export async function getStaticProps({ locale }: NextPageContext) {
   return {
     props: {
       weaponDataList: listWeapons().map((weapon) => {
         return pick(['name', 'id', 'rarity', 'category'], weapon)
       }),
+      ...(await getI18NProps(locale)),
     },
   }
 }