feat: localize

components/About.tsx

@@ -1,33 +1,35 @@
 import { FC } from 'react'
 import styles from '../static/Section.module.scss'
+import { useLocale } from '../hooks/useLocale'
 
 const About: FC = () => {
+  const { t } = useLocale()
   return (
     <section id={'about'} className={styles.section}>
-      <h2>{'About'}</h2>
+      <h2>{t.about}</h2>
       <div className={styles.detail}>
         <dl>
-          <dt>開催日時</dt>
-          <dd>2021年 11月 20日</dd>
+          <dt>{t.date_and_time}</dt>
+          <dd>{t.november_20_2021}</dd>
         </dl>
         <dl>
-          <dt>会場</dt>
-          <dd>オンライン</dd>
+          <dt>{t.venue}</dt>
+          <dd>{t.online}</dd>
         </dl>
         <dl>
-          <dt>参加費</dt>
-          <dd>無料</dd>
+          <dt>{t.entry_fee}</dt>
+          <dd>{t.free}</dd>
         </dl>
         <dl>
-          <dt>参加方法</dt>
+          <dt>{t.way_to_participate}</dt>
           <dd>
             <a
               href="https://vscode.connpass.com/event/221961/"
-              aria-label="connpass フォームより参加を申し込む"
+              aria-label={t.apply_for_participation_from_connpass_form}
               target="_blank"
               rel="noopener noreferrer"
             >
-              connpass フォームより参加を申し込む
+              {t.apply_for_participation_from_connpass_form}
             </a>
           </dd>
         </dl>

components/Footer.tsx

@@ -1,15 +1,17 @@
 import { FC } from 'react'
 import Link from 'next/link'
 import styles from '../static/Footer.module.scss'
+import { useLocale } from '../hooks/useLocale'
 import { organizationName } from '../utils/constants'
 
 const Footer: FC = () => {
+  const { t } = useLocale()
   return (
     <footer className={styles.footer}>
       <p className={styles.contact}>
-        <Link href="/code-for-conduct">{'行動規範'}</Link>
-        <Link href="/privacy-policy">{'プライバシーポリシー'}</Link>
-        <Link href="/contact">{'問い合わせ'}</Link>
+        <Link href="/code-for-conduct">{t.code_of_conduct}</Link>
+        <Link href="/privacy-policy">{t.privacy_policy}</Link>
+        <Link href="/contact">{t.contact}</Link>
       </p>
       <p className={styles.copyright}>
         {`Created © 2021 ${organizationName}. All Rights Reserved.`}

components/Header.tsx

@@ -1,34 +1,36 @@
 import { FC } from 'react'
 import Link from 'next/link'
 import styles from '../static/Header.module.scss'
+import { useLocale } from '../hooks/useLocale'
 import { conferenceName } from '../utils/constants'
 
 import { ColorThemeSwitch } from './ColorThemeSwitch'
 
 const Header: FC = () => {
+  const { t } = useLocale()
   return (
     <div className={styles.header}>
       <Link href="/">
         <a className={styles.logo}>{conferenceName}</a>
       </Link>
-      <div className={styles.linksWrapper}>
+      <div className={styles.wrapper}>
         <nav className={styles.links}>
           <Link href="/#about">
-            <a className={styles.link}>{'About'}</a>
+            <a className={styles.link}>{t.about}</a>
           </Link>
           <Link href="/#speakers">
-            <a className={styles.link}>{'Speakers'}</a>
+            <a className={styles.link}>{t.speakers}</a>
           </Link>
           <Link href="/#timetable">
-            <a className={styles.link}>{'Timetable'}</a>
+            <a className={styles.link}>{t.timetable}</a>
           </Link>
           <Link href="/#staffs">
-            <a className={styles.link}>{'Staffs'}</a>
+            <a className={styles.link}>{t.staffs}</a>
           </Link>
-          <a href="#" className={styles.link}>
-            <ColorThemeSwitch />
-          </a>
         </nav>
+        <a href="#" className={styles.link}>
+          <ColorThemeSwitch />
+        </a>
       </div>
     </div>
   )

components/Speakers.tsx

@@ -1,11 +1,13 @@
 import { FC } from 'react'
 import styles from '../static/Section.module.scss'
+import { useLocale } from '../hooks/useLocale'
 
 const Speakers: FC = () => {
+  const { t } = useLocale()
   return (
     <section id={'speakers'} className={styles.section}>
-      <h2>{'Speakers'}</h2>
-      <h3>{'Coming soon'}</h3>
+      <h2>{t.speakers}</h2>
+      <h3>{t.coming_soon}</h3>
     </section>
   )
 }

components/Staffs.tsx

@@ -1,12 +1,14 @@
 import { FC } from 'react'
 // import Image from 'next/image'
 import styles from '../static/Staff.module.scss'
+import { useLocale } from '../hooks/useLocale'
 import { members } from '../contents/members'
 
 const Staffs: FC = () => {
+  const { t } = useLocale()
   return (
     <section id={'staffs'} className={styles.section}>
-      <h2>{'Staffs'}</h2>
+      <h2>{t.staffs}</h2>
       <div className={styles.staffs}>
         {members.map((member) => {
           return (

components/Timetable.tsx

@@ -1,13 +1,15 @@
 import { FC } from 'react'
 import styles from '../static/Section.module.scss'
+import { useLocale } from '../hooks/useLocale'
 
 // import Schedule from './Schedule'
 
 const Timetable: FC = () => {
+  const { t } = useLocale()
   return (
     <section id={'timetable'} className={styles.section}>
-      <h2>{'Timetable'}</h2>
-      <h3>{'Coming soon'}</h3>
+      <h2>{t.timetable}</h2>
+      <h3>{t.coming_soon}</h3>
     </section>
   )
 }

hooks/useLocale.tsx

@@ -0,0 +1,10 @@
+import { useRouter } from 'next/router'
+
+import en from '../public/locales/en'
+import ja from '../public/locales/ja'
+
+export const useLocale = () => {
+  const { locale } = useRouter()
+  const t = locale === 'en' ? en : ja
+  return { locale, t }
+}

next.config.js

@@ -13,6 +13,10 @@ const nextConfig = {
     subdomainPrefix: urlPrefix,
     runtimeCaching,
   },
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en', 'ja'],
+  },
   exportPathMap: async function (defaultPathMap, { dev, dir, outDir, distDir, buildId }) {
     return {
       '/': { page: '/' },

package.json

@@ -15,7 +15,7 @@
     "test:w": "npm run test-cover -- --watch"
   },
   "dependencies": {
-    "next": "11.0.1",
+    "next": "9.5.5",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-markdown": "^5.0.3"

public/locales/en.ts

@@ -0,0 +1,20 @@
+export default {
+  en: 'EN',
+  ja: 'JA',
+  coming_soon: 'Coming Soon',
+  about: 'About',
+  date_and_time: 'Date and time',
+  november_20_2021: 'November 20, 2021',
+  venue: 'Venue',
+  online: 'Online',
+  entry_fee: 'Entry fee',
+  free: 'Free',
+  way_to_participate: 'Way to participate',
+  apply_for_participation_from_connpass_form: 'Apply for participation from connpass form',
+  timetable: 'Timetable',
+  speakers: 'Speakers',
+  staffs: 'Staffs',
+  code_of_conduct: 'Code of Conduct',
+  privacy_policy: 'Privacy Policy',
+  contact: 'Contact',
+}

public/locales/ja.ts

@@ -0,0 +1,20 @@
+export default {
+  en: '英',
+  ja: '日',
+  coming_soon: '募集中',
+  about: '詳細',
+  date_and_time: '開催日時',
+  november_20_2021: '2021年 11月 20日',
+  venue: '会場',
+  online: 'オンライン',
+  entry_fee: '参加費',
+  free: '無料',
+  way_to_participate: '参加方法',
+  apply_for_participation_from_connpass_form: 'connpass フォームより参加を申し込む',
+  timetable: 'タイムテーブル',
+  speakers: 'スピーカー',
+  staffs: 'スタッフ',
+  code_of_conduct: '行動規範',
+  privacy_policy: 'プライバシーポリシー',
+  contact: 'お問い合わせ',
+}

static/Header.module.scss

@@ -17,13 +17,14 @@
   font-size: 1.6rem;
 }
 
-.links-wrapper {
+.wrapper {
   display: flex;
   align-items: center;
 }
 
 .links {
   font-size: min(1.6vw, 24px);
+  margin-right: min(2.4vw, 48px);
 }
 
 .link:not(:last-of-type) {
@@ -39,3 +40,17 @@
   opacity: 1;
   font-family: AvenirNextLTPro-BoldCn, sans-serif;
 }
+
+@media (max-width: 600px) {
+  .logo {
+    font-size: 1.08rem;
+  }
+
+  .wrapper {
+    flex-direction: row;
+  }
+
+  .links {
+    display: none;
+  }
+}