okNEXT — Your Next Solution for Web App Performance Monitoring!

Phoebe Ermert
3 min readDec 1, 2022

--

What is okNEXT?

okNEXT is an open-source tool that graphically displays health metrics for Next.js or React.js apps. With okNEXT, you can easily view current health metrics and compare them to previous measurements acquired from Google Lighthouse, while having access to relevant suggestions for webpage improvement based on your application’s performance. okNEXT takes the guesswork out of an application’s efficacy and future enhancements by making metric trends and behavior easy to understand and visualize, improving the developer’s overall experience in application progression and development.

Why monitor your application’s web metrics?

Analyzing your application’s web metrics is important because they can improve different areas of your website. For example, some web metrics can help you find errors presenting on your site, like if a webpage isn’t loading or if different functionality is broken for a user. Other web metrics can help you improve accessibility by depicting where visitors spend the most time and how they’re interacting with your website. All of these characteristics can have an impact on your application’s overall health and ability to thrive, which can directly affect your business or product.

okNEXT features:

  • Dynamic data storage: Save previous and current metrics data from Google Lighthouse across multiple endpoints.
  • Health metrics data: Graphical dashboard display of health metrics for React.js and Next.js applications derived from Google Lighthouse.
  • Suggestions: Health metrics coupled with suggestions for application performance provides the user with guidance on how to improve their application.
  • Swift login ability with OAuth: Use your google login to swiftly and securely access our development tool to start monitoring your health metrics!

How does okNEXT work?

Our application uses React.js and Next.js frameworks to create flawless routing and data-fetching. A user can simply log in and input their desired application’s endpoint.

After selecting “get report”, a post request is fired off and our application sends a request to Google Lighthouse to fetch the relevant performance data. This data is first stored in our application’s secure database. If there are previously stored reports, those metrics along with the latest requested metrics are returned.

Upon the completion of the post request, the user will then be able to switch between health metrics related to overall application performance or specific Next.js metrics via dashboard display.

Conclusion:

We created okNEXT because we wanted to provide an open-source development-tool that would help guide developers through monitoring their React.js and Next.js web applications and understanding how to improve their performance metrics. We hope this tool can move the software-engineering community forward with faster and more agile web applications!

If you want to start improving your application, visit our page!

If you would like to contribute to okNEXT, please submit a pull-request on our Github.

Cheers friends!

Connect with okNEXT:

Vivian Odekhiran | Github | LinkedIn

Hua Liu | Github | LinkedIn

Lara Beesley | Github | LinkedIn

Phoebe Ermert | Github | LinkedIn

okNEXT | Website | Github

--

--