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
andgetStaticProps
.
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)
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:
Maybe you can take some inspiration out of my own site / blog:
elianvancutsem.com
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.
Add your blog's link in article.
❤️
It's almost ready. I'll post it tomorrow with a new article about SEO optimization!
pranav-birajdar.vercel.app/blog
It's live btw!
Can you provide article how to include hash node blog in nextjs
Neat!
Woah, this is a pleasant surprise! Love this community you have built Ben. It's very welcoming!
Pranav, thanks for your excellent guide!
You're very welcome Stuart! :)
Hey Pranav, thanks for linking my articles! Happy they helped, can’t wait to see your finished website!
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.
Nice! Thanks
Noice
Nice!