Back to square one!

Back to square one!

Written by: Randy MS

Date: 20/1/2025

šŸ“ø Image: Thanks to Ravi for the construction image above!

āš ļø 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:

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, and web.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:

  1. Ease of Updating:
    The update was straightforward because I already followed many Next.js best practices, making the transition seamless.
  2. 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.
  3. /app/ Directory:
    The introduction of layouts, not-found pages, suspense, and fallbacks adds structure and flexibility.
  4. Extended Fetch API:
    The improved caching and revalidate functionality make data fetching more efficient.
  5. Hybrid Rendering:
    The ability to mix CSR, SSR, ISR, and SSG components/pages is incredibly powerful.
  6. JavaScript Support:
    While I use TypeScript at work, I appreciate that Next.js continues to support JavaScript, which I prefer for personal projects.

šŸ›”ļø Cons:

  1. Limited Resources for New Features:
    Some new features lack sufficient examples and documentation online, which occasionally left me uncertain about the best implementation practices.
  2. 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.
  3. 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.
  4. 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

šŸ€