How I Built My Blog with NextJS
You will learn how I created this blog, get to know some amazing developers, and pick up some cool stuff that you can use for your portfolio.
— By Yasin
For quite a long time, I always had this notion of blogging about what I learn every day. But for some reason, I've always backed down doing that. One of the main reasons is that whenever I try to write something on blogging platforms, knowing that I'm limited to a basic WYSIWYG editor quickly puts me off 😕.
When I think of "writing," I think of figures, expressions, footnotes, references, snippets, reasoning, and analogies. Lol, perhaps I am being too metaphorical here, but I tend to have academic writing styles, and you get where I come from. But the point that I'm trying to make is that pushing content through dedicated blogging platforms looks pretty odd. They don't have all the features that I want.
And there's this thing called "Paywalls." Honestly, I don't like it. I understand that if you're making a living out of writing, it ultimately makes sense to do that. But lots of devs out there don't sail with subscriptions. Don't you think? Well, please don't get me wrong, though, and I don't want to be the judge of it. I think every platform has its quirks and features, and on the other hand, there are platforms like hashnode, dev.to, and HackerNoon, which are fantastic! I plan to cross-post on these platforms 👀.
I created this "blogfolio" to show the world what I learn, build, and enjoy. But it's supercharged with my own set of features to write things the way I want. I have to say that I got inspired by many bloggers out there. They are not just random bloggers or developers. They are the ones who do things differently, the ones who inspire other people in unimaginable ways.
So, before actually telling you the “how?” part, I'll mention those wonderful hoomans first. In my book of ethics, I'll never forget to mention the ones whose been a part of my journey all along.
Standing on the shoulders of giants
I'm a huge fan of Josh Comeau's work, and his site is one of the most interesting blogs I have found on this journey. One has to be lucky to land on his blog because that is one rare masterpiece you'll ever find on the entire internet.
While building my site, one resource that I found was Josh's Effective Portfolio free e-book. I think that's one of the best resources if you want to kick-start one of your portfolios. A lot of his articles directly contributed to my knowledge.
Along the way, I have discovered many other devs and leaders whose passionate about what they are doing. They, too, implicitly or explicitly, helped me build this site. And they are:-
Adam Laycock — He's one of the core contributors to
mdx-bundler. When using MDX with NextJS, you need to organize and read your content dynamically. And I learned those stuff from his blog. He's a very active fella on Github.
Paco Coursey — I found Paco's website from Rude's blog post. Paco is the brain behind the
next-themesmodule. I use that library to toggle between color schemes. Tbh Rude's post and Paco's site source tree helped me implement it more elegantly.
Nanda Syahrasyad — Nanda is one of the brightest fellows on visualizing algorithms. In his articles, I like how he reaches a problem statement methodically (i.e., see this cool article). I borrowed the idea of embedding problem statements inside flow content. I think it's a great way to jump sections of the article thematically without additional hocus pocus.
Hey there 👋, recently I have revamped few things in my blog and decided to remove some functionalities such as: like and view count endpoints and theme switcher. Also, I have applied the third iteration of my styles. Trying to keep things as minimal as possible.
Their work helped immensely while creating my blog. They all have unique strategies for pushing content. And I closely follow some other great devs/leaders out there. I will leave the list here, so you can check them out. Max Stoiber, Adam Collier, Cassidy Williams, Ela Moscicka, Anthony Fu, Agustinus Kristiadi, Yann Le Vaguerès, Dan Abramov, LydiaHallie, Aisha Codes, Cassie, Sarah Drasner, Amelia Wattenberger, Ahmad Awais, Thein Htut, Gift Egwuenu, Agney Menon, Vlad Mihalcea, Laurie Barth, Zach Leatherman, Hossein Kazemi, and John Otander.
Phew! I know that's a long list, huh?! 😅. But not enough. I'll make sure to update this article if I find more. I'll be honest; my blog is an application with collective ideas, snippets, and design decisions that came from many minds out there. On top of it, I created my own from the ground up and sprinkled my creativity and personality to compile it into an application that I truly wanted. So, I want to say...
Finally, be sure to check them out. Follow them. They are wonderful. Now I'll tell you about the tech stack that I've used.
The Tech Stack
When I started drafting my blog, I spent quite a bit of time exploring the different stacks. I created two prototype applications using GatsbyJS and NextJS. Both are great options, but I plan to push dynamic content in this blog. So, after some good research, I wanted to use technologies that create less friction in my writing experience. And I've decided to settle with the following stack in the long run.
NextJS has batteries included for everything. I see it as a higher abstraction of React (but with ultra superpowers Webpack, Typescript, ESLint, Babel, and even native optimizations for your assets. I just delegate all the hard stuff to the framework and focus on my writing. It's just a seamless experience.️). And most importantly, it is less opinionated. In conception, it has zero-config
NextJS has performance out of the box. And it is one heck of a framework that can utilize multiple prerendering methods like server-side rendering (SSR) and static site generation (SSG) on a per-page basis. Therefore, I think the developer experience is second to none. It maintains simplicity from development to deployment.
I use Typescript to write my components and API routes. I have quite a bit of experience in writing TS code. But I still think it is an overkilled feature for my portfolio. Nonetheless, types are great when debugging. But I keep them to a minimum and mostly try to rely on my IDE inference features whenever I can.
Fauna is a flexible NoSQL transactional database. I use Fauna to persist all my post likes, and view counts. Using Fauna's core FQL is a breeze compared to other NoSQL query languages. Getting up and running with Fauna is extremely easy for a functional programming enthusiast. And it integrates well with NextJS. And to quickly get started, they have dedicated free hosted databases too!
MDX is the star of the show. I use Kent C Dodds'
mdx-bundler package, which uses
underneath. Several other options are available, but
mdx-bundler is a bundler and a compiler
that offers features like
imports in mdx, native file loaders, etc.
Design & Components
To be honest, “Design” is not one of my strong instincts, and in any way, I don't consider myself a true designer. But I do like to develop minimalistic-looking components. If you understand design systems, you'd know that they are a marriage between your style guide and component library. You will see some weird elements (such as buttons & tables) slightly off with other components in my blog. That's because initially, I didn't consider them when building my theme.
Alright, now I'll keep the talk aside; I use a CSS-in-JS library to style all my components. My design and components are a mix of the following technologies: -
Stitches JS is a solid CSS-in-JS library. I've been using it for quite a
long time now. So, primarily chose it because I have
prior experience working with it, and recently
v1 got rolled out, and now everything
is just smooth as butter. It has excellent features, and it doesn't compromise developer experience.
The best thing about stitches is that it is framework-agnostic, and you can scale up as you go.
There are other options such as goober and styled-components. You can couple it with tools like Twin Macro to truly unleash the power of design systems like tailwindcss. In my blog I use StitchesJS with RadixUI primitives to write components.
I don't use any CSS framework 😄. The components you see in my blog are crafted with pure CSS rules. And one of the main reasons to go all in pure CSS was to challenge me. I wanted to learn CSS from the ground up. You see, some component styles genuinely resonate with me. But they aren't perfect. As of now, there's still a lot of things I'm doing wrong. I think I have overused borders and corners 😅.
I use Framer Motion as my primary animation library. It's specifically developed for React, and It's easy to implement declarative animations effortlessly. It has built-in layout transitions, gestures. It comes with all HTML and SVG semantics, and it seamlessly blends in with Stitches JS.
I primarily choose Vercel because of its simplicity in handling the complex hosting and continuous deployment process that goes into any frontend & backend development. With Vercel in place, I don't have to worry about my development lifecycle. Everything just works!
What About the Source Code?
At the time of writing this article, my site is not open source. But I do have a near-term plan on making it open-source*, but not right now. Until that, I promise I will write articles for selected component in this blog. So stay tuned.
I have a long-term plan to roll out high-quality content on this blog. And I believe NextJS will allow me to do that for quite a long time. Until that, I will keep on writing and adding features to bring delightful experiences for my readers using my existing stack.
Thanks for reading.