
Awhile back when I was reading up on [TkDodo's commentaries of react-query](https://tkdodo.eu/blog/practical-react-query), I noticed that TkDodo's blog has a nice comments section that looked very familiar. Upon closer inspection, I realised it was a widget called [Utterances](https://utteranc.es/), which allowed comments to be stored on a GitHub repository's issues.

This was neat for a fully static blog like mine, where I just don't want to host a database somewhere just to store comments. So I decided to try adding it to my built-time generated blog.

The setup was straightforward, I simply fill up the form in the `configuration` section, and it populates my input into the `<script>` tag below. I thought it would be a straightforward copy-paste, but TypeScript came complaining about `repo` being an invalid attribute for the `<script>` tag.

I looked around GitHub for React implementation or integration of Utterances, and found these two:

- <https://github.com/wicksome/utterances-react/blob/master/packages/component/src/Utterances.js>
- <https://github.com/b6pzeusbc54tvhw5jgpyw8pwz2x6gs/react-utterances/blob/master/packages/component/src/ReactUtterances.js>

So the trick was to dynamically assign the special attributes (like `repo`) to get by TypeScript complains for `<script>`. Along the way, I encountered the issue of the injected `<script>` tag being removed while the `<iframe>` tag as being injected asynchronously via `insertAdjacentHTML` (See [line 77](https://github.com/utterance/utterances/blob/36695bf89ffb2ea10eaa26f1b5cbc90477704b9f/src/client.ts) of the utterances source code).

My solution? To enable proper re-render of the Utterances widget, [I wrote a copy of the component](https://github.com/mauris/mauris.github.io/blob/main/apps/main/components/Utterances.tsx) taking references from the two other implementations mentioned above. My implementation takes care to track the number of script instances being loaded, and once the last instance has loaded, it will remove all duplicated instances, leaving only the last "up-to-date" instance in the DOM. This works neatly with changes in the site theme and current post.

I was quite pleased at how easy and straightforward Utterances can be integrated to provide comments and discussions into static sites. I hope to hear from people who's come by to read what I've written and give their thoughts too.

Thank you to the folks behind [utterances](https://github.com/utterance) for making the comments widget that made sense.



It's been many years since I last blogged anything, especially on programming, software engineering and tech.

Watching [Yang Shun](https://github.com/yangshun)'s GitHub activities, I couldn't help but notice that he's been dabbling with _Next.js_ - a name that I came across occasionally but never really looked into seriously. Since I had some time on hand this week, I took the opportunity to read up and understand what Next.js was trying to achieve.

# Solving Common React Pain Points

As I dug, it turned out, Next.js was already solving common problems that I often encounter when building React apps:

- Deciding how files, pages, components are structured in the project folder
- Deciding how routing is done (despite everyone's using `react-router`, there's variance in flavour and how routers are structured)
- Deciding how code is transpiled (e.g. configuring Webpack, TypeScript etc.)
- Figuring how to do Server-Side Rendering (SSR) right
- Figuring how to get asset optimization done right

Next.js, as a framework, has structured and simplified the development workflow to get web developers straight into building the app.

# Learning Next.js

For me, the [tutorial](https://nextjs.org/learn/foundations/from-react-to-nextjs) was easy to follow as I had some background in React. If you only have experience in vanilla JavaScript, the [tutorial comes with steps](https://nextjs.org/learn/foundations/from-javascript-to-react) to help you get up to speed.

Once I was through with the tutorial, I figured that I'll try out Next.js by creating a blog that's similar to the tutorial, yet incorporating some of the niceties I'm familiar with, like:

- [Yarn Monorepo](https://semaphoreci.com/blog/javascript-monorepos-yarn-workspaces) - breaking down apps into reusable and composable packages sparks joy. In my blog's monorepo, I have two types of workspaces: `apps` and `libs`
- [TypeScript](https://nextjs.org/learn/excel/typescript) - I find typings help with santiy checks and sometimes make code easier to read
- [Tailwind CSS](https://tailwindcss.com/docs/guides/nextjs) - I could have gone with [MUI](https://mui.com/), but at this point I find it simpler to just have utility CSS classes rather than importing a full blown component library. I also like how Tailwind CSS makes it easy to incorporate dark/light theming
- [Sass](https://nextjs.org/docs/basic-features/built-in-css-support#sass-support) - expressive CSS rules, which goes hand in hand with CSS Modules in Next.js

# Additional Resources

After spending about 3 days on it, I was able to piece together [the blog](https://github.com/mauris/mauris.github.io) you see here, with much thanks to the following resources:

- The full tutorial to create a Next.js app: <https://nextjs.org/learn/basics/create-nextjs-app>
- An example of how to setup a monorepo with Next.js: <https://github.com/belgattitude/nextjs-monorepo-example>
- [Julia](https://bionicjulia.com/) gave some guidelines on setup (picked up `react-markdown` and `react-syntax-highlighter` from here, without having to explicitly write code to parse Markdown using `remark`): <https://bionicjulia.com/blog/setting-up-nextjs-markdown-blog-with-typescript>
- Guide on using GitHub Pages to host the exported Next.js app as a static webapp: <https://wallis.dev/blog/deploying-a-next-js-app-to-github-pages>
- Using `next-transpile-modules` to ensure workspace dependency packages/libraries get transpiled properly: <https://www.npmjs.com/package/next-transpile-modules>
- Using GitHub Actions to magically update GitHub Pages `gh-pages` branch whenever there are changes made on the `main` branch: <https://gregrickaby.blog/article/nextjs-github-pages>

# Conclusion

I must say it was quite a joy to work with Next.js and it took away some cognitive load I mentioned earlier. With that, I might continue working on more features for this blog (e.g. pagination, search) in my free time. Hopefully this will encourage me to write and reflect more upon my software engineering career and journey.


Sam's Blog

Next.js + TypeScript in a Monorepo