Nextjsで初回ロード時は読み込めるが、リロードすると404になり続ける

Question

現在Nextjsでプロジェクトを書いており、Vercelにデプロイしています。
ディレクトリーは大きく

pages
        - blogs.tsx
        - blog/[slug].tsx
        - index.tsx

という形で、まずrootからブログボタンを押すと、blogsにルーティングされ、MDXに書いているブログリストが表示されます。（ブログのタイトルをクリックすると、Link でblog/[slug].tsxにルーティングされる仕組みです。

現在、vercelにデプロイされたPreviewのリンクより、.../vercel.app/blogs にアクセスすると、初回は何も問題なくコンテンツがロードされます。ただ、リロードや一度ルートのページに戻って、再度アクセスしようとすると、404が表示され続けてしまいます。

blogs.tsxでは、getStaticPropsを使って以下のようにMDXを読み込んでいます。

import { GetStaticProps } from 'next'
import React from 'react'
import { Blogs } from '@component/blogs'
import BlogsType from '@src/types/blog'
import { getAllBlogs } from '@utils/blog/getAllPosts'

type BlogStaticInputs = {
    blogs: BlogsType[]
}

export const Index = ({ blogs }: BlogStaticInputs) => {
    return <Blogs blogs={blogs} />
}

// get all blogs data from './blogs'
export const getStaticProps: GetStaticProps = async () => {
    const blogs = getAllBlogs([
        'date',
        'description',
        'slug',
        'title',
        'author',
        'image',
        'sns',
        'username'
    ])

    return {
        props: { blogs },
        revalidate: 10
    }
}

export default Index

また、こちらのバグ解消方法として、trailingSlash: true,を next.config.jsに追加してみましたが、挙動は特に変わりませんでした。

初回アクセスのみ問題なくルーティングされ、リロードや一度ページを戻って再アクセスしようとすると、ページが見つからない（おそらくNextがpages/blogsを見つけられていない、もしくは違うPathを探そうとしている？）問題に何か解決策がありましたら、ご教授いただけると幸いです。

Answer 1

getStaticProps で returnしている箇所にfallback: blockingを追加すると解決するかもしれないです！

... 省略
    return {
        props: { blogs },
        revalidate: 10,
        fallback: 'blocking'
    }

参考
https://nextjs.org/docs/api-reference/data-fetching/get-static-paths#fallback-blocking