lib/mdx.js

@@ -28,6 +28,10 @@ export async function getFiles(type) {
   return fs.readdirSync(path.join(root, 'data', type))
 }
 
+export function formatSlug(slug) {
+  return slug.replace(/\.(mdx|md)/, '')
+}
+
 export function dateSortDesc(a, b) {
   if (a > b) return -1
   if (a < b) return 1
@@ -91,7 +95,7 @@ export async function getAllFilesFrontMatter(type) {
     const source = fs.readFileSync(path.join(root, 'data', type, file), 'utf8')
     const { data } = matter(source)
     if (data.draft !== true) {
-      allFrontMatter.push({ ...data, slug: file.replace(/\.(mdx|md)/, '') })
+      allFrontMatter.push({ ...data, slug: formatSlug(file) })
     }
   })
 

pages/blog/[slug].js

@@ -1,6 +1,6 @@
 import fs from 'fs'
 import hydrate from 'next-mdx-remote/hydrate'
-import { getFiles, getFileBySlug, getAllFilesFrontMatter } from '@/lib/mdx'
+import { getFiles, getFileBySlug, getAllFilesFrontMatter, formatSlug } from '@/lib/mdx'
 import PostLayout from '@/layouts/PostLayout'
 import MDXComponents from '@/components/MDXComponents'
 import PageTitle from '@/components/PageTitle'
@@ -12,7 +12,7 @@ export async function getStaticPaths() {
   return {
     paths: posts.map((p) => ({
       params: {
-        slug: p.replace(/\.(mdx|md)/, ''),
+        slug: formatSlug(p),
       },
     })),
     fallback: false,