I've always wanted a platform that truly reflects my passion for coding and writing. In the past few weeks, I started exploring Next.js and decided to build a personal blog website as a side project. In this article, I want to share my experience and a few things I learned while building this project.
If you want to see my blog in action, check it out at www.indiecoder.tech.
Simple and User-friendly Design
I went for mobile-first approach when designing my blog. I also wanted my website to feel familiar, like scrolling through a social media platform. So, I designed the navbar and homepage to look like a social media app. I also added a dark/light mode feature which is essential in modern web design.
Content Management
I chose Hygraph for managing posts and other content on my website. It offers a GraphQL API and an intuitive UI to easily define schema and organize content. To interact with the API, I used graphql-request library which provides a convenient way to make GraphQL requests.
Dynamic Routing and SSG
I learned about many powerful features of Next.js while building this app. Dynamic routing and static site generation are especially amazing. With its folder-based routing system, we don't need to set up routers manually like in a React app. For example, when I create about/page.tsx file inside app/ directory, Next.js renders the page on /about route.
To render individual blog posts, I set up a folder like app/posts/[slug]/page.tsx where [slug] is a dynamic parameter for each post. Although Next.js can handle most of the dynamic stuff, it doesn't automatically know which routes to generate during the build time. This results in server-side rendering of the page. We can avoid this by defining generateStaticParams function. Here's the function I used for generating all routes for posts.
export const generateStaticParams = async () => {
const posts = await getPosts();
return posts.map((post) => ({ slug: post.slug }));
};
Comment System
Every blog needs some social interaction, like comments and reactions. I didn't want to spend a lot of time on creating a reliable comment system. After some research, I found Giscus which uses GitHub Discussions to integrate comments. It's very easy to customize and use. Just adding one component gave me a fully-functional comment system with authentication and reactions.
Conclusion
Creating my blog website with Next.js has been an amazing experience. Although it's still basic, I feel proud of what I've built and I plan to add more features in the future.
You can explore the source code on GitHub. I'd love to hear your feedback and suggestions to make it even better.
Thank you for joining me on this journey, and happy coding! 😊