Using Next JS to Enhance Experience

I’ve never been one to ‘settle’ with technology. I always like to refine, redesign and push things further to deliver better digital products to clients. I endlessly research, test and develop with personal projects to see if new technologies actually are any better, or if they are just another buzzword.

Around two years ago, I started working with Next JS. I started working on a personal project, in which I wanted to deliver more than just a basic website. I was very much interested in delivering scalability, maintainability and some of the awesome benefits of using a front-end framework like React. The disadvantages of using React were that some of the pages I wanted to be publicly available, and therefore server readable. This was important for both SEO and usability.

Step in Next JS

Next JS is simply awesome. It provides the benefits of a JS framework, with easy-to-use server-side rendering. I chose to use it after researching heavily on what technology many big digital startups were using. It had received very good feedback in the industry, which gave it a big thumbs up from me.

Having now used Next for over 2 years, some of the things it allows me to do as a developer is just simply breathtaking. Having the power of a React application that can render server-side means I can create rich experiences that are responsive, dynamic and fluid. To anyone who may be interested in some of the advantages, here are some examples that allow for some awesome interactions:

Prefetch

The above allows for a page to be pre-loaded in the background, whilst a user is browsing a page so that there’s almost no delay on browsing through pages! This is simply mind-blowing, but freaking amazing for user experience. You can see a sample of this in action on the Zeit website here.

Server Rendered by Default

Now the user does not have to wait for your JS to load and gets a fully rendered HTML as soon as the initial request returns a response.

As the user doesn’t have to wait for the JS to load, Next JS will provide getInitialProps which allow you to load the data server side, and render the HTML upon initial request. This results in much better performance, fully indexable HTML (good for SEO) whilst giving you the advantages that React offers you in terms of speed and fluidity.

Perch Runway CMS Headless

In combination with Next JS, I decided to use Perch Runway as a headless API to power data. I wrote quite a bit of custom PHP to allow for a headless mode for apps like Members. It’s allowed for a structured API, with the amazing editing capabilities Perch offers.

I created a bunch of endpoints for a variety of reasons, but to give you Perch developers some inspiration, here’s a sample few:

/api/content/home

/api/collections/videos

/api/members/login

Having done some research, I opted to follow Perch’s naming conventions in terms of routing, just to keep data clear, simple and well structured. Breaking that down further, I passed in all my options via GET variables, like so:

/api/collections/videos?count=3

This gave me great flexibility and consistency with Perch custom content options, perfect for Perch developers.

Fluidity, UX & More

The advantages of using an SPA (Single Page Application) with SSR (Server Side Rendering) are quite obvious. Marrying the speed and user experience can be dramatically improved by more rich transitions, interactions and loading experiences. It allows the platform to feel like a platform, rather than just a static website, which is very powerful in its own right.

Summarising

I’ve been amazed by the things I can create very quickly with Next JS. It’s allowed me to become more dynamic with my user experience journeys, whilst being confident I can scale a website with ease. It’s also been a bit of a learning curve, but much easier than I thought it would be prior to getting stuck in.

I’m launching a project later this summer, built on Next JS powered by a Perch Runway backend. I can’t wait to share it with you guys.