Add comments and SEO, Code organization

pages/server.js

@@ -1,25 +1,38 @@
+// Base layout
 import Layout from "./components/Layout"
+
+// i18n
 import useTranslation from 'next-translate/useTranslation'
 
+// React Router
 import { useRouter } from 'next/router'
 
+// next-seo
+import { NextSeo } from 'next-seo';
+
 export default function Server(props) {
   const router = useRouter()
   const { locale, locales, defaultLocale, pathname } = router
   const { t, lang } = useTranslation("server")
 
   return (
-
+    <>
+      <NextSeo
+        title="yude.jp サーバー上"
+        description="yude.jp 上に設置されているサーバーの一覧、情報"
+      />
       <Layout title={t('status')}>
           <div className="my-9 text-center">
+          
           {
-         // Heading
+           // Header
           }
           <div className="mb-5">
             <p className="text-left text-4xl">{t('status')} <p className="md:inline font-mono text-base sm:">Powered / Generated by Mackerel.</p></p>
           </div>
+          
           {
-            // yui Mackerel
+              // yui
           }
           <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">yui</h2>
           <div className="flex xl:w-2/3 text-center">
@@ -31,7 +44,7 @@ export default function Server(props) {
           <iframe className="w-full h-96" src="https://mackerel.io/embed/public/embed/heHnGhDanoIDlf7jjxUe9yPVrsG3deeH5ptD8suErrq5w46crWEIYdLfzLoukzfF?period=24h" height="400" frameBorder="0" scrolling="no"></iframe>
           
           {
-            // yukino Mackerel
+              // yukino
           }
           <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">yukino</h2>
           <div className="flex xl:w-2/3 text-center">
@@ -43,7 +56,7 @@ export default function Server(props) {
           <iframe className="w-full h-96" src="https://mackerel.io/embed/public/embed/5HVbQiwuxrMithyrGjmmQCCOVgJ6Ptf94SDA2qWSTsh2rtz7pjePihYzaW5QEml4?period=24h" height="400" frameBorder="0" scrolling="no"></iframe>
           
           {
-            // iroha Mackerel
+              // iroha
           }
           <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">iroha</h2>
           <div className="flex xl:w-2/3 text-center">
@@ -57,7 +70,7 @@ export default function Server(props) {
           
           
           {
-            // iroha Mackerel
+              // komachi
           }
           <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">komachi</h2>
           <div className="flex xl:w-2/3 text-center">
@@ -71,5 +84,6 @@ export default function Server(props) {
   
         </div>
       </Layout>
+    </>
   )
 }