getStaticProps doesn't work when reload the page hosted on vercel

Issue

I am building nextjs project and facing the issues that one of the pages goes to 404 when reload the page.

I am using getStaticProps within the page directory.

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

Inside the blogs.tsx I call getStaticProps to get mdx file data to pass.

type BlogStaticInputs = {
    blogs: BlogsType[]
}

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

// get all blogs data from './blogs'
export const getStaticProps: GetStaticProps = async () => {
    console.log('Before getting blogs...')
    const blogs = getAllBlogs([
        'date',
        'description',
    ])

    return {
        props: { blogs }
    }
}

After I checked vercel deploy log, I noticed the console.log('Before getting blogs...') is printed out successfully in the first time, but when I go to page and reload there is no console.log output and just shows 404.

Being that said, nextjs cannot or tries to find some different page when I reload the ./blogs page due to current getStaticProps implementation is not correct in some ways.

If someone have idea why current getStaticProps function doesn't fire and shows 404 as if the page doesn't exist only when reload the page.

When I first visit to /blogs page, it just works. But after I reload the page it goes to 404.

I already set trailingSlash = true since it seems one of the solutions but not working.

module.exports = {
  trailingSlash: true,
}

Solution

I will post answer by myself.

I figured it out I need to pass as parameter to specify the actual path in the next/link as below.

<Link
     href="/blogs"
     as={`/blogs`} <- this was required
     passHref
>

Answered By - husky