Resources to Build your Blog using Next.js and DEV.to
Tags: react, javascript, beginners, webdev
Published: 2021-03-19 09:58:26

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pv4krhyvy7w5r3f71v46.gif)

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](https://react-typescript-cheatsheet.netlify.app/) 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](https://dev.to/jameswallis) has penned down two excellent articles about his process from moving from a [JS and styled-JSX](https://dev.to/jameswallis/i-completely-rewrote-my-personal-website-using-dev-to-as-a-cms-2pje) website to using [TS, Next.js, and Tailwind](https://dev.to/jameswallis/adding-a-blog-with-a-dev-to-backend-to-a-static-next-js-website-with-canonical-urls-1i9g). These articles and his repo helped me a ton!

- [Dale Nguyen's](https://dev.to/dalenguyen/create-your-own-blog-with-devto-api-6m8) 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](https://www.youtube.com/watch?v=jJF6oBw1lbo)
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](https://www.youtube.com/watch?v=1SYU1GorO6Y) 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](https://nextjs.org/learn/basics/data-fetching) using local .mdx files.
- [How To Build A Blog With Next.js And Tailwind: Part 1 - Next.js](https://www.youtube.com/watch?v=vu9gPcPs3mY) - 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](https://www.youtube.com/watch?v=pY0vWYLDDco&t) - 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](https://github.com/abhishekbhardwaj/tailwind-react-next.js-typescript-eslint-jest-starter) - An absolute lifesaver! 
- [Tailwind Typography](https://github.com/tailwindlabs/tailwindcss-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!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/97jf3jxc07uoebs9qepu.jpg)

Hope you guys find these resources hopeful!