Static blog site generation by Next.js from local files (eg. .md) having the same route structure as the local directory.

These days, Next.js is one of the most popular static site generators.

We can generate static blog sites from local files such as .md/.mdx etc files. You may read this blog to get the basic idea. There are also some examples at the end of that blog post.

However, in some cases, we may want to keep the files(.md or any other type) in our project and then have the route structure(i.e. URL) the same as the local markdown files.

For example,
Let you have created a next.js project to generate a static blog. It has a posts directory, which contains the blog posts as .md files.
The project file structure is something like this. (You may replace the .js to .ts if you want)

--index.js  
--package.json 
--pages/[...slug].js  
--posts/about.md  
       /cpp/introduction.md  
       /javascript/asynchronous_javascript.md  
                  /nodejs/nodejs_architecture.md  
 

Now you want the URL of the site to be the same as posts directory structure. That is...

your_domain/about
           /cpp/introduction  
           /javascript/asynchronous_javascript  
                      /nodejs/nodejs_architecture
 

In such cases, the npm library next-dynamic-route-generator may help you.

You may keep local .md or other files in any structure inside the post directory, the site will be built having the same routes.