A Decision Making Framework For Upgrading To Next.js (v13+) App Router (Part 4/4)

Previous article in series.

If you've been following along in this article series about Next.js v13+, App Router, and React Server Component technology, welcome back. So far we've covered the technical advantages, their business impact, and a illustrative example that showed the hypothetical benefits of upgrading your companies Next.js stack to use these new technologies.

In the final article of the series, we'll be going over a decision making framework that I'm offering to give your team the tools to understand whether or not utilizing this new technology for your business makes sense.

Assessment of Current Infrastructure

To understand if upgrading to Next.js 13/14 is right for your business, start by assessing your current website or application infrastructure. Consider the following:

1. Performance Metrics: Analyze your current Core Web Vitals scores, page load times, and server response times. Use tools like Lighthouse, Google PageSpeed Insights, or Web Page Test for a comprehensive analysis.
2. Technology Stack: Review your current tech stack. Is your website already built with React? Are you using an older version of Next.js, or a different framework altogether? What are you major development libraries or SDKs? Do they have any documentation or support for React Server Components? How many custom or private SDKs are you utilizing that might need to be manually updated as well?
3. Maintenance and Scalability: Evaluate the ease of maintaining your current setup. Are there recurring issues that require developer intervention? Having a stable base upon which to build can greatly improve the migration process.

Identifying Business Needs

Reflect on your business goals and how a website impacts them:

1. User Experience and Engagement: Does your current website offer the best possible user experience? Consider load times, interactivity, and visual stability. Are there any social proof points or complaints out there that could factor into your understanding of your users perception of your site and brand? Consider using tools like Microsoft Clarity to view things like session time, rage clicks, quick backs, bounce rate and other things that point to user dissatisfaction.
2. Revenue Goals: How does your website contribute to your revenue? Do performance improvements have the potential to increase sales or ad impressions? Do you have any historical data that can be mapped to site improvements to help bolster your case? Many times conversion events can be mapped to a reliable revenue impact. With that in mind its possible to use a comp case study to set your performance goals and map them to metrics that will impact revenue in the end.
3. Market Position and Competition: How does your website compare to competitors in terms of technology and performance? Are you leading, on par, or falling behind? Use tools like https://econify.com/performance or similar performance compare or monitoring tools to compare yourself in your industry.

Risk Assessment

Identify potential risks and plan how to address them:

1. Compatibility Issues: Will your current dependencies and integrations work seamlessly with Next.js 13/14? How many of the UI SDKs you use have documentation on React Server Components integrations or support? What custom built framework modifications have you built? Are the engineers responsible still available for consultation for this migration?
2. Learning Curve: Is your team prepared to adapt to the new features and changes in workflow? Do you have bandwidth in the team to allocate to learning days or demos? How much experience is there on the team in some of the older concepts the newer technologies are starting support.
3. Resource Allocation: Do you have the necessary resources (time, budget, personnel) to manage the upgrade process? (See Cost Benefit Analysis for more on this)

Implementation Plan

Develop a step-by-step plan:

1. Pilot Testing: Begin with a small, non-critical part of your application to test the waters. Pick a single page with enough traffic and revenue generation to be statistically significant when reviewing results.
2. Team Training: Ensure your team is up-to-date with the latest features and best practices in Next.js 13/14. We recommend creating a slack channel (or your companies equivalent) dedicated to collaboration among engineers as they go through their own learning process. It is also recommended to share resources or have a centralized repository of all the key resources most applicable to the team. The Next.js documentation site should be chief among them, but outside articles, youtube videos, etc. will also prove invaluable.
3. Gradual Rollout: Implement the upgrade in phases to minimize disruptions and allow time for adjustments. One potential strategy for being data driven is to implement an A/B testing framework or traffic split rollout of the new page that is being migrated. This strategy paired with analytics can help you continue your migration business case. It’s important in this rollout to consult with a development team that is experienced migrating pages with existing valuable SEO rankings.
4. Performance Monitoring: Continuously monitor performance metrics during and after the upgrade to measure impact. Use tools that automate these procedures and take snapshots of the performance over time. They can be external website performance monitoring tools, as well as tools that integrate directly with your CI/CD (i.e. This Github Action)
5. Feedback Loop: Create a system to gather feedback from both users and developers to guide future improvements. Perform regular retrospective sessions specific to the team implementing Next.js. Doing a retrospective particular to this migration can help you iterate and complete future page migrations in the future.

Conclusion

To sum up, upgrading to Next.js 13/14 is not just about keeping up with technology—it's about unlocking a new realm of possibilities for your online presence. Imagine your website loading in the blink of an eye, climbing search engine rankings, and captivating your audience like never before. This upgrade is an investment in a faster, more efficient, and future-ready digital experience.

Now don't get me wrong, major technology upgrades are not all sunshine and roses. There's plenty of evidence online of a lot of strife around this particular recent technology. Earlier on in the release, there was quite a few bumps and fundamental problems to fix by the Next.js internal team.

However in recent updates, they have largely stabilized the major features

With that in mind, it's my opinion that this technology should be widely adopted at this stage of the game. There is tangible benefit and stabilization of the supporting features as a whole.

That's the end of this series on the business impact of Next.js. Let me know what you think and feel free to get in touch with me if your company is thinking, or in the middle of a migration. I would love to hear your experience and share some of my own.