.eslintrc.json

@@ -1,8 +1,6 @@
 {
   "extends": "next/core-web-vitals",
   "rules": {
-    "@next/next/no-document-import-in-page": "off",
+    "@next/next/no-document-import-in-page": "off"
-    "@next/next/no-img-element": "off",
-    "react-hooks/exhaustive-deps": "off"
   }
 }

pages/components/Discord/DiscordPlaying.js

@@ -2,37 +2,44 @@
 import React, { useState, useEffect } from 'react';
 
 // Data fetching
-import useSwr from 'swr'
+import axios from 'axios';
-const fetcher = (url) => fetch(url).then((res) => res.json())
 
 // i18n
 import { useTranslation, useLanguageQuery } from 'next-export-i18n';
 
-export default function DiscordPlaying() {
+function App (){
-  const { t } = useTranslation();
+  const [data, setData] = useState({ hits: [] });
-  const [query] = useLanguageQuery();
+  useEffect(() => {
-  
+    const fetchData = async () => {
-  const { data, error } = useSwr(
+      const result = await axios(
-    `https://discord.com/api/guilds/723409709306216498/widget.json`,
+        'https://discord.com/api/guilds/723409709306216498/widget.json',
-     fetcher
+      );
-   )
+      setData(result.data);
-  if (error){
+    };  
+    fetchData();
+  }, []);
+  if (data === undefined){
     console.log("[Discord API] データの取得に失敗しました。 / Failed to retrieve data.")
-    return <></>
+    return <p></p>
-  } else {
+  }else{
-    if (!data) {
+  const str = JSON.stringify(data)
-      return <p>Loading...</p>
+  
-    } else {
+  if (str.indexOf("game") !== -1){
-      if (data.members) {
+  const yes_playing = t('yes_playing', {playing: data.members[0].game.name})
-        if (data.members[0].game) {
+  return <p>{yes_playing}</p>
-          const yes_playing = t('yes_playing', {playing: data.members[0].game.name})
+  }else{
-          return <p>{yes_playing}</p>
+  return <></>
-        } else {
+  }
-          return <></>
-        }
-      } else {
-        return <></> 
-      }
-    }
 }
+};
+
+export async function getServerSideProps() {
+  // Fetch data from external API
+  const res = await fetch(url)
+  const data = await res.json()
+
+  // Pass data to the page via props
+  return { props: { data } }
 }
+
+export default App;

pages/components/Footer/BlueRibbon.js

@@ -0,0 +1,20 @@
+// Next.js
+import Link from 'next/link'
+import Image from 'next/image'
+
+const happybusy = (props) => {
+  return (
+    <Link href="https://www.eff.org/pages/blue-ribbon-campaign">
+      <a>
+        <Image
+          src="/images/brstrip.gif"
+          width={150}
+          height={41}
+          alt="EFF Blue Ribbon Campaign"
+        />
+      </a>
+    </Link>
+  )
+}
+
+export default happybusy

pages/components/Footer/HappyBusy.js

@@ -1,16 +1,16 @@
 // Next.js
 import Link from 'next/link'
+import Image from 'next/image'
 
 const HappyBusy = (props) => {
   return (
     <Link href="https://sites.google.com/site/happybusy/">
         <a>
-          <img
+          <Image
             src="/images/busy_banner.png"
             width={200}
             height={42}
             alt="時間のないサイト運営者リング"
-            className="mx-auto"
           />
         </a>
     </Link>

pages/components/LangSelector.js

@@ -40,7 +40,7 @@ const Dropdown = ({ color }) => {
         : openDropdownPopover();
     }}
     >
-      <FontAwesomeIcon icon={faLanguage} className="text-4xl" />
+      <FontAwesomeIcon icon={faLanguage} className="w-12 h-9" />
       <svg className="-mr-1 ml-2 h-9 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
         <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
       </svg>

pages/components/Menu/FontAwesomeMenu.js

@@ -11,7 +11,7 @@ const FontAwesomeMenu = (props) => {
     <div>
         <Link href={{ pathname: dest, query: query }}>
             <a>
-                <FontAwesomeIcon icon={icon} className="text-4xl fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" />
+                <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>
         </Link>
     </div>

pages/components/Minecraft.js

@@ -5,6 +5,8 @@ import React, { useState, useEffect } from 'react';
 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();
@@ -53,7 +55,7 @@ export default function Minecraft(props) {
                 url.push('https://mc-heads.net/avatar/' + data.players.list[i])
               }
               for (var i in url){
-                list.push(<img src={url[i]} key={i} className="inline" height="50" width="50" alt={i}/>)
+                list.push(<Image src={url[i]} key={i} className="inline" height="50" width="50" alt={i}/>)
               }
               return <div>{list}</div>
             }

pages/components/Minecraft/Head.js

@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from 'react';
+import Image from 'next/image'
 
 function App (props) {
   const uuid = props;
 
   return (
-    <img
+    <Image
         src={"https://crafatar.com/renders/body/" + uuid.uuid}
         width={110}
         height={250}

pages/index.js

@@ -5,19 +5,22 @@ import Layout from "./components/Layout"
 import FAMenu from "./components/Menu/FontAwesomeMenu"
 
 // Banner
+import BlueRibbon from "./components/Footer/BlueRibbon"
 import HappyBusy from "./components/Footer/HappyBusy"
 
 // Next.js
+import Image from 'next/image'
 import Link from 'next/link'
 
 // i18n
 import { useTranslation, useLanguageQuery } from 'next-export-i18n';
 
 // React Router
+import { useRouter } from 'next/router'
 import MinecraftMenu from "./components/Menu/MinecraftMenu"
 
 // Font Awesome
-import { faDiscord, faGit, faGithub } from '@fortawesome/free-brands-svg-icons'
+import { faDiscord, faGit, faMastodon, faGithub } from '@fortawesome/free-brands-svg-icons'
 import { faBook, faUser, faServer, faHouseUser, faHeart } from '@fortawesome/free-solid-svg-icons'
 
 export default function Index(props) {
@@ -32,12 +35,12 @@ export default function Index(props) {
       <Layout title={t('home')}>
         <div className="my-9 text-center">
           <div className="m-10">
-          <img
+          <Image
-              className   = "mx-auto"
               src         = "/images/avatar_riru.png"
               alt         = "yude's avatar"
               width       = {200}
               height      = {200}
+              unoptimized = {true}
           />
           </div>
           
@@ -56,6 +59,7 @@ export default function Index(props) {
           
           {/* Banner */}
           <div className="mx-auto mt-10">
+            <BlueRibbon />
             <HappyBusy />
           </div>
           

pages/minecraft.js

@@ -9,6 +9,7 @@ import { useRouter } from 'next/router'
 import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n';
 
 // Next.js
+import Image from 'next/image'
 import Link from 'next/link'
 
 // Custom pages
@@ -50,7 +51,7 @@ export default function About(props) {
             <div>
                 <p className="my-2 text-3xl text-center">{t('title')}</p>
                 <div className="w-full">
-                <img
+                <Image
                     src         = "/images/dynmap.png"
                     alt         = "Minecraft brief world map generated by Dynmap"
                     width       = {1354}

pages/profile.js

@@ -11,6 +11,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 // Next.js, React
 import Link from 'next/link'
+import Image from 'next/image'
+import { useRouter } from 'next/router'
 
 // Discord
 import DiscordStatus from './components/Discord/DiscordStatus'
@@ -44,7 +46,7 @@ export default function Profile(props) {
           }
           <div>
             <div className="flex mb-10 justify-center">
-            <img
+            <Image
               className   = "rounded-full hover:animate-rumble z-0 p-15"
               src         = "/images/avatar_mel.png"
               alt         = "yude's avatar"