DEV Community

Cover image for Resources to Build your Blog using Next.js and DEV.to
Pranav Birajdar
Pranav Birajdar

Posted on • Updated on • Originally published at pranav-birajdar.vercel.app

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

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

Alt Text

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:

Next.js blog with an external CMS:

Next.js blog with local .md files:

Resources and Packages Used:

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!

Alt Text

Hope you guys find these resources hopeful!

Top comments (15)

Collapse
 
eliancodes profile image
Elian Van Cutsem

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>
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
prnvbirajdar profile image
Pranav Birajdar

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.

Collapse
 
preyasprathap profile image
preyas prathap

Add your blog's link in article.
❤️

Collapse
 
prnvbirajdar profile image
Pranav Birajdar

It's almost ready. I'll post it tomorrow with a new article about SEO optimization!

Collapse
 
prnvbirajdar profile image
Pranav Birajdar
Thread Thread
 
kulu123z profile image
KULDIP MOCHI

Can you provide article how to include hash node blog in nextjs

Collapse
 
ben profile image
Ben Halpern

Neat!

Collapse
 
prnvbirajdar profile image
Pranav Birajdar

Woah, this is a pleasant surprise! Love this community you have built Ben. It's very welcoming!

Collapse
 
stuartcmd profile image
Stuart

Pranav, thanks for your excellent guide!

Collapse
 
prnvbirajdar profile image
Pranav Birajdar

You're very welcome Stuart! :)

Collapse
 
jameswallis profile image
James Wallis

Hey Pranav, thanks for linking my articles! Happy they helped, can’t wait to see your finished website!

Collapse
 
prnvbirajdar profile image
Pranav Birajdar • Edited

You're welcome mate! Your posts were really helpful. I'm almost done with my website. Just facing some problems with ISR at the moment.

Collapse
 
saizferri profile image
Adrian Saiz

Nice! Thanks

Collapse
 
lucasandre profile image
Lucas André

Noice

Collapse
 
andrewbaisden profile image
Andrew Baisden

Nice!