Bump json5 from 1.0.1 to 1.0.2

Bumps [json5](https://github.com/json5/json5) from 1.0.1 to 1.0.2. - [Release notes](https://github.com/json5/json5/releases) - [Changelog](https://github.com/json5/json5/blob/main/CHANGELOG.md) - [Commits](https://github.com/json5/json5/compare/v1.0.1...v1.0.2) --- updated-dependencies: - dependency-name: json5 dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>
Merge pull request #21 from yudejp/dependabot/npm_and_yarn/minimatch-3.1.2
2025-10-16 21:28:38 +09:00 · 2023-03-08 01:28:11 +00:00 · 2023-03-08 10:27:47 +09:00 · 2023-03-08 10:27:38 +09:00 · 2023-03-08 10:27:27 +09:00 · 2023-03-08 10:27:14 +09:00
107 changed files with 4424 additions and 2868 deletions
--- a/.env.local.sample
+++ b/.env.local.sample
@@ -1,3 +0,0 @@
-SPOTIFY_CLIENT_ID=
-SPOTIFY_CLIENT_SECRET=
-SPOTIFY_REFRESH_TOKEN=
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -0,0 +1,8 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@next/next/no-document-import-in-page": "off",
+    "@next/next/no-img-element": "off",
+    "react-hooks/exhaustive-deps": "off"
+  }
+}
--- a/.gitignore
+++ b/.gitignore
@@ -11,3 +11,6 @@ yarn-error.log
 .vimrc~
 ..vimrc.un~
 .env.local
+out
+.vercel
+.DS_Store
--- a/README.md
+++ b/README.md
@@ -2,15 +2,12 @@
 ![Vercel](https://vercelbadge.vercel.app/api/yudejp/yude.jp?style=for-the-badge)
 <img alt="Next JS" src="https://img.shields.io/badge/nextjs-%23000000.svg?style=for-the-badge&logo=next.js&logoColor=white"/>
 <img alt="TailwindCSS" src="https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white"/>\
-Front page of [yude.jp](https://yude.jp).\
-Built with [Next.js](https://nextjs.org/) and [Tailwind CSS](https://tailwindcss.com/) and deployed on [Vercel](https://vercel.com).
+Source code of [yude.jp](https://yude.jp).\
+Built with [Next.js](https://nextjs.org/) and [Tailwind CSS](https://tailwindcss.com/) and deployed to [Cloudflare Pages](https://pages.cloudflare.com/).

 ## Development
-### Setup
-1. Run `yarn`.
-1. Rename `.env.local.sample` as `.env.local` and set value. 
-### Preview
-* Run `yarn dev`.
+1. Run `yarn` to install dependencies.
+2. Run `yarn dev` to serve.

 ## License
-This repository is licensed under the MIT License.
+This repository is provided under the MIT License.
--- a/docs/hcunews/ja.md
+++ b/docs/hcunews/ja.md
@@ -1,13 +1,12 @@
 このアカウントは**非公式**アカウントです。また、内容を保証するものではありません。

-# 管理者
+# 連絡先
 広島市立大学 情報科学部 2年の [yude](https://yude.jp/profile) が管理しています。このアカウントについての連絡は下記までお願いします。
-## 連絡先
 * 電子メール: [admin@yude.jp](mailto:admin@yude.jp)
 * Twitter: [@yude_jp](https://twitter.com/yude_jp)

-# 稼働方法
-Microsoft Power Automate によって広島市立大学WebページのRSSフィードを取得し、新しい記事が投稿されている場合にツイートします。\
+# 仕組み
+Microsoft Power Automate によって広島市立大学 Web ページの RSS フィードを取得し、新しい記事が投稿されている場合にツイートします。\
 次の URL を監視しています。
 * [お知らせ｜広島市立大学](https://www.hiroshima-cu.ac.jp/news/)
 * [お知らせ（在学生・保護者の方へ）｜広島市立大学](https://www.hiroshima-cu.ac.jp/news_student/)
--- a/docs/minecraft/en.md
+++ b/docs/minecraft/en.md
@@ -0,0 +1,35 @@
+# Rules
+The following applies in addition to [yude.jp Terms of Service](https://yude.jp/tos):
+* You can build your house / facility / etc. anywhere in the world.
+* Don't troll.
+* Don't cheat.
+
+# Part of the list of available commands ()
+* `/ll`: Switch the visibility of spawn checker.
+* `/mvspawn`: Teleport to spawn point of the world you're in.
+
+# Convenient functionalities
+## Bulk destruction
+You can destroy wood logs and ore blocks at once by destroying with sneaking.\
+## Block protection
+You can protect your chests, doors, furnaces, etc. by pasting sign like the image below.\
+You can also create a shared block by writing the player ID across multiple lines. \
+![Chest Protection](/images/minecraft/lockette/chest.png)
+## Skills
+You can use skills powered by mcMMO.
+## Warp
+You can warp to registered points.
+To show registered points, run `/warps`. To warp, run `/warp <name>`.
+
+# Game specifications
+* `keepInventory` is `true`, which means you won't drop inventory on death.
+
+# Facility introduction
+## Shrine (by shirachan_1204)
+![Shrine](/images/minecraft/shrine.png)
+## Iron Golem Trap (by yude & kuwazi_)
+![Iron Golem Trap](/images/minecraft/golem_trap.png)
+## Huge field (by yude & kuwazi_)
+![Huge field](/images/minecraft/large_field.png)
+## Giant sugar cane field  (by yude)
+![Giant sugar cane field ](/images/minecraft/sugarcane.png)
--- a/docs/minecraft/ja.md
+++ b/docs/minecraft/ja.md
@@ -0,0 +1,34 @@
+# ルール
+[yude.jp サービス利用規約](https://yude.jp/tos) に加えて、以下が適用されます。
+* ワールドのどこであっても自由に建築することができます。
+* トロール (荒らし) を行わないでください。
+* チートを行わないでください。
+# 主な使用可能なコマンドの一覧
+* `/ll`: スポーンチェッカーの表示を切り替えます。
+* `/mvspawn`: ワールドのスポーン地点へ転移します。
+
+# 便利機能
+## 一括破壊
+木や鉱石ブロックをスニーク (しゃがむ) しながら破壊すると一括破壊できます。
+## ブロックの保護
+看板を画像のように貼り付けることで、チェストやドア、かまどなどを保護できます。\
+複数行に渡ってプレイヤー ID を書くことで、共有ブロックを作ることもできます。\
+![Chest Protection](/images/minecraft/lockette/chest.png)
+## スキル
+mcMMO を導入しているので、プラグインによるスキルを利用できます。  
+## ワープ
+登録されている地点へワープできます。
+`/warps` で登録地点の一覧を表示し、`/warp (登録名)` でワープします。
+
+# ゲームの仕様
+* `keepInventory` は `true` になっています。したがって、死亡によるインベントリーのドロップはありません。
+
+# 施設紹介
+## 神社 (by shirachan_1204)
+![神社](/images/minecraft/shrine.png)
+## アイアンゴーレムトラップ (by yude & kuwazi_)
+![アイアンゴーレムトラップ](/images/minecraft/golem_trap.png)
+## 巨大畑 (by yude & kuwazi_)
+![巨大畑](/images/minecraft/large_field.png)
+## 巨大サトウキビ畑 (by yude)
+![巨大サトウキビ畑](/images/minecraft/sugarcane.png)
--- a/docs/mutual/en.md
+++ b/docs/mutual/en.md
@@ -0,0 +1,14 @@
+# Mutual links
+Publishing the website whose links to yude.jp.
+
+## Link listing
+### カービィ★KIRBYの家 `https://exout.net/~kirby3ds/`
+[![kirby3ds](/images/mutual/kirby3ds.png)](https://exout.net/~kirby3ds/)
+
+### こーげんやさい `https://nona-takahara.github.io/`
+[![こーげんやさい](/images/mutual/nona-takahara.png)](https://nona-takahara.github.io/)
+
+
+## To those who want to link yude.jp
+Thank you! You can use the banner below to link this website.
+[![yude.jp](/images/banner_new.png)](https://yude.jp)
--- a/docs/mutual/ja.md
+++ b/docs/mutual/ja.md
@@ -0,0 +1,14 @@
+# 相互リンク
+この Web サイトをリンクしてくださっている方のページを掲載します。
+
+## リンク一覧
+### カービィ★KIRBYの家 `https://exout.net/~kirby3ds/`
+[![kirby3ds](/images/mutual/kirby3ds.png)](https://exout.net/~kirby3ds/)
+
+### こーげんやさい `https://nona-takahara.github.io/`
+[![こーげんやさい](/images/mutual/nona-takahara.png)](https://nona-takahara.github.io/)
+
+
+## このサイトをリンクしてくださる方へ
+ありがとうございます！以下のバナーを使用して、この Web サイトをリンクすることができます。
+[![yude.jp](/images/banner_new.png)](https://yude.jp)
--- a/docs/services/en.md
+++ b/docs/services/en.md
@@ -0,0 +1,23 @@
+# Available services on yude.jp
+
+## Softwares
+* [AutoMuteUs](https://github.com/denverquane/automuteus)\
+Among Us helper; API: [`galactus.yude.jp`](https://galactus.yude.jp)
+* [Nextcloud](https://nc.yude.jp)
+* [Mastodon](https://mstdn.yude.jp)
+* [Misskey](https://misskey.yude.jp)
+* [Pleroma](https//pleroma.yude.jp)
+* TeamSpeak 3: `yude.jp`
+* [Gitea](https://git.yude.jp)
+* [h5ai](https://files.yude.jp)
+* [JMusicBot (forked)](https://discord.com/oauth2/authorize?client_id=429638220456656896&scope=bot&permissions=338963472)
+* [Owncast](https://live.yude.jp)
+* [Minecraft Server](https://yude.jp/minecraft)
+
+## Anonymous communication
+### Tor
+* Relay: [yudejp](https://metrics.torproject.org/rs.html#details/CF762EF3C86B104C301511894547C72371F952A4)
+* Hidden Service: [yude3mzscyufx5u3zup72ium7tgecy3bd67p7t6vqhaywvr7e2gqpcqd.onion](http://yude3mzscyufx5u3zup72ium7tgecy3bd67p7t6vqhaywvr7e2gqpcqd.onion)
+
+### I2P
+* Hidden Service: [yudejp.i2p/?i2paddresshelper=55ivoba6mo3mqlwvw5lqz7lchxqew2kh77kwkn5shefrj2dp3coq.b32.i2p](http://yudejp.i2p/?i2paddresshelper=55ivoba6mo3mqlwvw5lqz7lchxqew2kh77kwkn5shefrj2dp3coq.b32.i2p)
--- a/docs/services/ja.md
+++ b/docs/services/ja.md
@@ -0,0 +1,23 @@
+# yude.jp で運用中のサービス
+
+## ソフトウェア
+* [AutoMuteUs](https://github.com/denverquane/automuteus)\
+Among Us の自動ミュートボット; API: [`galactus.yude.jp`](https://galactus.yude.jp)
+* [Nextcloud](https://nc.yude.jp)
+* [Mastodon](https://mstdn.yude.jp)
+* [Misskey](https://misskey.yude.jp)
+* [Pleroma](https//pleroma.yude.jp)
+* TeamSpeak 3: `yude.jp`
+* [Gitea](https://git.yude.jp)
+* [h5ai](https://files.yude.jp)
+* [JMusicBot (フォーク)](https://discord.com/oauth2/authorize?client_id=429638220456656896&scope=bot&permissions=338963472)
+* [Owncast](https://live.yude.jp)
+* [Minecraft サーバー](https://yude.jp/minecraft)
+
+## 秘匿化ネットワーク
+### Tor
+* リレー: [yudejp](https://metrics.torproject.org/rs.html#details/CF762EF3C86B104C301511894547C72371F952A4)
+* Hidden Service: [yude3mzscyufx5u3zup72ium7tgecy3bd67p7t6vqhaywvr7e2gqpcqd.onion](http://yude3mzscyufx5u3zup72ium7tgecy3bd67p7t6vqhaywvr7e2gqpcqd.onion)
+
+### I2P
+* Hidden Service: [yudejp.i2p/?i2paddresshelper=55ivoba6mo3mqlwvw5lqz7lchxqew2kh77kwkn5shefrj2dp3coq.b32.i2p](http://yudejp.i2p/?i2paddresshelper=55ivoba6mo3mqlwvw5lqz7lchxqew2kh77kwkn5shefrj2dp3coq.b32.i2p)
--- a/i18n.json
+++ b/i18n.json
@@ -1,14 +0,0 @@
-{
-    "locales": ["en", "ja"],
-    "defaultLocale": "ja",
-    "pages": {
-      "*": ["common"],
-      "/": ["index", "minecraft", "common"],
-      "/profile": ["profile", "common"],
-      "/status": ["status", "common"],
-      "/house": ["house", "common"],
-      "/tos": ["tos", "common"],
-      "/hcunews": ["hcunews", "common"],
-      "/minecraft": ["minecraft", "common"]
-    }
-  }
--- a/i18n/index.js
+++ b/i18n/index.js
@@ -0,0 +1,12 @@
+var ja = require('./translations.ja.json');
+var en = require('./translations.en.json')
+
+const i18n = {
+	translations: {
+		ja: ja,
+		en: en,
+	},
+	defaultLang: 'ja'
+}
+
+module.exports = i18n;
--- a/i18n/translations.en.json
+++ b/i18n/translations.en.json
@@ -0,0 +1,67 @@
+{
+    "caption": "The requested page does not exist on this website.",
+    "return": "Return to top",
+    "footer": "This page is provided under the MIT License.",
+    "source": "Source code",
+    "tos": "yude.jp Terms of Service",
+    "yes_playing": "Playing {{playing}}",
+    "listening": "Listening to {{listening}}",
+    "close": "Close",
+    "mutual": "Mutual links",
+    "status": "Service Status",
+    "icon_1": "Icon: ",
+    "icon_2": " ",
+    "post_list": "Posts listing",
+    "hcunews": "About @hcunews",
+    "house": "yude's house",
+    "home": "Home",
+    "profile": "yude's profile",
+    "blog": "yude's blog",
+    "status": "yude.jp Server Status",
+    "house": "yude's house",
+    "discord": "yude.jp Discord Server",
+    "mastodon": "Mastodon instance",
+    "title": "Minecraft Multiplayer",
+    "playing": "{{count}} player(s) online.",
+    "no_one": "No one is playing.",
+    "offline": "Server is down.",
+    "address": "Server address",
+    "fail": "Failed to retrieve server status.",
+    "loading": "Retrieving server status...",
+    "version": "Version",
+    "about": "About yude",
+    "desc": "Description",
+    "school": "Faculty of Information Science, Hiroshima City University.",
+    "hiroshima": "Hiroshima, Japan",
+    "location": "Location",
+    "link": "Links",
+    "link_all": "To see all of yude's account, please visit ",
+    "link_all_late": ".",
+    "here": "here",
+    "mail": "E-mail",
+    "birth": "Birthday",
+    "date": "November the 19th, 2001",
+    "contact": "Accounts",
+    "belongs": "Organization",
+    "grade": "B2",
+    "keys": "Public keys",
+    "download": "Download",
+    "fingerprint": "Digital fingerprint",
+    "view": "View",
+    "device": "Devices",
+    "account": "Accounts",
+    "wishlist": "Amazon Wishlist",
+    "status": "Server Status",
+    "location": "Location",
+    "tottori": "Tottori, Japan",
+    "hiroshima": "Hiroshima, Japan",
+    "model": "Model",
+    "region": "Region",
+    "service": "Service",
+    "shape": "Shape",
+    "tos": "yude.jp Terms of Service",
+    "input": "en",
+    "services": "Services",
+    "contents": "Contents",
+    "Blog": "Weblog"
+}
--- a/i18n/translations.ja.json
+++ b/i18n/translations.ja.json
@@ -0,0 +1,67 @@
+{
+    "caption": "要求されたページはこのウェブサイト上に存在しません。",
+    "return": "トップページへ戻る",
+    "footer": "このページは MIT License のもと提供されています。",
+    "source": "ソースコード",
+    "tos": "yude.jp サービス利用規約",
+    "yes_playing": "{{playing}} をプレイ中",
+    "listening": "{{listening}} を再生中",
+    "close": "閉じる",
+    "mutual": "相互リンク",
+    "status": "サービスの状態",
+    "icon_1": "アイコン: ",
+    "icon_2": "さん",
+    "post_list": "記事一覧",
+    "hcunews": "@hcunews について",
+    "house": "ゆでハウス",
+    "home": "ホーム",
+    "profile": "yude のプロフィール",
+    "blog": "yude のブログ",
+    "status": "yude.jp サーバー情報",
+    "house": "ゆでハウス",
+    "discord": "yude.jp Discord サーバー",
+    "mastodon": "Mastodon インスタンス",
+    "title": "Minecraft マルチプレイ",
+    "playing": "{{count}} 人がプレイしています。",
+    "no_one": "現在、誰もログインしていません。",
+    "offline": "サーバーがオフラインのようです。",
+    "address": "サーバー アドレス",
+    "fail": "サーバーの状態を取得できませんでした。",
+    "loading": "サーバーの状態を取得しています...",
+    "version": "バージョン",
+    "about": "yude について",
+    "desc": "概要",
+    "school": "広島市立大学 情報科学部",
+    "hiroshima": "日本, 広島県",
+    "location": "所在地",
+    "link": "リンク",
+    "link_all": "yude が所持しているすべてのアカウントの一覧は、",
+    "link_all_late": "にあります。",
+    "here": "こちら",
+    "mail": "メール",
+    "birth": "生年月日",
+    "date": "2001年11月19日",
+    "contact": "アカウント",
+    "belongs": "所属",
+    "grade": "2年",
+    "keys": "公開鍵",
+    "download": "ダウンロード",
+    "fingerprint": "電子指紋",
+    "view": "閲覧",
+    "device": "デバイス",
+    "account": "アカウント",
+    "wishlist": "Amazon ほしいものリスト",
+    "status": "サーバー情報",
+    "location": "場所",
+    "tottori": "日本, 鳥取県",
+    "hiroshima": "日本, 広島県",
+    "model": "モデル",
+    "region": "リージョン",
+    "service": "サービス",
+    "shape": "シェイプ",
+    "tos": "yude.jp サービス利用規約",
+    "input": "ja",
+    "services": "サービス",
+    "contents": "コンテンツ",
+    "blog": "ブログ"
+}
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -1,8 +0,0 @@
-{
-    "footer": "This page is licensed under the MIT License.",
-    "source": "Source code",
-    "tos": "yude.jp Terms of Service",
-    "yes_playing": "Playing {{playing}}",
-    "listening": "Listening to {{listening}}",
-    "close": "Close"
-}
--- a/locales/en/hcunews.json
+++ b/locales/en/hcunews.json
@@ -1,3 +0,0 @@
-{
-    "hcunews": "About @hcunews"
-}
--- a/locales/en/house.json
+++ b/locales/en/house.json
@@ -1,3 +0,0 @@
-{
-    "house": "yude's house"
-}
--- a/locales/en/index.json
+++ b/locales/en/index.json
@@ -1,9 +0,0 @@
-{
-    "home": "Home",
-    "profile": "yude's profile",
-    "blog": "yude's blog",
-    "status": "yude.jp Server Status",
-    "house": "yude's house",
-    "discord": "yude.jp Discord Server",
-    "mastodon": "Mastodon instance"
-}
--- a/locales/en/minecraft.json
+++ b/locales/en/minecraft.json
@@ -1,8 +0,0 @@
-{
-    "title": "Minecraft Multiplayer",
-    "playing": "{{count}} player(s) online.",
-    "no_one": "No one is playing.",
-    "offline": "Server is down.",
-    "address": "Server address",
-    "fail": "Failed to retrieve server status."
-}
--- a/locales/en/profile.json
+++ b/locales/en/profile.json
@@ -1,24 +0,0 @@
-{
-    "about": "About yude",
-    "desc": "Description",
-    "school": "Faculty of Information Science, Hiroshima City University.",
-    "hiroshima": "Hiroshima, Japan",
-    "location": "Location",
-    "link": "Links",
-    "link_all": "To see all of yude's account, please visit ",
-    "link_all_late": ".",
-    "here": "here",
-    "mail": "E-mail",
-    "birth": "Birthday",
-    "date": "November the 19th, 2001",
-    "contact": "Get in touch",
-    "belongs": "Organization",
-    "more": "More...",
-    "grade": "B2",
-    "icon_1": "Icon: ",
-    "icon_2": "",
-    "keys": "Public keys",
-    "download": "Download",
-    "fingerprint": "Digital fingerprint",
-    "view": "View"
-}
--- a/locales/en/status.json
+++ b/locales/en/status.json
@@ -1,7 +0,0 @@
-{
-    "status": "Server Status",
-    "location": "Location",
-    "tottori": "Tottori, Japan",
-    "hiroshima": "Hiroshima, Japan",
-    "model": "Model"
-}
--- a/locales/en/tos.json
+++ b/locales/en/tos.json
@@ -1,4 +0,0 @@
-{
-    "tos": "yude.jp Terms of Service",
-    "input": "en"
-}
--- a/locales/ja/common.json
+++ b/locales/ja/common.json
@@ -1,8 +0,0 @@
-{
-    "footer": "このページは MIT License の下でライセンスされています。",
-    "source": "ソースコード",
-    "tos": "yude.jp サービス利用規約",
-    "yes_playing": "{{playing}} をプレイ中",
-    "listening": "{{listening}} を再生中",
-    "close": "閉じる"
-}
--- a/locales/ja/hcunews.json
+++ b/locales/ja/hcunews.json
@@ -1,3 +0,0 @@
-{
-    "hcunews": "@hcunews について"
-}
--- a/locales/ja/house.json
+++ b/locales/ja/house.json
@@ -1,3 +0,0 @@
-{
-    "house": "ゆでハウス"
-}
--- a/locales/ja/index.json
+++ b/locales/ja/index.json
@@ -1,9 +0,0 @@
-{
-    "home": "ホーム",
-    "profile": "yude のプロフィール",
-    "blog": "yude のブログ",
-    "status": "yude.jp サーバー情報",
-    "house": "ゆでハウス",
-    "discord": "yude.jp Discord サーバー",
-    "mastodon": "Mastodon インスタンス"
-}
--- a/locales/ja/minecraft.json
+++ b/locales/ja/minecraft.json
@@ -1,8 +0,0 @@
-{
-    "title": "Minecraft マルチプレイ",
-    "playing": "{{count}} 人がプレイしています。",
-    "no_one": "現在、誰もログインしていません。",
-    "offline": "サーバーがオフラインのようです。",
-    "address": "サーバー アドレス",
-    "fail": "サーバーの状態を取得できませんでした。"
-}
--- a/locales/ja/profile.json
+++ b/locales/ja/profile.json
@@ -1,24 +0,0 @@
-{
-    "about": "yude について",
-    "desc": "概要",
-    "school": "広島市立大学 情報科学部",
-    "hiroshima": "日本, 広島県",
-    "location": "所在地",
-    "link": "リンク",
-    "link_all": "yude が所持しているすべてのアカウントの一覧は、",
-    "link_all_late": "にあります。",
-    "here": "こちら",
-    "mail": "メール",
-    "birth": "生年月日",
-    "date": "2001年11月19日",
-    "contact": "連絡先 / SNS",
-    "belongs": "所属",
-    "more": "さらに見る...",
-    "grade": "2年",
-    "icon_1": "アイコン: ",
-    "icon_2": "さん",
-    "keys": "公開鍵",
-    "download": "ダウンロード",
-    "fingerprint": "電子指紋",
-    "view": "閲覧"
-}
--- a/locales/ja/status.json
+++ b/locales/ja/status.json
@@ -1,7 +0,0 @@
-{
-    "status": "サーバー情報",
-    "location": "場所",
-    "tottori": "日本, 鳥取県",
-    "hiroshima": "日本, 広島県",
-    "model": "モデル"
-}
--- a/locales/ja/tos.json
+++ b/locales/ja/tos.json
@@ -1,4 +0,0 @@
-{
-    "tos": "yude.jp サービス利用規約",
-    "input": "ja"
-}
--- a/next-seo.config.js
+++ b/next-seo.config.js
@@ -0,0 +1,13 @@
+export default {
+    openGraph: {
+      type: 'website',
+      locale: 'ja_JP',
+      url: 'https://yude.jp/',
+      site_name: 'yude.jp',
+    },
+    twitter: {
+      handle: '@yudejp',
+      site: '@yudejp',
+      cardType: 'summary_large_image',
+    },
+  };
--- a/next.config.js
+++ b/next.config.js
@@ -1,12 +1,19 @@
-const nextTranslate = require('next-translate')
-
-module.exports = nextTranslate({
-    i18n: {
-      locales: ['ja', 'en'],
-      defaultLocale: 'ja',
+const rewrites = async () => {
+  return [
+    {
+      source: '/minecraft/players/:uuid(\[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12})',
+      destination: '/minecraft/players/:uuid'
    },
+    {
+      source: '/minecraft/players/:ign',
+      destination: '/minecraft/lookup/:ign'
+    }
+  ]
+}
+
+module.exports = {
    images: {
-      domains: ['mackerel.io'],
+      domains: ['mackerel.io', 'mc-heads.net', 'crafatar.com'],
    },
    webpack: function (config) {
      config.module.rules.push({
@@ -15,4 +22,19 @@ module.exports = nextTranslate({
      })
      return config
    },
-  })
+    async redirects() {
+      return [
+        {
+          source: '/wishlist',
+          destination: 'https://www.amazon.jp/hz/wishlist/ls/8WTKCPWKOJ2N?ref_=wl_share',
+          permanent: true,
+        },
+        {
+          source: '/scrapbox',
+          destination: 'https://scrapbox.io/yude',
+          permanent: true,
+        }
+      ]
+    },
+    rewrites,
+  }
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
    "dev": "next",
    "build": "next build",
    "start": "next start",
-    "export": "next export"
+    "export": "next export",
+    "lint": "next lint"
  },
  "repository": {
    "type": "git",
@@ -21,35 +22,44 @@
  },
  "homepage": "https://github.com/yudemoe/yude.jp#readme",
  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.35",
-    "@fortawesome/free-brands-svg-icons": "^5.15.3",
-    "@fortawesome/free-solid-svg-icons": "^5.15.3",
-    "@fortawesome/react-fontawesome": "^0.1.14",
+    "@babel/core": "^7.15.5",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-brands-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.15",
    "@tailwindcss/typography": "^0.4.0",
-    "autoprefixer": "^10.2.5",
-    "axios": "^0.21.1",
-    "next": "^10.2.2",
-    "next-themes": "^0.0.14",
-    "next-translate": "^1.0.7",
+    "autoprefixer": "^10.3.4",
+    "axios": "^0.21.4",
+    "date-fns": "^2.24.0",
+    "moment": "^2.29.4",
+    "next": "^12.1.0",
+    "next-export-i18n": "^1.2.1",
+    "next-seo": "^4.28.1",
+    "next-themes": "^0.0.15",
+    "next-translate": "^1.2.0",
    "popper.js": "^1.16.1",
-    "postcss": "^8.3.0",
+    "postcss": "^8.3.6",
+    "prop-types": "^15.7.2",
    "querystring": "^0.2.1",
    "raw-loader": "^4.0.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-markdown": "^6.0.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-markdown": "^7.0.1",
+    "react-moment": "^1.1.1",
    "react-switch": "^6.0.0",
-    "remark-gfm": "^1.0.0",
-    "swr": "^0.5.6",
-    "tailwindcss": "^2.1.2",
+    "remark-gfm": "^2.0.0",
+    "swr": "^1.0.1",
+    "tailwindcss": "^2.2.15",
    "tailwindcss-filters": "^3.0.0",
    "tailwindcss-responsive-embed": "^1.0.0",
-    "webpack": "^5.37.1"
+    "webpack": "^5.53.0"
  },
  "devDependencies": {
-    "@types/node": "^15.6.0",
-    "@types/react": "^17.0.6",
+    "@types/node": "^16.9.6",
+    "@types/react": "^17.0.24",
    "babel-plugin-inline-react-svg": "^2.0.1",
-    "typescript": "^4.2.4"
+    "eslint": "7.32.0",
+    "eslint-config-next": "11.1.2",
+    "typescript": "^4.4.3"
  }
 }
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,10 +1,18 @@
+// Tailwind CSS
 import 'tailwindcss/tailwind.css';
-import { ThemeProvider } from "next-themes";
 import "../styles/globals.css"

+// Dark-mode related
+import { ThemeProvider } from "next-themes";
+
+// next-seo
+import { DefaultSeo } from 'next-seo';
+import SEO from '../next-seo.config';
+
 function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider attribute="class">
+      <DefaultSeo {...SEO} />
      <Component {...pageProps} />
    </ThemeProvider>
  );
--- a/pages/api/Spotify.js
+++ b/pages/api/Spotify.js
@@ -1,58 +0,0 @@
-import querystring from 'querystring';
-
-const {
-  SPOTIFY_CLIENT_ID: client_id,
-  SPOTIFY_CLIENT_SECRET: client_secret,
-  SPOTIFY_REFRESH_TOKEN: refresh_token,
-} = process.env;
-
-const basic = Buffer.from(`${client_id}:${client_secret}`).toString('base64');
-const NOW_PLAYING_ENDPOINT = `https://api.spotify.com/v1/me/player/currently-playing`;
-const TOKEN_ENDPOINT = `https://accounts.spotify.com/api/token`;
-
-const getAccessToken = async () => {
-  const response = await fetch(TOKEN_ENDPOINT, {
-    method: 'POST',
-    headers: {
-      Authorization: `Basic ${basic}`,
-      'Content-Type': 'application/x-www-form-urlencoded',
-    },
-    body: querystring.stringify({
-      grant_type: 'refresh_token',
-      refresh_token,
-    }),
-  });
-
-  return response.json();
-};
-
-export const getNowPlaying = async () => {
-  const { access_token } = await getAccessToken();
-
-  return fetch(NOW_PLAYING_ENDPOINT, {
-    headers: {
-      Authorization: `Bearer ${access_token}`,
-    },
-  });
-};
-
-export default async (_, res) => {
-  const response = await getNowPlaying();
-
-  if (response.status === 204 || response.status > 400) {
-    return res.status(200).json({ isPlaying: false });
-  }
-
-  const song = await response.json();
-  const isPlaying = song.is_playing;
-  const title = song.item.name;
-  const artist = song.item.artists.map((_artist) => _artist.name).join(', ');
-  const album = song.item.album.name;
-
-  return res.status(200).json({
-    album,
-    artist,
-    isPlaying,
-    title,
-  });
-};
--- a/pages/components/Discord/DiscordPlaying.js
+++ b/pages/components/Discord/DiscordPlaying.js
@@ -0,0 +1,38 @@
+// React
+import React, { useState, useEffect } from 'react';
+
+// Data fetching
+import useSwr from 'swr'
+const fetcher = (url) => fetch(url).then((res) => res.json())
+
+// i18n
+import { useTranslation, useLanguageQuery } from 'next-export-i18n';
+
+export default function DiscordPlaying() {
+  const { t } = useTranslation();
+  const [query] = useLanguageQuery();
+  
+  const { data, error } = useSwr(
+    `https://discord.com/api/guilds/723409709306216498/widget.json`,
+     fetcher
+   )
+  if (error){
+    console.log("[Discord API] データの取得に失敗しました。 / Failed to retrieve data.")
+    return <></>
+  } else {
+    if (!data) {
+      return <p>Loading...</p>
+    } else {
+      if (data.members) {
+        if (data.members[0].game) {
+          const yes_playing = t('yes_playing', {playing: data.members[0].game.name})
+          return <p>{yes_playing}</p>
+        } else {
+          return <></>
+        }
+      } else {
+        return <></> 
+      }
+    }
+}
+}
--- a/pages/components/Discord/DiscordStatus.js
+++ b/pages/components/Discord/DiscordStatus.js
@@ -0,0 +1,46 @@
+// React
+import React, { useState, useEffect } from 'react';
+
+// Data fetching
+import axios from 'axios';
+
+const App = () => {
+  const [data, setData] = useState({ hits: [] });
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await axios(
+        'https://discord.com/api/guilds/723409709306216498/widget.json',
+      );
+      setData(result.data);
+    };  
+    fetchData();
+  }, []);
+  const str = JSON.stringify(data)
+  let status = 0
+  if (str.indexOf("status") !== -1){
+    status = data.members && data.members[0].status;
+  }
+  return (
+  <>
+  <div className="z-50 w-6 transform translate-y-3/4 -translate-x-full">
+  {
+    (() => {
+      if (status == 0) {
+        return <div className="text-gray-700 rounded-full bg-gray-500 flex w-6 h-6"></div>
+      }else{
+      if (status == "online"){
+        return <div className="text-green-700 rounded-full bg-green-500 flex w-6 h-6"></div>
+      } else if (status == "idle"){
+        return <div className="text-yellow-700 rounded-full bg-green-500 flex w-6 h-6"></div>
+      } else {
+        return <div className="text-yellow-700 rounded-full bg-red-500 flex w-6 h-6"></div>
+      } 
+    }
+    })()
+  }
+  </div>
+  </>
+  )
+}
+
+export default App;
--- a/pages/components/DiscordPlaying.js
+++ b/pages/components/DiscordPlaying.js
@@ -1,44 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
-import useTranslation from 'next-translate/useTranslation'
-import { useRouter } from 'next/router'
-
-function App (){
-  const router = useRouter()
-  const { locale, locales, defaultLocale, pathname } = router
-  const { t, lang } = useTranslation("common")
-  const [data, setData] = useState({ hits: [] });
-  useEffect(() => {
-    const fetchData = async () => {
-      const result = await axios(
-        'https://discord.com/api/guilds/723409709306216498/widget.json',
-      );
-      setData(result.data);
-    };  
-    fetchData();
-  }, []);
-  if (data === undefined){
-    console.log("[Discord API] データの取得に失敗しました。 / Failed to retrieve data.")
-    return <p></p>
-  }else{
-  const str = JSON.stringify(data)
-  
-  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>
-  }
-}
-};
-
-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;
--- a/pages/components/DiscordStatus.js
+++ b/pages/components/DiscordStatus.js
@@ -1,37 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
-
-const App = () => {
-  const [data, setData] = useState({ hits: [] });
-  useEffect(() => {
-    const fetchData = async () => {
-      const result = await axios(
-        'https://discord.com/api/guilds/723409709306216498/widget.json',
-      );
-      setData(result.data);
-    };  
-    fetchData();
-  }, []);
-  const status = data.members && data.members[0].status;
-  return (
-  <>
-  <div className="z-50 transform translate-x-96 -translate-y-10 w-5">
-  {
-    (() => {
-      if (status == "online"){
-        return <div className="z-1000 text-green-700 rounded-full bg-green-500 flex w-5 h-5"></div>
-      } else if (status == "idle"){
-        return <div className="z-1000 text-yellow-700 rounded-full bg-green-500 flex w-5 h-5"></div>
-      } else if (status == "dnd"){
-        return <div className="z-1000 text-yellow-700 rounded-full bg-red-500 flex w-5 h-5"></div>
-      } else {
-        return <div className="z-1000 text-gray-700 rounded-full bg-red-500 flex w-5 h-5"></div>
-      }
-    })()
-  }
-  </div>
-  </>
-  )
-}
-
-export default App;
--- a/pages/components/Footer.js
+++ b/pages/components/Footer.js
@@ -1,29 +0,0 @@
-import "tailwindcss/tailwind.css";
-import Link from 'next/link';
-import useTranslation from 'next-translate/useTranslation'
-import { useRouter } from 'next/router'
-export default function Footer(props) {
-    
-    const router = useRouter()
-    const { locale, locales, defaultLocale, pathname } = router
-    const { t, lang } = useTranslation("common")
-    const footer = t('footer')
-    const source = t('source')
-    const tos = t('tos')
-        return (
-          <>
-            <div className="container mx-auto px-6">
-            <div className="flex flex-col items-center">
-                <div className="sm:w-full text-center py-6">
-                    <p className="text-sm font-bold mb-2">
-                        {footer} / <Link href="https://github.com/yudejp/yude.jp"><a className="hover:underline">{source}</a></Link>
-                    </p>
-                    <p className="text-sm font-bold mb-2">
-                        <Link href="/tos"><a className="hover:underline">{tos}</a></Link>
-                    </p>
-                </div>
-              </div>
-            </div>
-          </>
-            );
-}
--- a/pages/components/Footer/Footer.js
+++ b/pages/components/Footer/Footer.js
@@ -0,0 +1,26 @@
+// Tailwind CSS
+import "tailwindcss/tailwind.css";
+
+// Next.js
+import Link from 'next/link';
+
+// i18n
+import { useTranslation, useLanguageQuery } from 'next-export-i18n';
+
+export default function Footer(props) {
+  const { t } = useTranslation();
+  const [query] = useLanguageQuery();
+    return (
+      <>
+        <div className="container mx-auto px-6">
+        <div className="flex flex-col items-center">
+            <div className="sm:w-full text-center py-6">
+                <p className="text-sm font-bold mb-2">
+                    {t('footer')} / <Link href="https://github.com/yudejp/yude.jp"><a className="hover:underline">{t('source')}</a></Link>
+                </p>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+}
--- a/pages/components/Footer/HappyBusy.js
+++ b/pages/components/Footer/HappyBusy.js
@@ -0,0 +1,20 @@
+// Next.js
+import Link from 'next/link'
+
+const HappyBusy = (props) => {
+  return (
+    <Link href="https://sites.google.com/site/happybusy/">
+        <a>
+          <img
+            src="/images/busy_banner.png"
+            width={200}
+            height={42}
+            alt="時間のないサイト運営者リング"
+            className="mx-auto"
+          />
+        </a>
+    </Link>
+  )
+}
+
+export default HappyBusy
--- a/pages/components/LangSelector.js
+++ b/pages/components/LangSelector.js
@@ -1,12 +1,14 @@
 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 }) => {
-  const router = useRouter()
-  const { locale, locales, defaultLocale, pathname } = router
-
  // dropdown props
  const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
  const btnDropdownRef = React.createRef();
@@ -29,7 +31,7 @@ const Dropdown = ({ color }) => {
    <>

 <div className="text-left mr-2 ml-2 my-3 float-right">
-    <button type="button" className="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500" id="options-menu" aria-haspopup="true" aria-expanded="true"
+    <button type="button" className="inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-800 shadow-sm px-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 dark:bg-gray-700 dark:text-white focus:outline-none h-10" id="options-menu" aria-haspopup="true" aria-expanded="true"
    style={{ transition: "all .15s ease" }}
    ref={btnDropdownRef}
    onClick={() => {
@@ -38,20 +40,20 @@ const Dropdown = ({ color }) => {
        : openDropdownPopover();
    }}
    >
-      言語 / Languages
-      <svg className="-mr-1 ml-2 h-5 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+      <FontAwesomeIcon icon={faLanguage} size="3x" />
+      <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>
    </button>  
  <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"}>
+              (dropdownPopoverShow ? "block " : "hidden ") + "z-10 origin-top-right absolute right-0 mt-2 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">
-      <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">日本語</a>
-    </Link>
-    <Link href="#" locale="en">
-      <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">English</a>
-    </Link>
+    <LanguageSwitcher lang="ja">
+      <a href="#" className="block px-4 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-white dark:hover:bg-gray-800" role="menuitem">日本語</a>
+    </LanguageSwitcher>
+    <LanguageSwitcher lang="en">
+      <a href="#" className="block px-4 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-white dark:hover:bg-gray-800" role="menuitem">English</a>
+    </LanguageSwitcher>
    </div>
  </div>
 </div>
--- a/pages/components/Layout.js
+++ b/pages/components/Layout.js
@@ -1,26 +1,24 @@
+// Next.js
 import Head from "next/head"
+
+// Tailwind CSS
 import "tailwindcss/tailwind.css";
-import useTranslation from 'next-translate/useTranslation'
-import { useRouter } from 'next/router'
+
+// React
 import React, { useEffect, useState } from 'react'
-import Footer from "./Footer"
+
+// Components
+import Footer from "./Footer/Footer"
 import Navbar from "./Navbar"

 const Layout = (props) => {
  const { title, children } = props
  const siteTitle = "yude.jp"
-  const router = useRouter()
-  const { locale, locales, defaultLocale, pathname } = router
-
-  const { t, lang } = useTranslation("common")
-  const footer = t('footer')
-  const source = t('source')
-  const tos = t('tos')
  return (
    <div className="page">
      <Head>
        <title>{title ? `${title} - ${siteTitle}` : siteTitle}</title>
-        <link rel="icon" href="/static/images/favicon.ico" />
+        <link rel="icon" href="/images/favicon.ico" />
      </Head>
      <main>
      <Navbar />
--- a/pages/components/Menu/FontAwesomeMenu.js
+++ b/pages/components/Menu/FontAwesomeMenu.js
@@ -0,0 +1,21 @@
+// Next.js
+import Link from 'next/link'
+
+// Font Awesome
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const FontAwesomeMenu = (props) => {
+  const { icon, dest, query } = props
+
+  return (
+    <div>
+        <Link href={{ pathname: dest, query: query }}>
+            <a>
+                <FontAwesomeIcon icon={icon} size="5x" className="w-9 h-9 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" />
+            </a>
+        </Link>
+    </div>
+  )
+}
+
+export default FontAwesomeMenu
--- a/pages/components/Menu/MinecraftMenu.js
+++ b/pages/components/Menu/MinecraftMenu.js
@@ -0,0 +1,24 @@
+// Next.js
+import Link from 'next/link'
+
+const MinecraftMenu = (props) => {
+  const { query } = props
+  
+  if (!query) {
+    return <p>Loading...</p>
+  } else {
+  return (
+    <div>
+        <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"/>
+                </svg>
+            </a>
+        </Link>
+    </div>
+  )
+}
+}
+
+export default MinecraftMenu
--- a/pages/components/Minecraft.js
+++ b/pages/components/Minecraft.js
@@ -1,15 +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';

 export default function Minecraft(props) {
-  const router = useRouter()
-  const { locale, locales, defaultLocale, pathname } = router
-  const { t, lang } = useTranslation("minecraft")
-
+  const { t } = useTranslation();
+  const [query] = useLanguageQuery();
  const [data, setData] = useState({ hits: [] });
-  const fail = t('minecraft:fail')
+
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
@@ -23,27 +24,41 @@ export default function Minecraft(props) {
    if (data === undefined){
        console.log("[Minecraft Query] データの取得に失敗しました。 / Failed to retrieve data.")
        return (
-        <p>{fail}</p>
+        <p>{t('fail')}</p>
        )
      }else{
        const status = data.online
        const player = data.players && data.players.online
-        const playing = t('minecraft:playing', {count: player})
-        const no_one = t('minecraft:no_one')
-        const offline = t('minecraft:offline')
+
        return (
-          <p className="text-center">
+          <div className="text-center">
            {(() => {
-            if (status) {
+            if (status == true) {
            if (player == undefined || player == 0) {
-              return <span>{no_one}</span>
+              return <span>{t('no_one')}</span>
            } else {
-              return <span>{playing}</span>
-            }}else{
-              return <span>{offline}</span>
+              return <span>{t('playing', {count: player})}</span>
+            }}else if (status == false) {
+              return <span>{t('offline')}</span>
+            }else {
+              return <span>{t('loading')}</span>
            }
          })()}
-          </p>
+
+          {(() => {
+            if (data.players && data.players.list){
+              var list = [];
+              var url = [];
+              for (var i in data.players.list){
+                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}/>)
+              }
+              return <div>{list}</div>
+            }
+          })()}
+          </div>
        )
      }
 }
--- a/pages/components/Minecraft/Biography.js
+++ b/pages/components/Minecraft/Biography.js
@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+function App (props) {
+  const uuid = props;
+  const [data, setData] = useState({ hits: [] });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await axios(
+        'https://playersbio.yude.jp/' + uuid.uuid,
+      );
+      setData(result.data);
+    };  
+    fetchData();
+  }, []);
+  if (data === undefined){
+    console.log("[Minecraft: PlayersBio] データの取得に失敗しました。 / Failed to retrieve data.")
+    return <p></p>
+  }else {
+      if (data.toString() == "[object Object]"){
+        return <p>読み込み中...</p>
+      } else {
+        if (data.toString() == "") {
+            return <p>ひとことは設定されていません...</p>
+        } else {
+            return <p>ひとこと: <span className="italic">{data.toString()}</span></p>
+        }
+      }
+    };
+}
+
+export default App;
--- a/pages/components/Minecraft/Group.js
+++ b/pages/components/Minecraft/Group.js
@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { useRouter } from 'next/router'
+
+function App (props) {
+  const uuid = props;
+  const [data, setData] = useState({ hits: [] });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await axios(
+        'https://minecraft.yude.jp/group/' + uuid.uuid,
+      );
+      setData(result.data);
+    };  
+    fetchData();
+  }, []);
+  
+  if (data === undefined || data === null){
+    return <p></p>
+  }else {
+        if (data.toString() == "staff") {
+            return <span className="inline-flex items-center justify-center px-3 py-2 text-base font-bold leading-none text-indigo-100 bg-indigo-700 rounded ml-3">Staff</span>
+        } else {
+            return <></>
+        }
+    };
+}
+
+export default App;
--- a/pages/components/Minecraft/Head.js
+++ b/pages/components/Minecraft/Head.js
@@ -0,0 +1,15 @@
+import React, { useState, useEffect } from 'react';
+
+function App (props) {
+  const uuid = props;
+
+  return (
+    <img
+        src={"https://crafatar.com/renders/body/" + uuid.uuid}
+        width={110}
+        height={250}
+    />
+  )
+}
+
+export default App;
--- a/pages/components/Minecraft/LastPlayed.js
+++ b/pages/components/Minecraft/LastPlayed.js
@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+function App (props) {
+  const uuid = props;
+  const [data, setData] = useState({ hits: [] });
+  
+  const timeAgo = (prevDate) => {
+    const diff = Number(new Date()) - prevDate;
+    const minute = 60 * 1000;
+    const hour = minute * 60;
+    const day = hour * 24;
+    const month = day * 30;
+    const year = day * 365;
+    switch (true) {
+        case diff < minute:
+            const seconds = Math.round(diff / 1000);
+             return `${seconds} 秒前`
+        case diff < hour:
+            return Math.round(diff / minute) + ' 分前';
+        case diff < day:
+            return Math.round(diff / hour) + ' 時間前';
+        case diff < month:
+            return Math.round(diff / day) + ' 日前';
+        case diff < year:
+            return Math.round(diff / month) + ' ヶ月前';
+        case diff > year:
+            return Math.round(diff / year) + ' 年前';
+        default:
+            return "";
+    }
+};
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await axios(
+        'https://minecraft.yude.jp/last/' + uuid.uuid,
+      );
+      setData(result.data);
+    };  
+    fetchData();
+  }, []);
+  if (data === undefined){
+    console.log("[Minecraft: 最終プレイ日時] データの取得に失敗しました。 / Failed to retrieve data.")
+    return <p></p>
+  }else {
+        if (data.toString() == "[object Object]") {
+            return <p>取得中です...</p>
+        } else {
+            if (data.toString() == "not_found") {
+                return <></>
+            } else {
+            let dateTime = new Date(parseInt(data.toString()) * 1000);
+            return (
+                <div className='has-tooltip'>
+                    <span className='tooltip rounded shadow-lg p-1 bg-gray-100 text-red-500 -mt-8'>{dateTime.toLocaleDateString() + " " + dateTime.toLocaleTimeString()}</span>
+                    最終ログイン: {timeAgo(dateTime)}
+                </div>
+            )
+        }
+        }
+    };
+}
+
+export default App;
--- a/pages/components/Minecraft/Online.js
+++ b/pages/components/Minecraft/Online.js
@@ -0,0 +1,44 @@
+// React
+import React, { useState, useEffect } from 'react';
+
+// Data fetching
+import axios from 'axios';
+
+// 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: [] });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await axios(
+        'https://minecraft.yude.jp/online/' + uuid.uuid,
+      );
+      setData(result.data);
+    };  
+    fetchData();
+  }, []);
+  if (data === undefined){
+    console.log("[Minecraft: オンライン状況] データの取得に失敗しました。 / Failed to retrieve data.")
+    return <p></p>
+  }else {
+        if (data.toString() == "false") {
+            return <LastPlayed uuid={uuid.uuid} />
+        } else {
+            if (data.toString() == "true") {
+            return <p>オンライン</p>
+            } else {
+                return <p>取得中...</p>
+            }
+        }
+    };
+}
+
+export default App;
--- a/pages/components/Minecraft/PlayerName.js
+++ b/pages/components/Minecraft/PlayerName.js
@@ -0,0 +1,38 @@
+// React
+import React, { useState, useEffect } from 'react';
+
+// Data fetching
+import axios from 'axios';
+
+function App (props) {
+  const uuid = props;
+  const [data, setData] = useState({ hits: [] });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      let result = null;
+      try {
+        result = await axios('https://api.ashcon.app/mojang/v2/user/' + uuid.uuid);
+        setData(result.data);
+      } catch (err) {
+        result = 404;
+        setData(result);
+      }
+    };  
+    fetchData();
+  }, []);
+  if (data === undefined){
+        console.log("[Minecraft: UUID to player's name] データの取得に失敗しました。 / Failed to retrieve data.")
+        return <>取得中...</>
+  }else {
+        if (data === 404) {
+          return <>404</>
+        } else {
+        return (
+          <>{data.username}</>
+        )
+        }
+    };
+}
+
+export default App;
--- a/pages/components/Minecraft/PlayerNameHolder.js
+++ b/pages/components/Minecraft/PlayerNameHolder.js
@@ -0,0 +1,39 @@
+// Component
+import Group from './Group';
+
+// Data fetching
+import useSwr from 'swr'
+
+const fetcher = (url) => fetch(url).then((res) => res.json())
+
+function App (props) {
+  const uuid = props;
+  const { data, error } = useSwr(
+    uuid.uuid ? `https://api.ashcon.app/mojang/v2/user/${uuid.uuid}` : null,
+    fetcher
+  )
+  
+  if (error) {
+    return (
+      <>エラーが発生しました。</>
+    )
+  } else {
+    if (!data) {
+      return (
+        <>読み込み中...</>
+      )
+    } else {
+        return (
+          <>
+            <div className='has-tooltip'>
+              <span className='tooltip rounded shadow-lg p-1 bg-gray-100 text-red-500 -mt-8 font-mono text-sm'>UUID: {uuid.uuid}</span>
+              <p className="text-2xl inline">{data.username}</p>
+              <Group uuid={uuid.uuid} />
+            </div>
+          </>
+        )
+    }
+  }
+}
+
+export default App;
--- a/pages/components/Minecraft/Players.js
+++ b/pages/components/Minecraft/Players.js
@@ -0,0 +1,25 @@
+// Components
+import Online from './Online'
+import Head from './Head'
+import PlayerNameHolder from './PlayerNameHolder'
+import Biography from './Biography'
+
+function App (props) {
+  const uuid = props;
+  
+  return (
+    <div className="w-full flex flex-wrap">
+        <div>
+            <Head uuid={uuid.uuid} />
+        </div>
+        <div className="w-5"></div>
+        <div>
+          <p className="text-2xl text-mono"><PlayerNameHolder uuid={uuid.uuid} /></p>
+          <p><Online uuid={uuid.uuid} /></p>
+          <p><Biography uuid={uuid.uuid} /></p>
+        </div>
+    </div>
+  )
+}
+
+export default App;
--- a/pages/components/Minecraft/WrongUUID.js
+++ b/pages/components/Minecraft/WrongUUID.js
@@ -0,0 +1,9 @@
+function App (props) {
+    return (
+        <div className="text-center">
+            <h2>入力された UUID またはプレイヤー名に該当するプレイヤーが見つかりませんでした。</h2>
+        </div>
+    )
+  }
+  
+export default App;
--- a/pages/components/Navbar.js
+++ b/pages/components/Navbar.js
@@ -1,13 +1,24 @@
+// Tailwind CSS
 import "tailwindcss/tailwind.css";
+
+// Next.js
 import Link from 'next/link';
+
+// Components
 import LangSelector from "./LangSelector"
 import ThemeSelector from "./ThemeSelector"

+// i18n
+import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n';
+
 const Navbar = () => {
+  const { t } = useTranslation();
+  const [query] = useLanguageQuery();
+  
    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
--- a/pages/components/Profile/Button.js
+++ b/pages/components/Profile/Button.js
@@ -0,0 +1,23 @@
+// Next.js
+import Link from 'next/link'
+
+// Font Awesome
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const Button = (props) => {
+    const { icon, dest, caption } = props
+    return (
+        <Link href={{ pathname: dest }}>
+            <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"
+                type="button"
+                >
+                <FontAwesomeIcon icon={icon} className="w-5 h-5 inline"/> {caption}
+                </button>
+            </a>
+        </Link>
+    )
+}
+
+export default Button
--- a/pages/components/Profile/Contact.js
+++ b/pages/components/Profile/Contact.js
@@ -0,0 +1,21 @@
+// Next.js
+import Link from 'next/link'
+
+// Font Awesome
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const Contact = (props) => {
+    const { icon, dest, caption } = props
+    return (
+        <div className="hover:underline">
+            <Link href={{ pathname: dest }}>
+                <a>
+                    <FontAwesomeIcon icon={icon} size="5x" className="w-9 h-9 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" />
+                    <p className="font-mono text-xl">{caption}</p>
+                </a>
+            </Link>
+        </div>
+    )
+}
+
+export default Contact
--- a/pages/components/Profile/NintendoSW.js
+++ b/pages/components/Profile/NintendoSW.js
@@ -0,0 +1,35 @@
+// Next.js
+import Link from 'next/link'
+
+const NintendoSW = () => {
+    return (
+        <div className="hover:underline">
+            <Link href="#">
+                <a>
+                    <svg version="1.0" xmlns="http://www.w3.org/2000/svg" className="w-12 h-12 inline lg:w-12 lg:h-12 md:w-12 md:h-12 fill-current text-black dark:text-white" viewBox="0 0 700 700">
+                        <g transform="translate(-100.000000,900.000000) scale(0.100000,-0.100000)" fill="#FFFFF">
+                        <path d="M2965 8314 c-481 -86 -868 -442 -990 -910 -44 -169 -47 -268 -42
+                        -1579 3 -1204 4 -1232 24 -1325 111 -501 467 -858 973 -976 66 -15 150 -18
+                        691 -21 560 -4 618 -3 633 12 15 15 16 208 16 2396 0 1622 -3 2386 -10 2400
+                        -10 18 -27 19 -613 18 -476 -1 -619 -4 -682 -15z m905 -2400 l0 -2026 -407 5
+                        c-375 4 -415 6 -490 25 -322 83 -561 331 -628 654 -22 101 -22 2589 -1 2688
+                        60 281 255 514 518 619 132 53 193 59 621 60 l387 1 0 -2026z"/>
+                        <path d="M3051 7329 c-63 -12 -159 -60 -210 -105 -105 -91 -157 -220 -149
+                        -372 4 -79 9 -100 41 -164 47 -97 118 -168 215 -216 67 -33 84 -37 171 -40 79
+                        -3 107 0 160 18 217 73 348 284 311 500 -43 257 -287 429 -539 379z"/>
+                        <path d="M4757 8323 c-4 -3 -7 -1087 -7 -2409 0 -2181 1 -2402 16 -2408 27
+                        -10 803 -6 899 4 406 46 764 293 959 660 25 47 58 126 75 175 63 188 61 138
+                        61 1575 0 1147 -2 1318 -16 1391 -99 521 -496 914 -1018 1004 -70 12 -178 15
+                        -526 15 -240 0 -440 -3 -443 -7z m1068 -2178 c156 -41 284 -160 336 -312 33
+                        -94 32 -232 -1 -318 -61 -158 -181 -269 -335 -310 -250 -65 -516 86 -589 334
+                        -22 76 -21 204 4 282 75 245 335 389 585 324z"/>
+                        </g>
+                    </svg>
+                    <p className="font-mono text-xl">SW-5543-5143-8814</p>
+                </a>
+            </Link>
+        </div>
+    )
+}
+
+export default NintendoSW
--- a/pages/components/Profile/PublicKeys.js
+++ b/pages/components/Profile/PublicKeys.js
@@ -1,20 +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, lang } = useTranslation("common")
-  const { locale, locales, defaultLocale, pathname } = router
-  const close = t('common:close')
-  const keys = t('profile:keys')
-  const view = t('profile:view')
-  const fingerprint = t('profile:fingerprint')
-  const download = t('profile:download')
+  const { t } = useTranslation();
+  const [query] = useLanguageQuery();

  return (
    <>
@@ -23,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 ? (
        <>
@@ -36,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="/static/yudejp.gpg">
+            <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>
@@ -58,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>
@@ -78,7 +78,7 @@ export default function Modal() {
                    type="button"
                    onClick={() => setShowModal(false)}
                  >
-                    {close}
+                    {t('close')}
                  </button>
                </div>
              </div>
--- a/pages/components/Profile/Spotify.js
+++ b/pages/components/Profile/Spotify.js
@@ -1,17 +1,21 @@
+// 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 router = useRouter()
-  const { locale, locales, defaultLocale, pathname } = router
-  const { t, lang } = useTranslation("common")  
+  const { t } = useTranslation();
+  const [query] = useLanguageQuery();
+  
  const [data, setData] = useState({ hits: [] });
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
-        '/api/Spotify',
+        'https://vercel-spotify-api.vercel.app/api/Spotify',
      );
      setData(result.data);
    };  
@@ -23,10 +27,9 @@ function App () {
  }else{
  if (data.isPlaying){
   const status = data.artist + ' / ' + data.title
-   const listening = t('listening', {listening: status})
-   return <p>{listening}</p>
+   return <p>{t('listening', {listening: status})}</p>
  }else{
-   return <p></p>
+   return <></>
  }
 };
 }
--- a/pages/components/Profile/WakaTime.js
+++ b/pages/components/Profile/WakaTime.js
@@ -1,15 +1,17 @@
-import React, { useState, useEffect } from 'react';
-import useTranslation from 'next-translate/useTranslation'
+// React
+import React from 'react';
+
+// Font Awesome
 import { faUserClock } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { useRouter } from 'next/router'
+
+// i18n
+import { useTranslation } from 'next-export-i18n';

 export default function Modal() {
  const [showModal, setShowModal] = React.useState(false);
-  const router = useRouter()
-  const { locale, locales, defaultLocale, pathname } = router
-  const { t, lang } = useTranslation("common")
-  const close = t('common:close')
+  const { t } = useTranslation();
+  
  return (
    <>
      <button
@@ -38,7 +40,7 @@ export default function Modal() {
                    type="button"
                    onClick={() => setShowModal(false)}
                  >
-                    {close}
+                    {t('close')}
                  </button>
                </div>
              </div>
--- a/pages/components/ThemeSelector.js
+++ b/pages/components/ThemeSelector.js
@@ -1,17 +1,12 @@
-import Head from "next/head"
-import Link from "next/link"
 import "tailwindcss/tailwind.css";
-import useTranslation from 'next-translate/useTranslation'
 import { useRouter } from 'next/router'
 import React, { useEffect, useState } from 'react'
 import { useTheme } from "next-themes";
+import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

-const Layout = (props) => {
+const ThemeSelector = (props) => {
  const { title, children } = props
-  const siteTitle = "yude.jp"
-  const router = useRouter()
-  const { locale, locales, defaultLocale, pathname } = router
-  
  const [isMounted, setIsMounted] = useState(false);
  const { theme, setTheme, getTheme } = useTheme();
  useEffect(() => {
@@ -23,13 +18,13 @@ const Layout = (props) => {
    }
  };
  return (
-      <button className="my-4 text-2xl" onClick={switchTheme}>
-        {theme === 'light' ? (
-          <span>🌙</span>
+      <button className="inline-flex rounded-md border border-gray-300 dark:border-gray-800 shadow-sm px-2 bg-white font-medium text-gray-700 hover:bg-gray-50 dark:bg-gray-700 dark:text-white my-3 py-1 text-2xl focus:outline-none" onClick={switchTheme}>
+        {theme !== undefined && (theme === "light" ? (
+          <FontAwesomeIcon icon={faMoon} className="w-10 h-7" />
        ) : (
-          <span>🌄</span>
-        )}
+          <FontAwesomeIcon icon={faSun} className="w-10 h-7" />
+        ))}
      </button>
  )
 }
-export default Layout
+export default ThemeSelector
--- a/pages/hcunews.js
+++ b/pages/hcunews.js
@@ -1,27 +1,40 @@
+// Base layout
 import Layout from "./components/Layout"
-import useTranslation from 'next-translate/useTranslation'
-import { useRouter } from 'next/router'
+
+// i18n
+import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n';
+
+// React
 import React from "react"
 import ReactMarkdown from "react-markdown"
+
+// Markdown
 import gfm from 'remark-gfm';
 import ja from '../docs/hcunews/ja.md'
 import en from '../docs/hcunews/en.md'

-export default function Tos(props) {
-    const router = useRouter()
-    const { locale, locales, defaultLocale, pathname } = router
-    const { t, lang } = useTranslation("hcunews")
-    const hcunews = t('hcunews')
-    return(
-        <Layout title={hcunews}>
+export default function HcuNews() {
+    const { t } = useTranslation();
+    const [query] = useLanguageQuery();
+
+    if (!query) {
+        return <p>Loading...</p>
+    } else {
+        return (
+            <Layout title={t('hcunews')}>
            <div>
-            <h1>{hcunews}</h1>
-            {lang === 'ja' ? (
-            <ReactMarkdown plugins={[gfm]} children={ja} />
+                <h1>{t('hcunews')}</h1>
+                {query["lang"] === 'ja' ? (
+                    <ReactMarkdown plugins={[gfm]}>
+                        {ja}
+                    </ReactMarkdown>
                ) : (
-            <ReactMarkdown plugins={[gfm]} children={en} />
+                    <ReactMarkdown plugins={[gfm]}>
+                        {en}
+                    </ReactMarkdown>
                )}
            </div>
            </Layout>
        )
    }
+}
--- a/pages/house.js
+++ b/pages/house.js
@@ -1,18 +1,21 @@
+// Base layout
 import Layout from "./components/Layout"
-import useTranslation from 'next-translate/useTranslation'
+
+// i18n
+import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n';
+
+// Next.js router
 import { useRouter } from 'next/router'

 export default function About(props) {
-  const router = useRouter()
-  const { locale, locales, defaultLocale, pathname } = router
-  const { t, lang } = useTranslation("house")
-  const house = t('house')
+  const { t } = useTranslation();
+  const [query] = useLanguageQuery();
  
  return (
-    <Layout title={house}>
+    <Layout title={t('house')}>
      <div>
-      <p className="my-2 text-3xl text-center">{house}</p>
-      <iframe className="w-full h-96" src="https://mackerel.io/embed/public/embed/4mVIU29WCRVZgHUxQPzWsfXo953uxiAegbjDb83hTQ7szesCunwdpVkBIzhnLc9i?period=1d" frameborder="0" scrolling="no"></iframe>
+      <p className="my-2 text-3xl text-center">{t('house')}</p>
+      <iframe className="w-full h-96" src="https://mackerel.io/embed/public/embed/4mVIU29WCRVZgHUxQPzWsfXo953uxiAegbjDb83hTQ7szesCunwdpVkBIzhnLc9i?period=1d" frameBorder="0" scrolling="no"></iframe>
      </div>
    </Layout>
  )
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,66 +1,68 @@
+// Base layout
 import Layout from "./components/Layout"
+
+// Menu
+import FAMenu from "./components/Menu/FontAwesomeMenu"
+
+// Banner
+import HappyBusy from "./components/Footer/HappyBusy"
+
+// Next.js
 import Link from 'next/link'
-import { faDiscord, faGit, faMastodon, faGithub } from '@fortawesome/free-brands-svg-icons'
-import { faBlog, faBook, faUser, faServer, faHouseUser } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import Image from 'next/image'
-import useTranslation from 'next-translate/useTranslation'
-import { useRouter } from 'next/router'
+
+// i18n
+import { useTranslation, useLanguageQuery } from 'next-export-i18n';
+
+// React Router
+import MinecraftMenu from "./components/Menu/MinecraftMenu"
+
+// Font Awesome
+import { faDiscord, faGit, faGithub } from '@fortawesome/free-brands-svg-icons'
+import { faBook, faUser, faServer, faScrewdriver, faHeart } from '@fortawesome/free-solid-svg-icons'

 export default function Index(props) {
+  const { t } = useTranslation();
+  const [query] = useLanguageQuery();
  
-  // Translation
-  const router = useRouter()
-  const { locale, locales, defaultLocale, pathname } = router
-  const { t, lang } = useTranslation("index")
-  const home = t('home')
-  const profile = t('profile')
-  const blog = t('blog')
-  const status = t('status')
-  const house = t('house')
-  const discord = t('discord')
-  const mastodon = t('mastodon')
-  const minecraft = t('minecraft:title')
-
+  if (!query) {
+     return <p>Loading...</p>
+  } else {
  return (
-
-    <Layout title={home}>
+    <>
+      <Layout title={t('home')}>
        <div className="my-9 text-center">
          <div className="m-10">
-        <Image
-            src         = "/static/images/avatar.png"
+          <img
+              className   = "mx-auto"
+              src         = "/images/avatar_riru.png"
              alt         = "yude's avatar"
              width       = {200}
              height      = {200}
-            unoptimized = {true}
          />
          </div>
-        <div className="grid grid-cols-5 gap-10">
-        <div className="has-tooltip"><span className="tooltip rounded shadow-lg p-1 bg-yellow-600 transform translate-y-10 -translate-x-10">{profile}</span><Link href="/profile"><a><FontAwesomeIcon icon={faUser} 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>
-        <div className="has-tooltip"><span className="tooltip rounded shadow-lg p-1 bg-yellow-600 transform translate-y-10 -translate-x-9">{blog}</span><Link href="https://blog.yude.jp"><a><FontAwesomeIcon icon={faBlog} 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>
-        <div className="has-tooltip"><span className="tooltip rounded shadow-lg p-1 bg-yellow-600 transform translate-y-10 -translate-x-12">{status}</span><Link href="/status"><a><FontAwesomeIcon icon={faServer} 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>
-        <div className="has-tooltip"><span className="tooltip rounded shadow-lg p-1 bg-yellow-600 transform translate-y-10 -translate-x-5">{house}</span><Link href="/house"><a><FontAwesomeIcon icon={faHouseUser} 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>
-        <div className="has-tooltip"><span className="tooltip rounded shadow-lg p-1 bg-yellow-600 transform translate-y-10 -translate-x-4">Scrapbox</span><Link href="https://scrapbox.io/yude"><a><FontAwesomeIcon icon={faBook} 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>
-        <div className="has-tooltip"><span className="tooltip rounded shadow-lg p-1 bg-yellow-600 transform translate-y-10 -translate-x-16">{discord}</span><Link href="https://discord.gg/X6srY7X"><a><FontAwesomeIcon icon={faDiscord} 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>
-        <div className="has-tooltip"><span className="tooltip rounded shadow-lg p-1 bg-yellow-600 transform translate-y-10 -translate-x-10">Spaces on Matrix</span><Link href="https://matrix.to/#/!oriLSKSTauvVrpdzZX:matrix.org?via=matrix.org"><a>
-        <svg version="1.1" viewBox="0 0 27.9 32" 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">
-         <g transform="translate(-.095 .005)">
-          <path d="m27.1 31.2v-30.5h-2.19v-0.732h3.04v32h-3.04v-0.732z"/>
-          <path d="m8.23 10.4v1.54h0.044c0.385-0.564 0.893-1.03 1.49-1.37 0.58-0.323 1.25-0.485 1.99-0.485 0.72 0 1.38 0.14 1.97 0.42 0.595 0.279 1.05 0.771 1.36 1.48 0.338-0.5 0.796-0.941 1.38-1.32 0.58-0.383 1.27-0.574 2.06-0.574 0.602 0 1.16 0.074 1.67 0.22 0.514 0.148 0.954 0.383 1.32 0.707 0.366 0.323 0.653 0.746 0.859 1.27 0.205 0.522 0.308 1.15 0.308 1.89v7.63h-3.13v-6.46c0-0.383-0.015-0.743-0.044-1.08-0.0209-0.307-0.103-0.607-0.242-0.882-0.133-0.251-0.336-0.458-0.584-0.596-0.257-0.146-0.606-0.22-1.05-0.22-0.44 0-0.796 0.085-1.07 0.253-0.272 0.17-0.485 0.39-0.639 0.662-0.159 0.287-0.264 0.602-0.308 0.927-0.052 0.347-0.078 0.697-0.078 1.05v6.35h-3.13v-6.4c0-0.338-7e-3 -0.673-0.021-1-0.0114-0.314-0.0749-0.623-0.188-0.916-0.108-0.277-0.3-0.512-0.55-0.673-0.258-0.168-0.636-0.253-1.14-0.253-0.198 0.0083-0.394 0.042-0.584 0.1-0.258 0.0745-0.498 0.202-0.705 0.374-0.228 0.184-0.422 0.449-0.584 0.794-0.161 0.346-0.242 0.798-0.242 1.36v6.62h-3.13v-11.4z"/>
-          <path d="m0.936 0.732v30.5h2.19v0.732h-3.04v-32h3.03v0.732z"/>
-         </g>
-        </svg>
-        </a></Link></div>
-        <div className="has-tooltip"><span className="tooltip rounded shadow-lg p-1 bg-yellow-600 transform translate-y-10 -translate-x-16">GitHub Organization</span><Link href="https://github.com/yudejp"><a><FontAwesomeIcon icon={faGithub} 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>
-        <div className="has-tooltip"><span className="tooltip rounded shadow-lg p-1 bg-yellow-600 transform translate-y-10">Gitea</span><Link href="https://git.yude.jp"><a><FontAwesomeIcon icon={faGit} 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>
-        <div className="has-tooltip"><span className="tooltip rounded shadow-lg p-1 bg-yellow-600 transform translate-y-10 -translate-x-12">{mastodon}</span><Link href="https://mstdn.yude.jp"><a><FontAwesomeIcon icon={faMastodon} 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>
-        <div className="has-tooltip"><span className="tooltip rounded shadow-lg p-1 bg-yellow-600 transform translate-y-10 -translate-x-12">{minecraft}</span><Link href="/minecraft"><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"/>
-        </svg>
-        </a></Link></div>
+          
+          {/* Index menu */}
+          <div className="grid grid-cols-3 gap-10">
+            <FAMenu dest="/profile" query={query} icon={faUser} />
+            <FAMenu dest="/server" query={query} icon={faServer} />
+            <FAMenu dest="/services" query={query} icon={faScrewdriver} />
+            <FAMenu dest="https://discord.gg/X6srY7X" icon={faDiscord} />          
+            <FAMenu dest="https://github.com/yudejp" icon={faGithub} />
+            <FAMenu dest="https://git.yude.jp" icon={faGit} />
+            <MinecraftMenu query={query} />
+            <FAMenu dest="/mutual" icon={faHeart} query={query} />
          </div>
+          
+          {/* Banner */}
+          <div className="mx-auto mt-10">
+            <HappyBusy />
+          </div>
+          
+          {/* Avatar by */}
+          <p className="mt-3 text-sm font-bold text-gray-900 dark:text-gray-400">{t('icon_1')}<Link href="https://twitter.com/R_I_R_U_"><a className="hover:underline">梨留りる {t('icon_2')}</a></Link></p>
        </div>
      </Layout>
+    </>
  )
 }
+}
--- a/pages/minecraft.js
+++ b/pages/minecraft.js
@@ -1,47 +1,102 @@
-import React, { useState, useEffect } from 'react';
+// Base layout
 import Layout from "./components/Layout"
-import useTranslation from 'next-translate/useTranslation'
+
+// React Router etc.
+import React, { useState, useEffect } from 'react';
 import { useRouter } from 'next/router'
-import Minecraft from './components/Minecraft'
-import Image from 'next/image'
-import { faMap } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+// i18n
+import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n';
+
+// Next.js
 import Link from 'next/link'

+// Custom pages
+import Minecraft from './components/Minecraft'
+
+// Font Awesome
+import { faMap, faCopy } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+// React Markdown
+import ReactMarkdown from "react-markdown"
+import gfm from 'remark-gfm';
+import ja from '../docs/minecraft/ja.md'
+import en from '../docs/minecraft/en.md'
+
+// next-seo
+import { NextSeo } from 'next-seo';
+
 export default function About(props) {
-    const router = useRouter()
-    const { locale, locales, defaultLocale, pathname } = router
-    const { t, lang } = useTranslation("minecraft")
-    const title = t('title')
-    const address = t('address')
+    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 (
-            <Layout title={title}>
+          <>
+            <NextSeo
+              title="yude.jp Minecraft マルチプレイ"
+              description="yude.jp 上に設置されている Minecraft: Java Edition のマルチプレイサーバーについて"
+            />
+            <Layout title={t('title')}>
+            
            <div>
-                <p className="my-2 text-3xl text-center">{title}</p>
+                <p className="my-2 text-3xl text-center">{t('title')}</p>
                <div className="w-full">
-                <Image
-                    src         = "/static/images/dynmap.png"
-                    alt         = "Dynmap Header"
-                    unoptimized = {true}
+                <img
+                    src         = "/images/dynmap.png"
+                    alt         = "Minecraft brief world map generated by Dynmap"
                    width       = {1354}
                    height      = {619}
                />
                </div>
+                
                <div className="text-center">
                <Minecraft />
-                <p>{address}: <code>yude.jp</code></p>
-                <Link href="https://dynmap.yude.jp">
+                <p>
+                  <span>{t('address')}: <code>yude.jp</code></span>
+                  <button
+                    className="bg-pink-600 text-white active:bg-pink-600 font-bold text-sm px-2 py-2 ml-2 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1       ease-linear transition-all duration-150"
+                    type="button"
+                    onClick={() => copyText()}
+                  >
+                    <FontAwesomeIcon icon={faCopy} className="w-5 h-5 inline"/>
+                  </button>
+                </p>
+                
+                <p>{t('version')}: 1.18.1</p>
+                
+                <Link href="https://bluemap.yude.jp">
                  <a>
                    <button
-                className="bg-pink-600 text-white active:bg-pink-600 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"
-                type="button"
-              >
-                <FontAwesomeIcon icon={faMap} className="w-5 h-5 inline"/> Dynmap
+                    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"
+                    type="button">
+                      <FontAwesomeIcon icon={faMap} className="w-5 h-5 inline"/> BlueMap
                    </button>
                  </a>
                 </Link>
              </div>
+              
+              {/* Load markdown contents */}
+                {query["lang"] === 'ja' ? (
+                  <ReactMarkdown plugins={[gfm]}>
+                      {ja}
+                  </ReactMarkdown>
+                ) : (
+                  <ReactMarkdown plugins={[gfm]}>
+                      {en}
+                  </ReactMarkdown>
+                )}
            </div>
            </Layout>
+          </>
        )
+      }
 }
--- a/pages/minecraft/lookup/[ign].js
+++ b/pages/minecraft/lookup/[ign].js
@@ -0,0 +1,56 @@
+ // Base layout
+ import Layout from "../../components/Layout"
+
+ // React
+ import { useRouter } from 'next/router'
+ 
+ // Data fetching
+ import useSwr from 'swr'
+ const fetcher = (url) => fetch(url).then((res) => res.json())
+ 
+ // Components
+ import WrongUUID from '../../components/Minecraft/WrongUUID'
+ 
+ export default function UUID() {
+   const router = useRouter()
+   const { ign } = router.query
+   const { data, error } = useSwr(
+    ign ? `https://api.ashcon.app/mojang/v2/user/${ign}` : null,
+     fetcher
+   )
+   if (error) {
+     return (
+       <>
+         <Layout title="エラー - プレイヤー情報">
+         <p className="text-2xl">エラーが発生しました。</p>
+         </Layout>
+       </>
+     )
+   } else {
+     if (!data) {
+       return (
+         <>
+           <Layout title="読み込み中... - プレイヤー情報">
+            <p className="text-2xl">読み込み中</p>
+           </Layout>
+         </>
+       )
+     } else {
+       if (data.code) {
+         return (
+           <>
+             <Layout title="404 - プレイヤー情報">
+               <WrongUUID />
+             </Layout>
+           </>
+         )
+       } else {
+         router.push('/minecraft/players/' + data.uuid)
+         return (
+          <p>リダイレクトしています...</p>
+         )
+       }
+     }
+   }
+ }
+ 
--- a/pages/minecraft/players/[uuid].js
+++ b/pages/minecraft/players/[uuid].js
@@ -0,0 +1,59 @@
+ // Base layout
+import Layout from "../../components/Layout"
+
+// React
+import { useRouter } from 'next/router'
+
+// Data fetching
+import Players from '../../components/Minecraft/Players'
+import useSwr from 'swr'
+const fetcher = (url) => fetch(url).then((res) => res.json())
+
+// Components
+import WrongUUID from '../../components/Minecraft/WrongUUID'
+
+export default function UUID() {
+  const router = useRouter()
+  const { uuid } = router.query
+  const { data, error } = useSwr(
+    uuid ? `https://api.ashcon.app/mojang/v2/user/${uuid}` : null,
+    fetcher
+  )
+  if (error) {
+    return (
+      <>
+        <Layout title="エラー - プレイヤー情報">
+        <p className="text-2xl">エラーが発生しました。</p>
+        </Layout>
+      </>
+    )
+  } else {
+    if (!data) {
+      return (
+        <>
+          <Layout title="読み込み中... - プレイヤー情報">
+          <Players uuid={uuid} />
+          </Layout>
+        </>
+      )
+    } else {
+      if (!data.username) {
+        return (
+          <>
+            <Layout title="404 - プレイヤー情報">
+              <WrongUUID />
+            </Layout>
+          </>
+        )
+      } else {
+        return (
+          <>
+            <Layout title={data.username + " - " + "プレイヤー情報"}>
+              <Players uuid={uuid} />
+            </Layout>
+          </>
+        )
+      }
+    }
+  }
+}
--- a/pages/mutual.js
+++ b/pages/mutual.js
@@ -0,0 +1,49 @@
+// Base layout
+import Layout from "./components/Layout"
+
+// i18n
+import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n';
+
+// React Router etc.
+import { useRouter } from 'next/router'
+import React from "react"
+
+// React Markdown
+import ReactMarkdown from "react-markdown"
+import gfm from 'remark-gfm';
+import ja from '../docs/mutual/ja.md'
+import en from '../docs/mutual/en.md'
+
+// next-seo
+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
+              title="相互リンク"
+              description="yude.jp と相互にリンクを貼っている Web サイトの一覧"
+            />
+            <Layout title={t('mutual')}>
+              <div>
+                {query["lang"] === 'ja' ? (
+                  <ReactMarkdown plugins={[gfm]}>
+                      {ja}
+                  </ReactMarkdown>
+                ) : (
+                  <ReactMarkdown plugins={[gfm]}>
+                      {en}
+                  </ReactMarkdown>
+                )}
+              </div>
+            </Layout>
+          </>
+        )
+      }
+    }
--- a/pages/profile.js
+++ b/pages/profile.js
@@ -1,53 +1,59 @@
+// Base layout
 import Layout from "./components/Layout"
-import useTranslation from 'next-translate/useTranslation'
-import { faDiscord, faTwitter, faGithub, faKeybase, faInstagram, faMastodon, faSteam } from '@fortawesome/free-brands-svg-icons'
-import { faEnvelope, faBirthdayCake, faMapPin, faSchool, faPhone, faInfo } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import Link from 'next/link'
-import Image from 'next/image'
-import DiscordStatus from './components/DiscordStatus'
-import { useRouter } from 'next/router'
-import DiscordPlaying from './components/DiscordPlaying'
-import Spotify from './components/Spotify'
-import WakaTime from './components/WakaTime'
-import PublicKeys from './components/PublicKeys'

-export default function About(props) {
-  const router = useRouter()
-  const { locale, locales, defaultLocale, pathname } = router
-  const { t, lang } = useTranslation("profile")
-  const about = t('about')
-  const desc = t('desc')
-  const school = t('school')
-  const contact = t('contact')
-  const location = t('location')
-  const belongs = t('belongs')
-  const hiroshima = t('hiroshima')
-  const birth = t('birth')
-  const date = t('date')
-  const more = t('more')
-  const grade = t('grade')
-  const icon_1 = t('icon_1')
-  const icon_2 = t('icon_2')
+// i18n
+import { useTranslation, useLanguageQuery } from 'next-export-i18n';
+
+// Font Awesome
+import { faDiscord, faTwitter, faGithub, faKeybase, faInstagram, faMastodon, faSteam, faAmazon } from '@fortawesome/free-brands-svg-icons'
+import { faEnvelope, faBirthdayCake, faMapPin, faSchool, faPhone, faBlog, faBookDead, faInfo, faBookmark, faLink, faMobile } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+// Next.js, React
+import Link from 'next/link'
+
+// Discord
+import DiscordStatus from './components/Discord/DiscordStatus'
+import DiscordPlaying from './components/Discord/DiscordPlaying'
+
+// Custom component
+import Spotify from './components/Profile/Spotify'
+import WakaTime from './components/Profile/WakaTime'
+import PublicKeys from './components/Profile/PublicKeys'
+import Button from './components/Profile/Button'
+import Contact from './components/Profile/Contact'
+import NintendoSW from "./components/Profile/NintendoSW"
+
+// next-seo
+import { NextSeo } from 'next-seo';
+
+export default function Profile(props) {
+  const { t } = useTranslation();
+  const [query] = useLanguageQuery();

  return (
-
-    <Layout title={about}>
+    <>
+      <NextSeo
+              title="yude のプロフィール"
+      />
+      <Layout title={t('about')}>
        <div className="text-center">
  
          {
           // Heading
          }
          <div>
-          <Image
-            className   = "object-contain rounded-full hover:animate-rumble z-0"
-            src         = "/static/images/avatar.png"
+            <div className="flex mb-10 justify-center">
+            <img
+              className   = "rounded-full hover:animate-rumble z-0 p-15"
+              src         = "/images/avatar_mel.png"
              alt         = "yude's avatar"
              width       = {200}
              height      = {200}
              unoptimized = {true}
            />
            <DiscordStatus />
+            </div>
            <p className="text-4xl transform -translate-y-4">yude</p>
            <div>
            <DiscordPlaying />
@@ -60,24 +66,37 @@ export default function About(props) {
          }
          <div>
          <div className="text-left">
-            <p className="text-2xl"><FontAwesomeIcon icon={faInfo} className="w-5 h-5 inline"/> {desc}</p>
+              <p className="text-2xl"><FontAwesomeIcon icon={faInfo} className="w-5 h-5 inline"/> {t('desc')}</p>
          </div>
          <div className="my-2 text-left grid lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 break-words">
            <div>
              <FontAwesomeIcon icon={faSchool} className="w-5 h-5 inline"/>
-            <p className="inline ml-4">{belongs}</p>
-            <p className="ml-9">{school}</p>
-            <p className="ml-9">{grade}</p>
+              <p className="inline ml-4">{t('belongs')}</p>
+              <p className="ml-9">{t('school')}</p>
+              <p className="ml-9">{t('grade')}</p>
            </div>
            <div>
              <FontAwesomeIcon icon={faBirthdayCake} className="w-5 h-5 inline"/>
-            <p className="inline ml-4">{birth}</p>
-            <p className="ml-9">{date}</p>
+              <p className="inline ml-4">{t('birth')}</p>
+              <p className="ml-9">{t('date')}</p>
            </div>
            <div>
              <FontAwesomeIcon icon={faMapPin} className="w-5 h-5 inline"/>
-            <p className="inline ml-4">{location}</p>
-            <p className="ml-9">{hiroshima}</p>
+              <p className="inline ml-4">{t('location')}</p>
+              <p className="ml-9">{t('hiroshima')}</p>
+            </div>
+          </div>
+          
+          {
+           // Contents
+          }
+          <div>
+            <div className="text-left">
+                <p className="text-2xl"><FontAwesomeIcon icon={faBookDead} className="w-5 h-5 inline"/> {t('contents')}</p>
+            </div>
+            <div className="my-2 grid grid-cols-2 lg:grid-cols-5 md:grid-cols-3 sm:grid-cols-2justify-items-center gap-y-6">
+              <Contact dest="https://blog.yude.jp" icon={faBlog} caption={t('blog')} />
+              <Contact dest="https://scrapbox.io/yude" icon={faBookmark} caption="Scrapbox" />
            </div>
          </div>
  
@@ -85,71 +104,18 @@ export default function About(props) {
           // Contact 
          }
          <div className="text-left my-6">
-            <p className="text-2xl"><FontAwesomeIcon icon={faPhone} className="w-5 h-5 inline"/> {contact}</p>
-        </div>
-        <div className="my-2 grid grid-cols-2 lg:grid-cols-5 md:grid-cols-3 sm:grid-cols-2 justify-items-center gap-y-6">
-          <div className="hover:underline">
-            <Link href="https://twitter.com/yude_jp">
-            <a>
-            <FontAwesomeIcon icon={faTwitter} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
-            <p className="font-mono text-xl">@yude_jp</p>
-            </a>
-            </Link>
-          </div>
-          <div className="hover:underline">
-            <a>
-            <FontAwesomeIcon icon={faDiscord} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
-            <p className="font-mono text-xl">yude#3205</p>
-            </a>
-          </div>
-          <div className="hover:underline">
-            <Link href="mailto:i@yude.jp">
-            <a>
-            <FontAwesomeIcon icon={faEnvelope} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
-            <p className="font-mono text-xl">i@yude.jp</p>
-            </a>
-            </Link>
-          </div>
-          <div className="hover:underline">
-            <Link href="https://github.com/yude">
-            <a>
-            <FontAwesomeIcon icon={faGithub} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
-            <p className="font-mono text-xl">yude</p>
-            </a>
-            </Link>
-          </div>
-          <div className="hover:underline">
-            <Link href="https://mstdn.yude.jp/@yude">
-            <a>
-            <FontAwesomeIcon icon={faMastodon} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
-            <p className="font-mono text-xl">@yude@mstdn.yude.jp</p>
-            </a>
-            </Link>
-          </div>
-          <div className="hover:underline">
-            <Link href="https://keybase.io/yude">
-            <a>
-            <FontAwesomeIcon icon={faKeybase} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
-            <p className="font-mono text-xl">yude</p>
-            </a>
-            </Link>
-          </div>
-          <div className="hover:underline">
-            <Link href="https://instagram.com/yude.jp">
-            <a>
-            <FontAwesomeIcon icon={faInstagram} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
-            <p className="font-mono text-xl">yude.jp</p>
-            </a>
-            </Link>
-          </div>
-          <div className="hover:underline">
-            <Link href="https://steamcommunity.com/id/yudejp">
-            <a>
-            <FontAwesomeIcon icon={faSteam} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
-            <p className="font-mono text-xl">id/yudejp</p>
-            </a>
-            </Link>
+              <p className="text-2xl"><FontAwesomeIcon icon={faPhone} className="w-5 h-5 inline"/> {t('contact')}</p>
          </div>
+          <div className="my-2 grid grid-cols-2 lg:grid-cols-5 md:grid-cols-3 sm:grid-cols-2justify-items-center gap-y-6">
+            <Contact dest="https://twitter.com/yude_jp" icon={faTwitter} caption="@yude_jp" />
+            <Contact dest="#" icon={faDiscord} caption="yude#3205" />
+            <Contact dest="mailto:i@yude.jp" icon={faEnvelope} caption="i@yude.jp" />
+            <Contact dest="https://github.com/yude" icon={faGithub} caption="yude" />
+            <Contact dest="https://mstdn.yude.jp/@yude" icon={faMastodon} caption="@yude@mstdn.yude.jp" />
+            <Contact dest="https://keybase.io/yude" icon={faKeybase} caption="yude" />
+            <Contact dest="https://instagram.com/yude.jp" icon={faInstagram} caption="yude.jp" />
+            <Contact dest="https://steamcommunity.com/id/yudejp" icon={faSteam} caption="id/yudejp" />
+            <NintendoSW />
          </div>
          
          {
@@ -158,15 +124,16 @@ export default function About(props) {
          <div className="text-center my-6 space-x-5">
          <WakaTime />
          <PublicKeys />
+          <Button dest="https://scrapbox.io/yude/%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88" icon={faLink} caption={t('account')}/>
+          <Button dest="https://scrapbox.io/yude/%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9" icon={faMobile} caption={t('device')}/>
+          <Button dest="https://www.amazon.jp/hz/wishlist/ls/8WTKCPWKOJ2N?ref_=wl_share" icon={faAmazon} caption={t('wishlist')}/>
          </div>
-        <div>
+          
        </div>
+          <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>
-        <Link href="https://scrapbox.io/yude/%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88">
-            <button className="border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-800 hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 p-3 w-60">{more}</button>
-        </Link>
-        <p className="mt-3 text-sm font-bold text-gray-900 dark:text-gray-400">{icon_1}<Link href="https://twitter.com/xmnts"><a className="hover:underline">Minkasy {icon_2}</a></Link></p>
-      </div>
+        
      </Layout>
+    </>
  )
 }
--- a/pages/server.js
+++ b/pages/server.js
@@ -0,0 +1,86 @@
+// Base layout
+import Layout from "./components/Layout"
+
+// i18n
+import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n';
+
+// next-seo
+import { NextSeo } from 'next-seo';
+
+export default function Server(props) {
+  const { t } = useTranslation();
+  const [query] = useLanguageQuery();
+
+  return (
+    <>
+      <NextSeo
+        title="yude.jp サーバー上"
+        description="yude.jp 上に設置されているサーバーの一覧、情報"
+      />
+      <Layout title={t('status')}>
+          <div className="my-9 text-center">
+          
+          {
+           // 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>
+          
+          {
+              // sandy
+          }
+          <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">sandy</h2>
+          <div className="flex xl:w-2/3 text-center">
+          <div className="flex-1"><p className="font-bold">CPU </p>i7-2600</div>
+          <div className="flex-1"><p className="font-bold">RAM </p>DDR3 24GB</div>
+          <div className="flex-1"><p className="font-bold">OS </p>Arch Linux</div>
+          <div className="flex-1"><p className="font-bold">{t('location')} </p>{t('hiroshima')}</div>
+          </div>
+          <a href="https://mackerel.io/orgs/yude/hosts/4dkbQuMQjvo/-/graphs/loadavg#period=10m"><img src="https://mackerel.io/embed/public/embed/heHnGhDanoIDlf7jjxUe9yPVrsG3deeH5ptD8suErrq5w46crWEIYdLfzLoukzfF.png?period=10m" className="w-full" /></a>
+          
+          
+          {
+              // oracle1
+          }
+          <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">oracle1</h2>
+          <div className="flex xl:w-2/3 text-center">
+          <div className="flex-1"><p className="font-bold">{t('service')} </p>Oracle Cloud</div>
+          <div className="flex-1"><p className="font-bold">{t('shape')} </p>VM.Standard.E2.1.Micro</div>
+          <div className="flex-1"><p className="font-bold">RAM </p>1GB</div>
+          <div className="flex-1"><p className="font-bold">OS </p>Ubuntu 20.04 LTS</div>
+          <div className="flex-1"><p className="font-bold">{t('region')} </p>Japan Central (Osaka)</div>
+          </div>
+          <a href="https://mackerel.io/orgs/yude/hosts/4ftHfeojMCU/-/graphs/loadavg#period=10m"><img src="https://mackerel.io/embed/public/embed/vcn6LE4P2hh6GzvtMbIAWxsXpDh6eSoNyAXdhfYaj9yDN6FJwOHIiz9ktqToj1HG.png?period=10m" className="w-full" /></a>
+          
+          {
+              // oracle2
+          }
+          <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">oracle2</h2>
+          <div className="flex xl:w-2/3 text-center">
+          <div className="flex-1"><p className="font-bold">{t('service')} </p>Oracle Cloud</div>
+          <div className="flex-1"><p className="font-bold">{t('shape')} </p>VM.Standard.E2.1.Micro</div>
+          <div className="flex-1"><p className="font-bold">RAM </p>1GB</div>
+          <div className="flex-1"><p className="font-bold">OS </p>Ubuntu 20.04 LTS</div>
+          <div className="flex-1"><p className="font-bold">{t('region')} </p>Japan Central (Osaka)</div>
+          </div>
+          <a href="https://mackerel.io/orgs/yude/hosts/4frgQ1QuivJ/-/graphs/loadavg#period=10m"><img src="https://mackerel.io/embed/public/embed/wgmTz7aTgvwfyU6qVHrJJmQlpOHCUJK6qw0W9sJTX68WOI8TFtc27YvJ7dwkQEGv.png?period=10m" className="w-full" /></a>
+          
+          {
+              // oracle-a1-1
+          }
+          <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">oracle-a1-1</h2>
+          <div className="flex xl:w-2/3 text-center">
+          <div className="flex-1"><p className="font-bold">{t('service')} </p>Oracle Cloud</div>
+          <div className="flex-1"><p className="font-bold">{t('shape')} </p>VM.Standard.A1.Flex</div>
+          <div className="flex-1"><p className="font-bold">RAM </p>6GB</div>
+          <div className="flex-1"><p className="font-bold">OS </p>Ubuntu 20.04.3 LTS</div>
+          <div className="flex-1"><p className="font-bold">{t('region')} </p>Japan Central (Osaka)</div>
+          </div>
+          <a href="https://mackerel.io/orgs/yude/hosts/4qzeqT6kToQ/-/graphs/loadavg#period=10m"><img src="https://mackerel.io/embed/public/embed/2C7NdtqLgGFGPiO2IctDGuaMdjBwhXyp0i8imkaJT2GFI55syPaxxACEYIRWDHnS.png?period=10m" className="w-full" /></a>
+          
+        </div>
+      </Layout>
+    </>
+  )
+}
--- a/pages/services.js
+++ b/pages/services.js
@@ -0,0 +1,49 @@
+// Base layout
+import Layout from "./components/Layout"
+
+// i18n
+import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n';
+
+// React Router etc.
+import { useRouter } from 'next/router'
+import React from "react"
+
+// React Markdown
+import ReactMarkdown from "react-markdown"
+import gfm from 'remark-gfm';
+import ja from '../docs/services/ja.md'
+import en from '../docs/services/en.md'
+
+// next-seo
+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
+              title="サービス"
+              description="yude.jp で運用中のサービス"
+            />
+            <Layout title={t('services')}>
+              <div>
+                {query["lang"] === 'ja' ? (
+                  <ReactMarkdown plugins={[gfm]}>
+                      {ja}
+                  </ReactMarkdown>
+                ) : (
+                  <ReactMarkdown plugins={[gfm]}>
+                      {en}
+                  </ReactMarkdown>
+                )}
+              </div>
+            </Layout>
+          </>
+        )
+      }
+    }
--- a/pages/status.js
+++ b/pages/status.js
@@ -1,54 +0,0 @@
-import Layout from "./components/Layout"
-import useTranslation from 'next-translate/useTranslation'
-
-import { useRouter } from 'next/router'
-
-export default function About(props) {
-  const router = useRouter()
-  const { locale, locales, defaultLocale, pathname } = router
-  const { t, lang } = useTranslation("status")
-  const status = t('status')
-  const location = t('location')
-  const tottori = t('tottori')
-  const hiroshima = t('hiroshima')
-  const model = t('model')
-
-  return (
-
-    <Layout title={status}>
-        <div className="my-9 text-center">
-        {
-         // Heading
-        }
-        <div className="mb-5">
-          <p className="text-left text-4xl">{status} <p className="md:inline font-mono text-base sm:">Powered / Generated by Mackerel.</p></p>
-        </div>
-        {
-            // cherry Mackerel
-        }
-        <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">cherry</h2>
-        <div className="flex xl:w-2/3 text-center">
-        <div className="flex-1"><p className="font-bold">CPU </p>i7-2600</div>
-        <div className="flex-1"><p className="font-bold">RAM </p>DDR3 24GB</div>
-        <div className="flex-1"><p className="font-bold">OS </p>Arch Linux</div>
-        <div className="flex-1"><p className="font-bold">{location} </p>{hiroshima}</div>
-        </div>
-        <iframe className="w-full h-96" src="https://mackerel.io/embed/public/embed/heHnGhDanoIDlf7jjxUe9yPVrsG3deeH5ptD8suErrq5w46crWEIYdLfzLoukzfF?period=24h" height="400" frameBorder="0" scrolling="no"></iframe>
-        
-        {
-            // raspberry Mackerel
-        }
-        <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">raspberry</h2>
-        <div className="flex xl:w-2/3 text-center">
-        <div className="flex-1"><p className="font-bold">{model} </p>Raspberry Pi 4 Model B Rev 1.2</div>
-        <div className="flex-1"><p className="font-bold">RAM </p>4GB</div>
-        <div className="flex-1"><p className="font-bold">OS </p>Raspbian GNU/Linux 10 (buster)</div>
-        <div className="flex-1"><p className="font-bold">{location} </p>{tottori}</div>
-        </div>
-        <iframe className="w-full h-96" src="https://mackerel.io/embed/public/embed/5HVbQiwuxrMithyrGjmmQCCOVgJ6Ptf94SDA2qWSTsh2rtz7pjePihYzaW5QEml4?period=24h" height="400" frameBorder="0" scrolling="no"></iframe>
-        
-        </div>
-
-    </Layout>
-  )
-}
--- a/pages/tos.js
+++ b/pages/tos.js
@@ -1,26 +1,40 @@
+// Base layout
 import Layout from "./components/Layout"
-import useTranslation from 'next-translate/useTranslation'
+
+// i18n
+import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n';
+
+// Next.js, React
 import { useRouter } from 'next/router'
 import React from "react"
+
+// React Markdown
 import ReactMarkdown from "react-markdown"
 import gfm from 'remark-gfm';
 import ja from '../docs/tos/ja.md'
 import en from '../docs/tos/en.md'

 export default function Tos(props) {
-    const router = useRouter()
-    const { locale, locales, defaultLocale, pathname } = router
-    const { t, lang } = useTranslation("tos")
-    const tos = t('tos')
-    return(
-        <Layout title={tos}>
+    const { t } = useTranslation();
+    const [query] = useLanguageQuery();
+    
+    if (!query) {
+      return <p>Loading...</p>
+    } else {
+      return (
+          <Layout title={t('tos')}>
          <div>
-        {lang === 'ja' ? (
-          <ReactMarkdown plugins={[gfm]} children={ja} />
+            {query["lang"] === 'ja' ? (
+              <ReactMarkdown plugins={[gfm]}>
+                  {ja}
+              </ReactMarkdown>
            ) : (
-          <ReactMarkdown plugins={[gfm]} children={en} />
+              <ReactMarkdown plugins={[gfm]}>
+                  {en}
+              </ReactMarkdown>
            )}
          </div>
          </Layout>
          )
    }
+  }
--- a/public/static/images/avatar.png
+++ b/public/static/images/avatar.png
--- a/public/static/images/avatar.webp
+++ b/public/static/images/avatar.webp
--- a/public/static/images/R_I_R_U_.png
+++ b/public/static/images/R_I_R_U_.png
--- a/public/static/images/banner.png
+++ b/public/static/images/banner.png
--- a/public/images/banner_new.png
+++ b/public/images/banner_new.png
--- a/public/images/brstrip.gif
+++ b/public/images/brstrip.gif
--- a/public/images/busy_banner.png
+++ b/public/images/busy_banner.png
--- a/public/images/dynmap.png
+++ b/public/images/dynmap.png
--- a/public/images/favicon.ico
+++ b/public/images/favicon.ico
--- a/public/static/images/favicon.ico
+++ b/public/static/images/favicon.ico
--- a/public/static/images/hanabi.jpg
+++ b/public/static/images/hanabi.jpg
--- a/public/static/images/kino.jpg
+++ b/public/static/images/kino.jpg
--- a/public/static/images/marisa.jpg
+++ b/public/static/images/marisa.jpg
--- a/public/images/minecraft/golem_trap.png
+++ b/public/images/minecraft/golem_trap.png
--- a/public/images/minecraft/large_field.png
+++ b/public/images/minecraft/large_field.png
--- a/public/images/minecraft/lockette/chest.png
+++ b/public/images/minecraft/lockette/chest.png
--- a/public/images/minecraft/shrine.png
+++ b/public/images/minecraft/shrine.png
--- a/public/images/minecraft/sugarcane.png
+++ b/public/images/minecraft/sugarcane.png
--- a/public/images/mutual/kirby3ds.png
+++ b/public/images/mutual/kirby3ds.png
--- a/public/images/mutual/nona-takahara.png
+++ b/public/images/mutual/nona-takahara.png
--- a/public/static/images/yude.jp_logo.svg
+++ b/public/static/images/yude.jp_logo.svg
--- a/public/static/images/busy_banner.png
+++ b/public/static/images/busy_banner.png
--- a/public/static/images/dynmap.png
+++ b/public/static/images/dynmap.png
--- a/Show More
+++ b/Show More