Salute folks. For a while now, I have wanted to create a personal blog where I can share my experiences with others and keep an organized document of what I have learned or discovered. Although it is not completely finished, I have completed most of my blog. I will share with you the technologies I used while developing this blog and my experiences as a developer. First of all, here are the technologies I used.
- Next.js 13 ve App Router
- Sanity CMS
- Next-auth
- MongoDB
1. Next.js 13 and App Router #
I had already tried Next.js 13 in a few projects before this one. App Router allows the application to be scalable. Also in this project, I needed a language select component with both dynamic and static links because I wanted the SEO scope of the project to be very wide. Previously, for my dynamically generated blog posts, I had used the same url for different languages as en/a-post-slug, tr/a-post-slug and de/a-post-slug, but for a better SEO experience, in this project, I was able to create the relevant translated page of an en/a-post-slug page as new static pages with en/a-post-slug and de/eine-post-slug links. I shared with you how I solved this problem here. At this point, Next.js 13 made it very easy to use different layouts to create different groups of pages. Finally, it was a nice experience for me to develop another project with RSC (React Server Components) and Next.js App Router. The biggest issue that I easily solved in Page Router but had difficulty in App Router was localization, that is, in-app language options. At this point, the i18next library and this link were useful, but at some points a Page Router API, useRouter from 'next/router, would have made my job much easier. Also, error handling can get a bit complicated when you use the App Router [locale] dynamic folder. You can have more ideas about this by checking this issue on Github. With the server components, locale started to turn into prop drilling at some point. However, I am sure there are much easier methods. After installing the localization structure in the application, I found an easier example in one of the official repos of Next.js and I plan to install this structure in the future to reduce package dependency and make the code cleaner. You should definitely review the official repo from this link.
2. Sanity CMS #
My adventure with CMS tools started with Gatsby.js and Netlify CMS. Then I discovered Contentful CMS while looking for a Content Management System that supports multilingual structure in my company and I developed 2 big landing pages of the company integrated with Contentful CMS. Contentful CMS has very rich tools both in terms of content editor and developer experience, but the rich text editor does not support custom code blocks and I wanted to use and edit code blocks on this blog. Another problem is that Contentful's free plan only allows 2 languages. However, I wanted 3 (for now) language options on my blog. While looking for a free CMS tool that would fulfill this requirement, I came across Sanity. The great thing about Sanity is that it supports multiple language options for free. In addition, you can define the schemas of your content in your code and develop a type-safe application. I post all my posts on this site, including this post I'm writing right now, from Sanity's admin panel.
Sanity offers 2 types of translation options. The first option is field based translation. In summary, if you have a field called name in a document, you have as many inputs for it as n (n represents the number of language options here) languages and you need to filter from these fields according to your current language while querying your document. This document is very useful if you have a few fields in your schema, but as your schemas grow, it becomes a bit difficult to see and organize n inputs for 1 field in a single document. I explained the details here. The 2nd option is document based translation. In this method, you can create different related language documents for each document and in your query you create for your data, you can retrieve a document and the fields you want from documents in other languages related to that document. This is a much easier method as your schema grows. However, I think it is best to use both methods hybrid. For example, you have a limited number of fields when pulling your about page from the document. At this point, you can use field-based translation, but if there are too many fields in your blog posts that you cannot manage individually, you can use document-based translation. The best and worst feature of Sanity CMS is that it uses a query language called Groq. It is very useful but it takes your time because it requires a new learning.
3. Next-Auth #
Next-auth is a great npm package. I wanted to add an area on this site so that you, the readers, can post comments. I used this library and GoogleProvider, one of the dozens of auth provider services it provides, so that you can log in with google while posting comments. With this package, you can log in securely with your Google account, comment under my posts, ask questions and interact with me. Leave a comment :)
4.MongoDB #
MongoDB is my favorite database for many projects thanks to its easy installation and generous free package. In this project, I'm using MongoDB to store user comments. Although I'm currently trying to learn Prisma and Sql, I think MongoDB is always useful on a small scale. I store your comments in MongoDB. Below I shared how I'm saving your comments using Next.js api routes. Your comments. Your comments...
To summarize, this project started as a simple blog and has taught me a lot while adding something to it every day. Every day, I will try to share my experiences with you while continuing these and many more new developments. I would be happy if you share any comments, criticisms or feedback with me. Thank you for reading :)
