Try to use getServerSideProps(), Cleanup

pages/components/DiscordPlaying.js

@@ -1,24 +1,21 @@
 import React from "react";
 import useTranslation from 'next-translate/useTranslation'
 import { useRouter } from 'next/router'
-import useRequest from '../lib/useRequest'
+const url = 'https://discord.com/api/guilds/723409709306216498/widget.json';
 
-const App = () => {
+function App ({data}){
   const router = useRouter()
   const { locale, locales, defaultLocale, pathname } = router
   const { t, lang } = useTranslation("common")
   
-  const { data } = useRequest({
-    url: 'https://discord.com/api/guilds/723409709306216498/widget.json'
-  })
-  
   if (data === undefined){
     console.log("Discord API: データの取得に失敗しました。 / Failed to retrieve data.")
     return <p></p>
   }else{
   const str = JSON.stringify(data)
-  const yes_playing = t('yes_playing', {playing: data.members[0].game.name})
+  
   if (str.indexOf("game") !== -1){
+  const yes_playing = t('yes_playing', {playing: data.members[0].game.name})
   return <p>{yes_playing}</p>
   }else{
   return <p></p>
@@ -26,4 +23,13 @@ const App = () => {
 }
 };
 
+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/Spotify.js

@@ -1,18 +1,13 @@
 import React from "react";
 import useTranslation from 'next-translate/useTranslation'
 import { useRouter } from 'next/router'
-import useRequest from '../lib/useRequest'
+const url = '/api/Spotify';
 
-const App = () => {
+function App ({data}) {
   const router = useRouter()
   const { locale, locales, defaultLocale, pathname } = router
-  const { t, lang } = useTranslation("common")
-  
-  const [isPlaying, setIsPlaying] = React.useState(0);
-  const { data } = useRequest({
-    url: '/api/Spotify'
-  })
-  
+  const { t, lang } = useTranslation("common")  
+
   if (data === undefined){
     console.log("Spotify Web API: データの取得に失敗しました。 / Failed to retrieve data.")
     return <p></p>
@@ -27,4 +22,13 @@ const App = () => {
 };
 }
 
+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/lib/useRequest.js

@@ -1,25 +0,0 @@
-import useSWR from 'swr'
-import axios from 'axios'
-
-export default function useRequest(request, { initialData, ...config } = {}) {
-  return useSWR(
-    request && JSON.stringify(request),
-    () => axios(request || {}).then(response => response.data),
-    {
-      ...config,
-      initialData: initialData && {
-        status: 200,
-        statusText: 'InitialData',
-        headers: {},
-        data: initialData
-      },
-        revalidateOnFocus: false,
-        revalidateOnMount:false,
-        revalidateOnReconnect: false,
-        refreshWhenOffline: false,
-        refreshWhenHidden: false,
-        refreshInterval: 0,
-        shouldRetryOnError: false
-    },
-  )
-}