Introduce i18n

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(
-  context: NextPageContext & { params: { battlesuitId: string } }
-) {
-  const battlesuit = getBattlesuitById(context.params.battlesuitId)
+export async function getStaticProps({
+  params,
+  locale,
+}: 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(
-  context: NextPageContext & { params: { elfId: string } }
-) {
-  const elf = getElfById(context.params.elfId)
+export async function getStaticProps({
+  params,
+  locale,
+}: 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.2', 'https://honkaiimpact3.mihoyo.com/asia/en-us/news/16632'],
-  ['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'],
+  ['v5.3', 'https://honkaiimpact3.mihoyo.com/global/en-us/news/17390'],
+  ['v5.2', 'https://honkaiimpact3.mihoyo.com/global/en-us/news/16625'],
 ]
 
 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(
-  ctx: NextPageContext & { params: { stigmataId: string } }
-) {
-  const stigmataData = getStigmataById(ctx.params.stigmataId)!
+export async function getStaticProps({
+  params,
+  locale,
+}: 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(
-  context: NextPageContext & { params: { weaponId: string } }
-) {
-  const weapon = getWeaponById(context.params.weaponId)
+export async function getStaticProps({
+  params,
+  locale,
+}: 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)),
     },
   }
 }