My dynamic routes are built at the build time in NextJS but when I visit them a request is still being made to the server. Am I missing out something?

The name of my file is [slug].js
Here is my code:

import fs from 'fs'
import matter from 'gray-matter'
import { useRouter } from 'next/router'
import ReactMarkdown from 'react-markdown'

import { Button, Container } from 'react-bootstrap'

export async function getStaticPaths() {

  const files = fs.readdirSync('./markdowns/projects', 'utf-8')
  const markdowns = files.filter(file => file.endsWith('.md'))

  const paths = markdowns.map(file => {
    const markdown = fs.readFileSync(`./markdowns/projects/${file}`, 'utf8');
    const { data } = matter(markdown);

    return { params: { slug: data.slug } }
  })

  return { paths, fallback: false }
}

export async function getStaticProps({params: {slug}}) {

  const markdown = fs.readFileSync(`./markdowns/projects/${slug}.md`, 'utf8');
  const { data, content } = matter(markdown);

  return {
    props: {
      data: content,
      title: data.title,
      slug: data.slug,
      description: data.description,
    }
  }
}

const Project = ({ data, title, description, slug }) => {

  return (
    <div>
      <Container>
        <ReactMarkdown>
          {data}
        </ReactMarkdown>
      </Container>
    </div>
  )
}


export default Project

The routes follow: /blog/name-of-blog-1, /blog/name-of-blog-2, etc.
I can see the pages being built when I run npm run build. But when I run npm run start and visit http://localhost:3000/blog/blog-1 then the page takes some time to load. Checking the network tab on Chrome shows that it makes some requests to the server.
Any way to solve this? Thanks.