diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
index 019033f..6900b77 100644
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@@ -17,7 +17,7 @@ jobs:
           restore-keys: yarn-
       - run: yarn
       - run: git -c user.name="$(whoami)" subtree add --prefix docs origin gh-pages
-      - run: NEXT_ASSET_PREFIX=/${GITHUB_REPOSITORY#*/} yarn doc
+      - run: NEXT_PUBLIC_BASE_PATH=/${GITHUB_REPOSITORY#*/} yarn doc
       - run: git add -f docs
       - run: git -c user.name="$(whoami)" commit -m github-pages
       - run: git remote add github "https://github:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git"
diff --git a/next.config.js b/next.config.js
index 51c209a..4a473fc 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,9 +1,8 @@
-const NEXT_BASE_PATH = process.env.NEXT_ASSET_PREFIX || "";
-
 module.exports = require("@next/mdx")({
   extension: /\.mdx?$/,
 })({
   pageExtensions: ["ts", "tsx", "md", "mdx"],
-  assetPrefix: NEXT_BASE_PATH,
-  env: { NEXT_BASE_PATH },
+  experimental: {
+    basePath: process.env.NEXT_PUBLIC_BASE_PATH || "",
+  },
 });
diff --git a/styles/MainTheme.tsx b/styles/MainTheme.tsx
index 2097321..e093da9 100644
--- a/styles/MainTheme.tsx
+++ b/styles/MainTheme.tsx
@@ -51,11 +51,11 @@ export const components: {
   h5: (props) => <Typography component="h5" variant="h6" {...props} />,
   h6: (props) => <Typography variant="h6" {...props} />,
   a: ({ href, ...props }: { href: string }) => {
-    const url = `${process.env.NEXT_BASE_PATH}${href}`;
+    const url = [process.env.NEXT_PUBLIC_BASE_PATH, href].join("");
     return isValidURL(href) ? (
       <MuiLink variant="body1" color="secondary" href={href} {...props} />
     ) : (
-      <Link href={href} as={url}>
+      <Link href={href}>
         <MuiLink variant="body1" color="secondary" href={url} {...props} />
       </Link>
     );
diff --git a/styles/TopAppBar.tsx b/styles/TopAppBar.tsx
index 91cf74a..4a364b5 100644
--- a/styles/TopAppBar.tsx
+++ b/styles/TopAppBar.tsx
@@ -27,11 +27,12 @@ const TopAppBar = () => {
             value={pathname}
             icon={icon}
             component={React.forwardRef<HTMLAnchorElement, {}>((props, ref) => (
-              <Link
-                href={pathname}
-                as={`${process.env.NEXT_BASE_PATH}${pathname}`}
-              >
-                <a ref={ref} {...props} />
+              <Link href={pathname}>
+                <a
+                  ref={ref}
+                  href={[process.env.NEXT_PUBLIC_BASE_PATH, pathname].join("")}
+                  {...props}
+                />
               </Link>
             ))}
           />