diff --git a/src/components/PmaLink.astro b/src/components/PmaLink.astro
new file mode 100644
index 0000000..26239e2
--- /dev/null
+++ b/src/components/PmaLink.astro
@@ -0,0 +1,21 @@
+---
+const { PHPMYADMIN_PORT = 8081 } = import.meta.env;
+
+interface Props {
+  title?: string;
+}
+
+const { title = "phpMyAdmin" } = Astro.props;
+---
+
+<a href="#" data-pma-port={PHPMYADMIN_PORT} target="_blank" rel="noopener noreferrer">
+  {title}&nbsp;(<span class="pma-url"></span>)
+</a>
+
+<script define:vars={{ PHPMYADMIN_PORT }}>
+  const link = document.currentScript.previousElementSibling;
+  const host = window.location.hostname;
+  const url = `http://${host}:${PHPMYADMIN_PORT}`;
+  link.href = url;
+  link.querySelector('.pma-url').textContent = url;
+</script>
diff --git a/src/components/PmaLink.tsx b/src/components/PmaLink.tsx
deleted file mode 100644
index 545c6c5..0000000
--- a/src/components/PmaLink.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-const { PHPMYADMIN_PORT = 8081 } = import.meta.env;
-
-type Props = {
-  title?: string;
-};
-export default function PmaLink(props: Props) {
-  const host = window.location.hostname;
-  const url = `http://${host}:${PHPMYADMIN_PORT}`;
-
-  return (
-    <a href={url} target="_blank" rel="noopener noreferrer">
-      {props.title ?? "phpMyAdmin"}&nbsp;({url})
-    </a>
-  );
-}
diff --git a/src/pages/sql/015-phpmyadmin.mdx b/src/pages/sql/015-phpmyadmin.mdx
index a0a2a4c..5bcb25c 100644
--- a/src/pages/sql/015-phpmyadmin.mdx
+++ b/src/pages/sql/015-phpmyadmin.mdx
@@ -2,7 +2,7 @@
 layout: "@/layouts/MarkdownLayout.astro"
 ---
 
-import PmaLink from "@/components/PmaLink.tsx";
+import PmaLink from "@/components/PmaLink.astro";
 
 # {title}
 
@@ -10,7 +10,7 @@
 
 このドキュメントでは、PhpMyAdminを使うことができるようになっています。
 
-<PmaLink client:only />
+<PmaLink />
 
 ## 接続情報