在 Next.js 中，你可以使用 getStaticProps 和 getStaticPaths 方法来动态获取和呈现远程的 MDX 页面。下面是一个示例代码，展示了如何使用 [...slug] 来作为动态路由，并结合 App Router 实现远程 MDX 页面的呈现。

首先，你需要在页面组件中引入 useEffect 和 useRouter，以及 AppRouter 和其他必要的组件和函数。

import { useEffect } from 'react';
import { useRouter } from 'next/router';
import { AppRouter, Link, useMantineTheme } from '@mantine/core';
import { MDXRemote } from 'next-mdx-remote';
import { serialize } from 'next-mdx-remote/serialize';

import { getRemoteMDXPage, getRemoteMDXPaths } from '../utils/api';

const RemoteMDXPage = ({ source }) => {
  const router = useRouter();
  const theme = useMantineTheme();

  useEffect(() => {
    // 在此处根据需要执行其他操作
    // ...

    return () => {
      // 在卸载组件时执行清理操作
      // ...
    };
  }, []);

  return (
    

      
        Home
        About
      

      
    
  );
};

export const getStaticPaths = async () => {
  // 获取远程 MDX 页面的路径列表
  const paths = await getRemoteMDXPaths();

  return {
    paths,
    fallback: false, // 如果设置为 true，则对于不在 paths 列表中的路径，将使用 fallback 页面
  };
};

export const getStaticProps = async ({ params }) => {
  // 根据动态的 slug 获取远程 MDX 页面的内容
  const source = await getRemoteMDXPage(params.slug.join('/'));

  return {
    props: {
      source: await serialize(source),
    },
  };
};

export default RemoteMDXPage;

在上面的代码中，getStaticPaths 方法用于获取远程 MDX 页面的路径列表，getStaticProps 方法用于根据动态的 slug 获取远程 MDX 页面的内容。source 是经过序列化的 MDX 内容，可以通过 MDXRemote 组件来渲染。

你需要根据你的具体需求来实现 getRemoteMDXPaths 和 getRemoteMDXPage 方法，用于获取远程 MDX 页面的路径列表和内容。你可以使用适合你的方式，例如从远程 API 获取数据，或者从本地文件系统中读取数据。

希望这个示例能够帮助到你！