Resources to Build your Blog using Next.js and DEV.to

#react #javascript #beginners #webdev

I recently finished building my blog using Next.js, TypeScript, Tailwind and DEV.to CMS.

This was my first time learning and using:

TypeScript (I decided not to get swept up in tutorial hell and instead went through some documentation before diving headfirst and allowing the TS compiler to guide me)
getStaticPaths, getStaticProps, and Incremental Static Regeneration with NEXT.js
Using DEV.to as a CMS to store my blog data and call it whenever needed using REST APIs.

I went through tons of resources and thought some of this might help you guys! So here's an exhaustive list of all the things I used or found useful for building my blog with NEXT.

Next.js Blog using DEV.to as a CMS:

The DEV.to API docs are fairly straightforward and very easy to get started with.

However, since this being my first time with SSG using getStaticPaths and getStaticProps, I needed some hand-holding there.

These articles and videos helped me a ton:

James Wallis has penned down two excellent articles about his process from moving from a JS and styled-JSX website to using TS, Next.js, and Tailwind. These articles and his repo helped me a ton!
Dale Nguyen's article was also quite helpful. He wrote his Blog in Angular.

Next.js blog with an external CMS:

Building a blog with Next.js 10 and Contentful helped me dial in how getStaticPaths, getStaticProps, and Incremental Static Regeneration with Next.js work with an external API.
Build a Blog With Next.js & Ghost shows a slightly different method of using getStaticPaths and getStaticProps.

Next.js blog with local .md files:

Next.js has some excellent documentation and they have included a basic blog tutorial using local .mdx files.
How To Build A Blog With Next.js And Tailwind: Part 1 - Next.js - Harry Wolf is a great teacher and this 3 part series a good introduction to building a Next.js blog using Tailwind and local files!
Next.js Static Site Generation (SSG) Tutorial - Ben has a good tutorial too, albeit a little too fast-paced for beginners like myself.

Resources and Packages Used:

Tailwind-NEXT-TypeScript starter template - An absolute lifesaver!
Tailwind Typography - Markdown styling

I am also planning to post all the TypeScript resources in a separate article, along with an article about my design choices, and how I was able to achieve a perfect lighthouse score!

Hope you guys find these resources hopeful!

Top comments (15)

Elian Van Cutsem • Mar 24 '21

Hey, I saw you didn't know how to add syntax highlighting to your blog. Just use tripple backticks and add the language. TailwindCSS/Typography will take care of the rest:

<body>
  <p>Hello</p>
</body>

Maybe you can take some inspiration out of my own site / blog:
elianvancutsem.com

Pranav Birajdar • Mar 24 '21

I have the tripple backticks and language added. For some reason, Typography is not rendering the highlighted syntax. I'm looking into it, and will hopefully get it fixed!

You have an amazing website btw! Love the colors.