Prepare for SSG

i18n/index.js

@@ -1,5 +1,5 @@
-var ja = require('./translations.en.json');
+var ja = require('./translations.ja.json');
-var en = require('./translations.ja.json')
+var en = require('./translations.en.json')
 
 const i18n = {
 	translations: {

pages/components/Discord/DiscordPlaying.js

@@ -1,7 +1,11 @@
+// React
 import React, { useState, useEffect } from 'react';
+
+// Data fetching
 import axios from 'axios';
-import useTranslation from 'next-translate/useTranslation'
+
-import { useRouter } from 'next/router'
+// i18n
+import { useTranslation, useLanguageQuery } from 'next-export-i18n';
 
 function App (){
   const [data, setData] = useState({ hits: [] });

pages/components/Discord/DiscordStatus.js

@@ -1,4 +1,7 @@
+// React
 import React, { useState, useEffect } from 'react';
+
+// Data fetching
 import axios from 'axios';
 
 const App = () => {

pages/components/LangSelector.js

@@ -1,10 +1,13 @@
 import React from "react";
 import Popper from "popper.js";
-import { useRouter } from 'next/router'
 import Link from 'next/link';
 import { faLanguage } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
+// i18n
+import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n';
+
+
 const Dropdown = ({ color }) => {
   // dropdown props
   const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
@@ -45,12 +48,12 @@ const Dropdown = ({ color }) => {
   <div ref={popoverDropdownRef} className={
               (dropdownPopoverShow ? "block " : "hidden ") + "z-10 origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 dark:bg-gray-700"}>
     <div className="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
-    <Link href="#" locale="ja">
+    <LanguageSwitcher lang="ja">
       <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-white dark:hover:bg-gray-800" role="menuitem">日本語</a>
-    </Link>
+    </LanguageSwitcher>
-    <Link href="#" locale="en">
+    <LanguageSwitcher lang="en">
       <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-white dark:hover:bg-gray-800" role="menuitem">English</a>
-    </Link>
+    </LanguageSwitcher>
     </div>
   </div>
 </div>

pages/components/Menu/FontAwesomeMenu.js

@@ -5,11 +5,11 @@ import Link from 'next/link'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 const FontAwesomeMenu = (props) => {
-  const { icon, dest } = props
+  const { icon, dest, query } = props
 
   return (
     <div>
-        <Link href={`${dest}`}>
+        <Link href={{ pathname: dest, query: query }}>
             <a>
                 <FontAwesomeIcon icon={icon} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" />
             </a>

pages/components/Menu/MinecraftMenu.js

@@ -1,10 +1,15 @@
 // Next.js
 import Link from 'next/link'
 
-const MinecraftMenu = () => {
+const MinecraftMenu = (props) => {
+  const { query } = props
+  
+  if (!query) {
+    return <p>Loading...</p>
+  } else {
   return (
     <div>
-        <Link href="/minecraft">
+        <Link href={{ pathname: "/minecraft", query: query }}>
             <a>
                 <svg className="fill-current text-black dark:text-white w-10 h-10 inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 304.8 304.8">
                     <path d="M 39.10262 126.138 L 39.16748 12.39574 L 152.7982 12.33506 L 266.4289 12.27438 L 266.4289 126.0773 L 266.4289 239.8803 L 152.7333 239.8803 L 39.03775 239.8803 L 39.10262 126.138 Z M 260.4857 126.0776 L 260.4857 18.55703 L 152.8628 18.55703 L 45.23985 18.55703 L 45.23985 126.0776 L 45.23985 233.5982 L 152.8628 233.5982 L 260.4857 233.5982 L 260.4857 126.0776 Z M 103.8963 162.9245 L 103.8963 126.0776 L 116.1702 126.0776 L 128.4441 126.0776 L 128.4441 113.8758 L 128.4441 101.674 L 152.8628 101.674 L 177.2814 101.674 L 177.2814 113.8758 L 177.2814 126.0776 L 189.3835 126.0776 L 201.4856 126.0776 L 201.6573 150.5415 C 201.7517 163.9967 201.829 180.5779 201.8291 187.3885 L 201.8293 199.7715 L 189.6869 199.7715 L 177.5446 199.7715 L 177.4776 187.5093 L 177.4106 175.2471 L 152.7982 175.1855 L 128.1857 175.1239 L 128.1857 187.4477 L 128.1857 199.7715 L 116.041 199.7715 L 103.8963 199.7715 L 103.8963 162.9245 Z M 79.34843 77.02888 L 79.34843 52.62534 L 103.7671 52.62534 L 128.1857 52.62534 L 128.1857 77.02888 L 128.1857 101.4324 L 103.7671 101.4324 L 79.34843 101.4324 L 79.34843 77.02888 Z M 177.5398 77.02888 L 177.5398 52.62534 L 201.9585 52.62534 L 226.3771 52.62534 L 226.3771 77.02888 L 226.3771 101.4324 L 201.9585 101.4324 L 177.5398 101.4324 L 177.5398 77.02888 Z"/>
@@ -14,5 +19,6 @@ const MinecraftMenu = () => {
     </div>
   )
 }
+}
 
 export default MinecraftMenu

pages/components/Minecraft.js

@@ -1,11 +1,16 @@
+// React
 import React, { useState, useEffect } from 'react';
-import useTranslation from 'next-translate/useTranslation'
+
-import { useRouter } from 'next/router'
+// i18n
+import { useTranslation, useLanguageQuery } from 'next-export-i18n';
+
 import axios from 'axios';
 import Image from 'next/image'
 import { list } from 'postcss';
 
 export default function Minecraft(props) {
+  const { t } = useTranslation();
+  const [query] = useLanguageQuery();
   const [data, setData] = useState({ hits: [] });
 
   useEffect(() => {
@@ -21,7 +26,7 @@ export default function Minecraft(props) {
     if (data === undefined){
         console.log("[Minecraft Query] データの取得に失敗しました。 / Failed to retrieve data.")
         return (
-        <p>{t('minecraft:fail')}</p>
+        <p>{t('fail')}</p>
         )
       }else{
         const status = data.online
@@ -32,13 +37,13 @@ export default function Minecraft(props) {
             {(() => {
             if (status == true) {
             if (player == undefined || player == 0) {
-              return <span>{t('minecraft:no_one')}</span>
+              return <span>{t('no_one')}</span>
             } else {
-              return <span>{t('minecraft:playing', {count: player})}</span>
+              return <span>{t('playing', {count: player})}</span>
             }}else if (status == false) {
-              return <span>{t('minecraft:offline')}</span>
+              return <span>{t('offline')}</span>
             }else {
-              return <span>{t('minecraft:loading')}</span>
+              return <span>{t('loading')}</span>
             }
           })()}
 

pages/components/Minecraft/Online.js

@@ -1,10 +1,18 @@
+// React
 import React, { useState, useEffect } from 'react';
+
+// Data fetching
 import axios from 'axios';
-import useTranslation from 'next-translate/useTranslation'
+
-import { useRouter } from 'next/router'
+// i18n
+import { useTranslation, useLanguageQuery } from 'next-export-i18n';
+
+// Components
 import LastPlayed from './LastPlayed'
 
 function App (props) {
+  const { t } = useTranslation();
+  const [query] = useLanguageQuery();
   const uuid = props;
   const [data, setData] = useState({ hits: [] });
 

pages/components/Minecraft/PlayerName.js

@@ -1,4 +1,7 @@
+// React
 import React, { useState, useEffect } from 'react';
+
+// Data fetching
 import axios from 'axios';
 
 function App (props) {

pages/components/Navbar.js

@@ -18,7 +18,7 @@ const Navbar = () => {
     return (
       <>
         <nav className='flex items-center flex-wrap p-3'>
-        <Link href='/'>
+        <Link href={{ pathname: '/', query: query }}>
           <a className='inline-flex items-center p-2'>
             <span className='text-xl text-black font-bold tracking-wide dark:text-white font-mono animate-heartbeat'>
               yude.jp
@@ -27,8 +27,7 @@ const Navbar = () => {
         </Link>
             <div className="absolute right-0">
                 <ThemeSelector />
-                {/* <LangSelector /> */}
+                <LangSelector />
-                <LanguageSwitcher lang="ja" />
             </div>
       </nav>
       </>

pages/components/Profile/Button.js

@@ -7,7 +7,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 const Button = (props) => {
     const { icon, dest, caption } = props
     return (
-        <Link href={`${dest}`}>
+        <Link href={{ pathname: dest, query: query}}>
             <a>
                 <button
                 className="bg-pink-600 text-white active:bg-pink-600 mt-3 font-bold text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1       ease-linear transition-all duration-150"

pages/components/Profile/Contact.js

@@ -8,7 +8,7 @@ const Contact = (props) => {
     const { icon, dest, caption } = props
     return (
         <div className="hover:underline">
-            <Link href={`${dest}`}>
+            <Link href={{ pathname: dest, query: query }}>
                 <a>
                     <FontAwesomeIcon icon={icon} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
                     <p className="font-mono text-xl">{caption}</p>

pages/components/Profile/PublicKeys.js

@@ -1,18 +1,20 @@
+// React
 import React, { useState, useEffect } from 'react';
-import useTranslation from 'next-translate/useTranslation'
+
+// i18n
+import { useTranslation, useLanguageQuery } from 'next-export-i18n';
+
+// Font Awesome
 import { faKey, faEye, faDownload } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { useRouter } from 'next/router'
+
+// Next.js
 import Link from 'next/link'
 
 export default function Modal() {
   const [showModal, setShowModal] = React.useState(false);
-  const router = useRouter()
+  const { t } = useTranslation();
-  const close = t('common:close')
+  const [query] = useLanguageQuery();
-  const keys = t('profile:keys')
-  const view = t('profile:view')
-  const fingerprint = t('profile:fingerprint')
-  const download = t('profile:download')
 
   return (
     <>
@@ -21,7 +23,7 @@ export default function Modal() {
         type="button"
         onClick={() => setShowModal(true)}
       >
-        <FontAwesomeIcon icon={faKey} className="w-5 h-5 inline"/> {keys}
+        <FontAwesomeIcon icon={faKey} className="w-5 h-5 inline"/> {t('keys')}
       </button>
       {showModal ? (
         <>
@@ -34,17 +36,17 @@ export default function Modal() {
                 {/* Modal body */}
                 <div className="relative p-2 flex-auto text-black text-left">
                 
-                <p className="text-2xl"><FontAwesomeIcon icon={faKey} className="w-5 h-5 inline"/> {keys}</p>
+                <p className="text-2xl"><FontAwesomeIcon icon={faKey} className="w-5 h-5 inline"/> {t('keys')}</p>
           <ul className="list-disc my-2">
           <li>
             <span className="font-bold">PGP&nbsp;</span>
             <Link href="/yudejp.gpg">
               <a className="hover:underline">
                 <FontAwesomeIcon icon={faDownload} className="w-5 h-5 inline"/>&nbsp;
-                {download}
+                {t('download')}
               </a>
             </Link>
-            <p>{fingerprint}:</p>
+            <p>{t('fingerprint')}:</p>
             <div className="overflow-x-auto">
               <div className="whitespace-nowrap">
                 <code>3745 F270 DB4E 8975 6B07  62BE EB0F E5D9 25C4 A968</code>
@@ -56,10 +58,10 @@ export default function Modal() {
             <Link href="https://github.com/yude.keys">
               <a className="hover:underline">
                 <FontAwesomeIcon icon={faEye} className="w-5 h-5 inline"/>&nbsp;
-                {view}
+                {t('view')}
               </a>
             </Link>
-            <p>{fingerprint}:</p>
+            <p>{t('fingerprint')}:</p>
             <div className="overflow-x-auto">
               <div className="whitespace-nowrap">
               <code>2048 SHA256:xwSL4DORWmroWdC6P0GU1m1yZl/cXqjo9rCCWqqO+Dc</code>
@@ -76,7 +78,7 @@ export default function Modal() {
                     type="button"
                     onClick={() => setShowModal(false)}
                   >
-                    {close}
+                    {t('close')}
                   </button>
                 </div>
               </div>

pages/components/Profile/Spotify.js

@@ -1,9 +1,16 @@
+// React
 import React, { useState, useEffect } from 'react';
+
+// Data fetching
 import axios from 'axios';
-import useTranslation from 'next-translate/useTranslation'
+
-import { useRouter } from 'next/router'
+// i18n
+import { useTranslation, useLanguageQuery } from 'next-export-i18n';
 
 function App () {
+  const { t } = useTranslation();
+  const [query] = useLanguageQuery();
+  
   const [data, setData] = useState({ hits: [] });
   useEffect(() => {
     const fetchData = async () => {

pages/components/Profile/WakaTime.js

@@ -1,8 +1,9 @@
+// React
 import React, { useState, useEffect } from 'react';
-import useTranslation from 'next-translate/useTranslation'
+
+// Font Awesome
 import { faUserClock } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { useRouter } from 'next/router'
 
 export default function Modal() {
   const [showModal, setShowModal] = React.useState(false);

pages/hcunews.js

@@ -15,7 +15,7 @@ import en from '../docs/hcunews/en.md'
 
 export default function HcuNews() {
     const { t } = useTranslation();
-const [query] = useLanguageQuery();
+    const [query] = useLanguageQuery();
 
     return(
         <Layout title={t('hcunews')}>

pages/house.js

@@ -3,13 +3,14 @@ import Layout from "./components/Layout"
 
 // i18n
 import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n';
-const { t } = useTranslation();
-const [query] = useLanguageQuery();
 
 // Next.js router
 import { useRouter } from 'next/router'
 
 export default function About(props) {
+  const { t } = useTranslation();
+  const [query] = useLanguageQuery();
+  
   return (
     <Layout title={t('house')}>
       <div>

pages/index.js

@@ -27,6 +27,9 @@ export default function Index(props) {
   const { t } = useTranslation();
   const [query] = useLanguageQuery();
   
+  if (!query) {
+     return <p>Loading...</p>
+  } else {
   return (
     <>
       <Layout title={t('home')}>
@@ -43,15 +46,15 @@ export default function Index(props) {
           
           {/* Index menu */}
           <div className="grid grid-cols-3 gap-10">
-            <FAMenu dest="/profile" icon={faUser} />
+            <FAMenu dest="/profile" query={query} icon={faUser} />
-            <FAMenu dest="/server" icon={faServer} />
+            <FAMenu dest="/server" query={query} icon={faServer} />
-            <FAMenu dest="/house" icon={faHouseUser} />
+            <FAMenu dest="/house" query={query} icon={faHouseUser} />
-            <FAMenu dest="https://scrapbox.io/yude" icon={faBook} />
+            <FAMenu dest="https://scrapbox.io/yude" query={query} icon={faBook} />
-            <FAMenu dest="https://discord.gg/X6srY7X" icon={faDiscord} />          
+            <FAMenu dest="https://discord.gg/X6srY7X" query={query} icon={faDiscord} />          
-            <FAMenu dest="https://github.com/yudejp" icon={faGithub} />
+            <FAMenu dest="https://github.com/yudejp" query={query} icon={faGithub} />
-            <FAMenu dest="https://git.yude.jp" icon={faGit} />
+            <FAMenu dest="https://git.yude.jp" icon={faGit} query={query} />
-            <MinecraftMenu />
+            <MinecraftMenu query={query} />
-            <FAMenu dest="/mutual" icon={faHeart} />
+            <FAMenu dest="/mutual" icon={faHeart} query={query} />
           </div>
           
           {/* Banner */}
@@ -67,3 +70,4 @@ export default function Index(props) {
     </>
   )
 }
+}

pages/minecraft.js

@@ -7,8 +7,6 @@ import { useRouter } from 'next/router'
 
 // i18n
 import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n';
-const { t } = useTranslation();
-const [query] = useLanguageQuery();
 
 // Next.js
 import Image from 'next/image'
@@ -31,11 +29,17 @@ import en from '../docs/minecraft/en.md'
 import { NextSeo } from 'next-seo';
 
 export default function About(props) {
+    const { t } = useTranslation();
+    const [query] = useLanguageQuery();
+  
     // Copy server address to clipboard
     const copyText = () => {
       navigator.clipboard.writeText("yude.jp");
     };
 
+    if (!query) {
+      return <p>Loading...</p>
+    } else {
     return (
           <>
             <NextSeo
@@ -82,7 +86,7 @@ export default function About(props) {
               </div>
               
               {/* Load markdown contents */}
-                {lang === 'ja' ? (
+                {query["lang"] === 'ja' ? (
                   <ReactMarkdown plugins={[gfm]}>
                       {ja}
                   </ReactMarkdown>
@@ -95,4 +99,5 @@ export default function About(props) {
             </Layout>
           </>
         )
+      }
 }

pages/mutual.js

@@ -3,8 +3,6 @@ import Layout from "./components/Layout"
 
 // i18n
 import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n';
-const { t } = useTranslation();
-const [query] = useLanguageQuery();
 
 // React Router etc.
 import { useRouter } from 'next/router'
@@ -20,6 +18,12 @@ import en from '../docs/mutual/en.md'
 import { NextSeo } from 'next-seo';
 
 export default function Tos(props) {
+    const { t } = useTranslation();
+    const [query] = useLanguageQuery();
+    
+    if (!query) {
+      return <p>Loading...</p>
+    } else {
     return(
           <>
             <NextSeo
@@ -28,7 +32,7 @@ export default function Tos(props) {
             />
             <Layout title={t('common:mutual')}>
               <div>
-                {lang === 'ja' ? (
+                {query["lang"] === 'ja' ? (
                   <ReactMarkdown plugins={[gfm]}>
                       {ja}
                   </ReactMarkdown>
@@ -41,4 +45,5 @@ export default function Tos(props) {
             </Layout>
           </>
         )
+      }
     }

pages/posts.js

@@ -9,8 +9,6 @@ import { useRouter } from 'next/router'
 
 // i18n
 import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n';
-const { t } = useTranslation();
-const [query] = useLanguageQuery();
 
 // microCMS library
 import { client } from "../libs/client";
@@ -19,6 +17,9 @@ import { client } from "../libs/client";
 import { NextSeo } from 'next-seo';
 
 export default function Home({ blog }) {
+    const { t } = useTranslation();
+    const [query] = useLanguageQuery();
+  
     return (
           <>
           <NextSeo

pages/profile.js

@@ -2,9 +2,7 @@
 import Layout from "./components/Layout"
 
 // i18n
-import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n';
+import { useTranslation, useLanguageQuery } from 'next-export-i18n';
-const { t } = useTranslation();
-const [query] = useLanguageQuery();
 
 // Font Awesome
 import { faDiscord, faTwitter, faGithub, faKeybase, faInstagram, faMastodon, faSteam, faAmazon } from '@fortawesome/free-brands-svg-icons'
@@ -32,6 +30,8 @@ import NintendoSW from "./components/Profile/NintendoSW"
 import { NextSeo } from 'next-seo';
 
 export default function Profile(props) {
+  const { t } = useTranslation();
+  const [query] = useLanguageQuery();
 
   return (
     <>
@@ -119,7 +119,7 @@ export default function Profile(props) {
           </div>
           
         </div>
-          <p className="mt-3 text-sm font-bold text-gray-900 dark:text-gray-400">{t('common:icon_1')}<Link href="https://twitter.com/xmnts"><a className="hover:underline">Minkasy {t('common:icon_2')}</a></Link></p>
+          <p className="mt-3 text-sm font-bold text-gray-900 dark:text-gray-400">{t('icon_1')}<Link href="https://twitter.com/xmnts"><a className="hover:underline">Minkasy {t('icon_2')}</a></Link></p>
         </div>
         
       </Layout>

pages/server.js

@@ -3,16 +3,14 @@ import Layout from "./components/Layout"
 
 // i18n
 import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n';
-const { t } = useTranslation();
-const [query] = useLanguageQuery();
-
-// React Router
-import { useRouter } from 'next/router'
 
 // next-seo
 import { NextSeo } from 'next-seo';
 
 export default function Server(props) {
+  const { t } = useTranslation();
+  const [query] = useLanguageQuery();
+
   return (
     <>
       <NextSeo

pages/tos.js

@@ -3,8 +3,6 @@ import Layout from "./components/Layout"
 
 // i18n
 import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n';
-const { t } = useTranslation();
-const [query] = useLanguageQuery();
 
 // Next.js, React
 import { useRouter } from 'next/router'
@@ -17,6 +15,9 @@ import ja from '../docs/tos/ja.md'
 import en from '../docs/tos/en.md'
 
 export default function Tos(props) {
+    const { t } = useTranslation();
+    const [query] = useLanguageQuery();
+  
     return(
         <Layout title={t('tos')}>
         <div>