Recently our development team jumped into the exciting world of Next.js. We’ve had a few of our Web projects requiring dynamically loading content, SEO growth and page performance. Based on these requirements we’ve delved into the world of Next.js
In this article I wanted to chat about our learnings and why we've found it so important to leverage this powerful tool with our web development projects in 2022.
Next.js is an open-source JavaScript framework (Although we use TypeScript) that is used to build Single Page Web Applications (SPA), which are usually custom-built using a framework such as React.js or Vue.js. Our in-house development team is fairly systemised when it comes to frameworks and heavily focus on TypeScript and React.js.
Next.js is a framework that makes it easy for developers to build applications that are faster and more visible across the web. We're currently building out a few different custom web projects and historically our web apps have been purely SPAs that are only accessible via a single source e.g. the ‘Login’ button on a sales website. These sites haven’t tended to need extensive SEO or server side loading (more on this shortly).
However, as we continue to grow our more recent projects are relying on dynamic content (Content that doesn't sit hard coded on the page but loads from a specific CMS or database) and visibility from an SEO perspective across all pages and content.
One of the key benefits to Next.js and our main reason for selecting this technology was server side rendering (SSR). SSR allows our developers to display dynamic content from the server in the browser rather than reloading page content every time it is loaded or updated. The main idea behind it is to render the HTML and CSS files in the server and then send it to the browser as a static. This is compared to a traditional loading pattern client side rendering (CSR) that renders all of this data in the client's browser rather than the SPAs server. Generally resulting in not only slower performance but also lower SEO rankings due the the way Google reads and indexes web pages.
In the last year, there has been a lot of articles, research and information about how to implement Next.js, and how to write your code in a way that is server side rendered. The actual implementation of Next.js is relatively straight forward but when it comes to building an extensive SPAs there is more than just Next.js to worry about.
A crucial aspect of building out any web application is content management and staging.
Content management allows users to update important information on a particular site. Just like how I’m using a CMS to write and upload this blog article without having to rebuild or upload our whole site. The second key aspect of a web applicating is staging. A staging environment allows developers to review, explore and test their website changes before an application goes live. This is absolutely fundamental in this day an age when it comes to testing updates across all different device types and sizes. Like many development agencies we usually leverage AWS services such as EC2, S3 and CloudFront for ous web applications. However, during our Next.js research, we found an even more streamlined solution to web app distribution and stage.
For our Next.js project, we’ve begun to leverage a platform called Vercel. A ready to go tool deliberatly built for fast development, simply deployment and easy staging environments. It easily integrates with our Github branching systems enabling our development to easily a quickly publish web updates across our different environments. Not to mention their built in analytics, ready to go Slack integration and extensive partner marketplace.
Now don’t get me wrong, Next.js isn’t required for every project. We still have traditional SPAs that don’t require the scalability of Next.js. Here are a few key points that help us in our decision making process:
- You want to maximise the SEO of your custom web application
- You’re building out a large number of content pieces or articles
- You want to leverage a CMS or database for dynamic content
- You have a large audience base and speed is key
- You want to quickly and easily setup staging
- Quick site deployment is crucial to the project
- You want to quickly build a web app prototype or static site
- Your application is for private or internal use
- You don’t rely on SEO for your sites growth or visibility
- You’re comfortable setting up manual hosting and staging (Not using Vercel)
- Dynamic content or continually adding new content isn’t required
As you can see, Next.js has our team super excited and it’s something we’ll continue to use with many of our Web projects. However, we’re always aware of developer bloat. Next.js isn’t required for all of our apps and if it doesn’t fit the scope, we’re not afraid to remove it. Explore Next.js and Vercel and we’ll love to hear about your experience!
.svg)
.svg){kind=logo}
