【経験】Next13でfallback=falseにしたらページが404でアクセスできなかった話

結論

• 正規表現の文字間違え
• slug: slug.replace(/.mdx?$/, ""),のところをslug: slug.replace(/.mdx?&/, "")にしていた

コード

import React from 'react'
import { postsFileNames } from 'utils/mdxUtils'

export default function SingleBlogPage() {
    return (
        <div>[slug]</div>
    )
}

export async function getStaticProps({ params }) {
    console.log(params)
    return { 
        props: {
            params
        }
    }
}

export async function getStaticPaths(){
    const postsPaths = postsFileNames.map((slug) => ({
        params: {
	    //$を&にしていたので、うまく判定されなかった
            slug: slug.replace(/\.mdx?&/, ""),
        }
    }))

    return {
        paths: postsPaths,
        fallback:false
    }
}

まとめ

• 正規表現は気をつけよう
• console.logじゃ見分けはつかなかった
• こういうのをAIに解決してもらいたい
  • エディタの構文を確認してもらうなど