ok

app/(pages)/blogs/[slug]/page.tsx

@@ -0,0 +1,25 @@
+import fs from "fs/promises";
+
+interface PropsParams {
+    slug: string;
+}
+
+interface Props {
+    params: Promise<PropsParams>;
+}
+
+export default async function Page({ params }: Props) {
+    const { slug } = await params;
+    const { default: Post, metadata } = await import(`@/blogs/${slug}.mdx`);
+    return <Post />;
+}
+
+export async function generateStaticParams() {
+    const blogs = (await fs.readdir("blogs")).filter((name) =>
+        name.endsWith(".mdx"),
+    );
+    return blogs.map((name) => ({
+        slug: name.replace(/\.mdx$/, ""),
+    }));
+}
+export const dynamicParams = false;

app/(pages)/layout.tsx

@@ -0,0 +1,16 @@
+import Header from "@/components/ui/header";
+
+interface Props {
+    children: React.ReactNode;
+}
+
+const Layout: React.FC<Props> = ({ children }) => {
+    return (
+        <>
+            <Header />
+            <main className="mx-auto my-6 max-w-3xl px-4">{children}</main>
+        </>
+    );
+};
+
+export default Layout;