Back to square one!
Written by: Randy MS
Date: 20/1/2025
Important Disclaimers
- The purpose of this article is to share my personal conclusions and perspectives on returning to Next.js (React) and Sanity to update my personal website.
- These thoughts focus exclusively on reviewing Static Site Generation (SSG) and Incremental Static Regeneration (ISR), without covering any additional features.
Recap
It’s been a while since I last worked on my personal website/portfolio. The last time I committed to the project was back in 2023, when Next.js v13
was the current version. Throughout 2024, I kept an eye on releases from Vercel and Next.js. I even started updating to version v14
in June 2024 but couldn’t fully pursue my goal. Now, as a Senior Software Engineer, I’m sharing my personal journey of achieving the update to Next.js v15
.
The initial goal of my website was to showcase my skills and what I could bring to a company. However, as I’ve grown professionally, my perspective has shifted. I now see this project as a reflection of my personal growth—a way to document my journey and everything I’ve achieved.
Originally, my portfolio was a static site designed to display my information and contact details, using SSG (Static Site Generation). Later, I added a blog and decided to integrate Sanity as a CMS, shifting to ISR (Incremental Static Regeneration).
Here’s a quick summary of these terms:
- SSG (Static Site Generation): Pre-renders pages at build time, creating static HTML files.
- ISR (Incremental Static Regeneration): Combines the best of SSG and SSR (Server-Side Rendering) by allowing static content to update without a full rebuild.
👉 I encourage you to read this article for more on these concepts: The Ultimate Guide to SSR, SSG, ISR, and CSR in Next.js: The Fun Way to Learn the Next.js Alphabet Soup.
The flexibility of Next.js to create combined websites is truly impressive. And now, with version v15
, its capabilities feel even more powerful.
Update
The update process took about six months, starting with v14
and eventually moving to v15
. It was relatively straightforward for two reasons: (1) the small size of my website and (2) how organized I was when first building it. Many of the patterns I "created" and applied in earlier versions of Next.js are now standard in v15
, making the adaptation process faster.
Next.js now works with React v19
, which truly makes the framework shine. The improvements in data fetching, the use of server components, and the pragmatic configuration of complex logic are game-changers. The speed of hot reloads is fantastic. Additionally, deploying seamlessly to Vercel’s cloud and leveraging their CDN is an incredible experience.When I built my website using Next.js v13
, I had already adopted the /app/
directory structure. Because of this, I didn’t need to follow extensive update guides to transition to versions v14
and v15
. I primarily relied on the Next.js Docs and YouTube videos with live examples to understand the new features. However, I strongly recommend the following resources for anyone planning an update:
- Version 13: Upgrading from 12 to 13
- Version 14: Upgrading from 13 to 14
- Version 15: Upgrading from 14 to 15
- Upgrading to Next.js 14
With the updates, I was able (and somewhat forced) to adopt Next.js’s new approach. For example, all my "pages" are now server components. When I need to use React, Next.js, or third-party hooks, I abstract them into separate components and mark those components as CSR (Client-Side Rendering) using the use client
directive. This allows my pages to remain server-rendered, while keeping my components modular and independent. Additionally, metadata (SEO-related functions) can only be used with SSR, ISR, or static pages, which reinforces this structure.
This time around, I leveraged the built-in metadata and SEO functions that Next.js offers. Instead of manually adding meta tags or scripts for metadata and Google Analytics, I used Next.js features to create:
- Dynamic metadata for my articles (e.g., this one).
- Files like
robots.txt
,sitemap.xml
, andweb.manifest
using a reusable, pragmatic approach.
I also integrated Google Analytics and Tag Manager without using next/script
. Thanks to @next/third-parties/google
, I now have a built-in component where I simply add my ID, making my website fully accessible and compliant.
On the topic of Google, I also utilized @next/font/google
to preload Google Fonts. This prevents layout shifts during font loading and improves the site’s accessibility and performance.
Summary
Below is a quick summary of my experience with the update.
☑️ Pros:
- Ease of Updating:
The update was straightforward because I already followed many Next.js best practices, making the transition seamless. - Pragmatic Solutions:
Next.js now offers built-in solutions for many features. This eliminates the need for custom components or logic, saving time and effort. - /app/ Directory:
The introduction of layouts,not-found
pages, suspense, and fallbacks adds structure and flexibility. - Extended Fetch API:
The improved caching andrevalidate
functionality make data fetching more efficient. - Hybrid Rendering:
The ability to mix CSR, SSR, ISR, and SSG components/pages is incredibly powerful. - JavaScript Support:
While I use TypeScript at work, I appreciate that Next.js continues to support JavaScript, which I prefer for personal projects.
🛡️ Cons:
- Limited Resources for New Features:
Some new features lack sufficient examples and documentation online, which occasionally left me uncertain about the best implementation practices. - AI Support Limitations:
Tools like ChatGPT and GitHub Copilot aren’t always updated with the latest Next.js releases, making their suggestions less reliable for new functionality. - Image Component:
I’ve always found the Image component challenging to work with. While it’s powerful, I believe there are other solutions that could work just as well. - Frequent Updates:
Next.js evolves quickly, which is great, but the frequent breaking changes make it challenging to keep up, especially when upgrading multiple versions.
There’s still so much to learn! As I mentioned earlier, my website is small, minimalist, and simple. One uncommitted goal I have for this year is to continue writing and expand the blog. However, I may also experiment with other features that Next.js offers, such as API routes, authentication, preview mode, and redirects.
I’m eager to push myself further. This framework excites me every time I sit down to work on it.
Extra Updates && Final Notes
One of the biggest highlights of this update is embedding my Sanity CMS Studio directly into my website. Now, instead of managing two separate sites, I can manage all my website data from a specific route on my own site.
Tailwind CSS has also been updated, and I’ve retained the same design approach I used when I first built my website.
Cheers,
Randy MS
Image: Thanks to Ravi for the construction image below!