DEV Community

Creating a Markdown Blog with Next.js

Kendall Strautman on November 18, 2019

02.08.22: This post has been updated to use Next 12 and it's latest features. Next.js is a React "metaframework" (a framework built on a framewo...

Read full post

SeungJin YOUN • Dec 18 '19

Hello!
I'm appreciating your app.
I could try a migration to your blog app.
However, after all migrations, sudden errors come out...
The matter is, I could not figure it out or fix it...

the errors come out after my all previous markdown posts migrations.
however, the funny thing is, last night when I complete all mitration and deploy on
'now', that was no problem at all.. but after a sleep,

sj-log.now.sh/
you can check the deployment was successful last night.

Do you have any idea of this?
Thank you!

$ npm start

> next-blog@3.2.1 start C:\sj-log
> node server.js

Defining routes from exportPathMap
(node:18352) UnhandledPromiseRejectionWarning: TypeError: Missing pattern at 27
    at lexer (C:\sj-log\node_modules\path-to-regexp\dist\index.js:82:23)
    at parse (C:\sj-log\node_modules\path-to-regexp\dist\index.js:97:18)
    at stringToRegexp (C:\sj-log\node_modules\path-to-regexp\dist\index.js:329:27)
    at pathToRegexp (C:\sj-log\node_modules\path-to-regexp\dist\index.js:403:12)
    at Object.match (C:\sj-log\node_modules\path-to-regexp\dist\index.js:248:14)
    at C:\sj-log\node_modules\next\dist\next-server\server\lib\path-match.js:6:42
    at DevServer.addExportPathMapRoutes (C:\sj-log\node_modules\next\dist\server\next-dev-server.js:5:41)
(node:18352) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:18352) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Kendall Strautman • Dec 18 '19

Hi there! Not sure about this error. The finished sample repo is deployed fine for me on Netlify right now. Maybe make sure the build command is correct? It's hard to tell without more information!

JP Lew • Nov 26 '19 • Edited

Hey Kendall, I'm building my blog right now and found this useful, especially your finished product repo. Didn't know you needed an exportPathMap in the next.config.js so thanks for unblocking me.

I ended up going with frontmatter-markdown-loader for md parsing and Netlify CMS for versioning: github.com/jplew/netlify-blog

Tina looks pretty cool might check it out.

Kendall Strautman • Nov 27 '19

Nice! Glad it was helpful. Yes that's a good point, I should follow up with notes on using exportPathMap ☺️

Stefan Schindler • Feb 12 '20 • Edited

How do you handle post ordering? Easiest I can think of is just prefixing every post filename with a date, but I don't really like adding meta data to the filename.

Another simple idea is adding the publication date as front matter and then sorting all posts when reading them. Might be a little slow though.

Any ideas?

Nice article!

Kendall Strautman • Feb 14 '20 • Edited

Yeah I think both methods would work! Agree that the first would be simplest. I've implemented the latter on the tinacms.org site for the blog index if you wanna check it out. You can also see the pagination implementation there so you only render a certain number of posts per page.

Dídac García • May 9 '20

Well explained!

I followed your tutorial in addition to this one: netlify.com/blog/2020/05/04/buildi...

I noticed that my code, the Netlify tutorial code and also yours have the same problem. If you open the development console of your browser and visit your site, you will see some 404 errors. The site works perfectly, but the errors are there! :-(

You can read more about issue that here loudnoises.us/solving-next-static-... and here github.com/zeit/now/issues/ 3294 but I can't solve it.

Do you have any idea about how to solve it?

Kendall Strautman • May 11 '20 • Edited

You probably need to use getStaticPaths where you are implementing dynamic routes. (exportPathMap is now discouraged). Or there may be something funky going on with the parameters you are passing the routes. I would also look into the build command you are using for production. Just recently I changed from using next export to just next build now that you can statically export at the page level with getStaticProps.

oriuken • Apr 29 '20

Hey, Great Article ! Thanks so much...
One question though... if you are generating all Blog Post as static content at Building time, does it means that new Posts won't be shown until you Build again ?

Thanks !