mtaku3.com

The website (mtaku3.com) is a portfolio site developed with Next.js 14 and TinaCMS.

It adopts the App Router implemented since Next.js 13, emphasizing optimization in its development.

Benefits of Next.js 13/14

Previously, the site was implemented using the Next.js Pages Router and utilized microCMS as the CMS. However, due to personal preferences, especially dissatisfaction with the usability of microCMS, there was a desire to develop a new portfolio site using TinaCMS.

At that time, Next.js 13 was released, introducing the App Router. Although the concept was significantly different from the Pages Router, it served as an opportunity to re-implement the site from scratch. The main impression of the App Router was its strict approach to rendering and fetching compared to the Pages Router. The separation of fetching between Server Component and Client Component added complexity to the implementation.

While the update is considered beneficial in terms of optimization, the difficulty lies in the fact that it has become challenging to implement changes promptly for solo developers like myself.

Migrating from Pages Router to App Router doesn't seem straightforward. Therefore, initially implementing with Pages Router and later transitioning to App Router for a thorough implementation appears to be unrealistic.

Parallel Routing and Intercepting Routing - What are they?

Now, regarding the benefits of the App Router, aside from optimization, two features I particularly liked are Parallel Routing and Intercepting Routing.

In essence, Parallel Routing

  • Parallel Routing is an attempt to display multiple routes on a single page.

Intercepting Routing

  • Intercepting Routing is an attempt to display different pages when transitioning between routes and when directly visiting a route.

I have implemented these features, utilizing them for displaying previews of pages, such as in the project list on the site. (For instance, transitioning from the project list to the detailed view occurs in a modal, while directly visiting the route displays the entire content.)

Why TinaCMS? 🧐

I was captivated by TinaCMS's Visual Editing and decided to migrate. The experience has been quite convenient, but the only inconvenience I felt was the inability to preview new document creations during the initial documentation phase. TinaCMS Visual Editing