Add function to select lang

pages/about.js

@@ -1,5 +1,32 @@
-export default () => (
-    <div>
-      <p>This is the about page</p>
-    </div>
-  )
+import Layout from "./components/Layout"
+import Navbar from "./components/Navbar"
+import Link from 'next/link'
+import Image from 'next/image'
+
+import { useRouter } from 'next/router'
+
+export default function About(props) {
+  const router = useRouter()
+  const { locale, locales, defaultLocale, pathname } = router
+
+  return (
+
+    <Layout title="ホーム">
+      <Navbar />
+      <div className="my-9">
+        <p>[Debug] Current locale: {pathname}</p>
+        <Image className="rounded-full"
+            src         = "/static/images/avatar.png"
+            alt         = "yude's avatar"
+            width       = {200}
+            height      = {200}
+            unoptimized = {true}
+        />
+        <p>🔨 This page is under the construction. 🔨</p>
+        <p>For now, please visit <Link href="https://yude.moe"><a>yude.moe</a></Link>.
+        </p>
+      </div>
+      
+    </Layout>
+  )
+}

pages/components/LangSelector.js

@@ -1,7 +1,12 @@
 import React from "react";
 import Popper from "popper.js";
+import { useRouter } from 'next/router'
+import Link from 'next/link';
 
 const Dropdown = ({ color }) => {
+  const router = useRouter()
+  const { locale, locales, defaultLocale, pathname } = router
+
   // dropdown props
   const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
   const btnDropdownRef = React.createRef();
@@ -23,7 +28,7 @@ const Dropdown = ({ color }) => {
   return (
     <>
       <div className="flex flex-wrap">
-        <div className="w-full ">
+        <div className="w-full">
           <div className="relative inline-flex align-middle w-full">
             <button
               className={
@@ -50,26 +55,26 @@ const Dropdown = ({ color }) => {
               }
               style={{ minWidth: "12rem" }}
             >
+              <Link href="/" locale="ja-JP">
               <a
-                href="#pablo"
                 className={
-                  "text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent " +
-                  (color === "white" ? " text-gray-800" : "text-white")
+                  "text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent"
                 }
-                onClick={e => e.preventDefault()}
               >
                 Japanese
               </a>
+              </Link>
+              <Link href="/" locale="en-US">
               <a
-                href="#pablo"
+                href="/"
+                locale="en-US"
                 className={
-                  "text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent " +
-                  (color === "white" ? " text-gray-800" : "text-white")
+                  "text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent"
                 }
-                onClick={e => e.preventDefault()}
               >
                 English
               </a>
+              </Link>
               
             </div>
           </div>

pages/index.js

@@ -3,11 +3,18 @@ import Navbar from "./components/Navbar"
 import Link from 'next/link'
 import Image from 'next/image'
 
-const Index = () => (
+import { useRouter } from 'next/router'
+
+export default function Index(props) {
+  const router = useRouter()
+  const { locale, locales, defaultLocale, pathname } = router
+
+  return (
 
     <Layout title="ホーム">
       <Navbar />
       <div className="my-9">
+        <p>[Debug] Current locale: {locale}</p>
         <Image className="rounded-full"
             src         = "/static/images/avatar.png"
             alt         = "yude's avatar"
@@ -15,12 +22,11 @@ const Index = () => (
             height      = {200}
             unoptimized = {true}
         />
-        <p>🔨 This page is under the construction. 🔨</p>
+        <p>🔨 This page is under development. 🔨</p>
         <p>For now, please visit <Link href="https://yude.moe"><a>yude.moe</a></Link>.
         </p>
       </div>
       
     </Layout>
   )
-  
-export default Index
+}