Cam's
Weekly Blog

A Journey Into Next.js 13 & Sanity v3

So what did I get up to in the past 7 days? After finishing my portfolio website (using Typescript, TailwindCSS and React), I wanted to keep the ball rolling; I wanted to learn how to implement a headless CMS (content management system) into a website, in addition to learning more about Next.js 13's brand new features. A blog site seemed like the perfect project idea to incorporate these two aims. Not only that, creating this blog provided me with a platform to talk about programming content; a platform which will be used as means to keep up my progress as a developer and to discuss future project plans and projections. I also want to thank Sonny Sangha for all the helpful tutorials on Sanity and Next.js.

Technologies Used This Week

• React.js
• Tailwind CSS
• TypeScript
• Sanity v3 (Headless CMS)
• Vercel (Hosting)
• Next.js 13 (Static Site Generation)

In terms of the technology involved, I built a fully responsive website using React.js and Tailwind CSS. After completing two semi-large projects using Tailwind, I am feeling far more confident with using it and am thoroughly enjoying how the framework feels - it makes the design process much more speedy and efficient. For the blog content, I went with Sanity v3 as my headless CMS of choice. It allowed me to store all of my blog posts in a backend system where I had to learn how to use the GROQ query language to fetch the blog post content that had been made available via Sanity's public API. I also customised the initial sanity studio and used Authentication to allow access to only a certain number of members. Due to the amount of clear documentation, this was all made relatively easy.

Using a headless CMS (Content Management System) has many positives for web developers and content editors alike. A headless CMS separates the content from the presentation layer, allowing developers to build custom frontend applications using any programming language or framework. This means that content editors can manage content without having to worry about how it will be displayed on the website or application. With a headless CMS, developers have greater flexibility and control over the frontend design and can create more dynamic and personalized user experiences. Additionally, because the CMS is separate from the frontend, updates and changes to content can be made more quickly and without the risk of breaking the frontend design. Overall, using a headless CMS can lead to faster development times, greater design flexibility, and a better user experience.

On top of this, I used Next.js 13 to statically generate the website and to make use of the new Next.js App folder structure. I took advantage of server components alongside client-side components and learnt how to set up page routing dynamically. Next.js 13 now also includes a built-in image optimization feature that allows for faster loading times and reduced data usage, especially on mobile devices. Another great feature is Incremental Static Regeneration (ISR), which allows for faster page updates and improved SEO results. With ISR, Next.js can update pages on the server-side without the need to rebuild the entire site, resulting in faster page load times and a better user experience.

I also decided to use TypeScript to type check my code and to make sure that I was using the correct data types. Lastly, the site is hosted on Vercel - the creators of Next.js. For those interested in what Sanity studio looks like for administrators, here is a screenshot of the headless content management system (CMS):

Roadmap

This blog will be updated on a weekly basis, keeping a physical diary of everything I have learnt so far. In terms of improving the blog website, I have made it possible to add other members as administrators - it would be fun to have other developers add a blog or two of their own to the website. On top of this, I have been thinking about implementing a light/dark mode toggle for the app. If you would like to contribute, feel free to contact me!

Future Project Ideas

One of the reasons why I wanted to learn a headless CMS was due to my sister needing a photography portfolio. I used this as means to test and practice using the technology to see whether it could be implemented in the photography website. Now I have got to grips with Sanity, using it will make it much easier to add additional photographs and text without the need of me having to hard code it.

On top of this, I am very much interested in creating more projects with Next.js as the server-side rendering and static site generation - in addition to all the other additional features that are provided - were enjoyable to learn and potentially very useful for possible future projects. Next week, however, I plan to learn more about Redux (a state management library for react.js applications) and data fetching via the GPT API.