What is Next.js and why did we use it for a landslide risk application?
Next.js is a framework that enables web-based applications to include fast-loading functionalities like server-side rendering and static pre-rendering. We recently made the technical decision to use Next.js when building a decision-support tool for conveying landslide risk to Sitka, Alaska. In Sitka, Alaska, landslides represent one of the most harrowing effects of climate change. In 2015, Sitka experienced a series of fatal landslides which ignited local and national action to address how to best keep communities safe and informed.
In order for the landslide risk application to be effective in every scenario, the information and resources it generates must be fully available to all Sitkans – regardless of their cell phone signal or other environmental factors. During the application’s discovery phase, this accessibility remained a priority. Due to the remote nature of the region, we worked to discern a method to send users application information in a small “packet” to make it more likely that they will be able to successfully receive updates.
React vs. Next.js and the argument for static HTML export
We aimed to build a static site for Sitka where all data could be stored on a simple server without worrying about databases or other moving parts. We wanted to build an effective, fast application using a single HTML file that includes all content and CSS needed to view the page.
Pre-rendering charts and loading data
Injecting critical CSS
Critical CSS is the style information needed for content “above the fold” on the site. By injecting Critical CSS into the HTML, Next.js pre-rendering is able to ensure that the page has the CSS it needs to format the page without depending on a separate dependency. This capability of automatically inlining Critical CSS is unique to Next.js and vital to the success of our landslide application.
This library is crucial for a web-based tool that needs to deliver information in time-sensitive situations. Although in this scenario Next.js was a good fit due to the remote location of the users, this tool is a good choice in any situation where fast load times are paramount. To connect with our team about how we can generate a comprehensive and responsive application to fit your organization’s needs, contact us here.