use NEXT_PUBLIC_

.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"

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,
+  experimental: {
-  env: { NEXT_BASE_PATH },
+    basePath: process.env.NEXT_PUBLIC_BASE_PATH || "",
+  },
 });

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>
     );

styles/TopAppBar.tsx

@@ -27,11 +27,12 @@ const TopAppBar = () => {
             value={pathname}
             icon={icon}
             component={React.forwardRef<HTMLAnchorElement, {}>((props, ref) => (
-              <Link
+              <Link href={pathname}>
-                href={pathname}
+                <a
-                as={`${process.env.NEXT_BASE_PATH}${pathname}`}
+                  ref={ref}
-              >
+                  href={[process.env.NEXT_PUBLIC_BASE_PATH, pathname].join("")}
-                <a ref={ref} {...props} />
+                  {...props}
+                />
               </Link>
             ))}
           />