Spotlight: Next.js

by Matt Beck

Next.js is a modern framework for React that supports static and server side rendering out of the box. By implementing a hybrid of these technologies as well other optimisations such as pre-fetching and bundle splitting, it's possible to create extremely quick and responsive websites. I will explain, in some level of detail, what I think are the best bits, and how in my opinion Next.js is the future for Ambrose Fox.


Let's start off by talking about the main selling point of Next.js, static and server side rendering. Next.js compiles pages at build time by default, meaning when a client makes a request, the page is ready to go and instantly served. If the page contains data that needs to be fetched from an external source, the data can either be fetched at build time or when the page is requested depending on how often the data changes. This enables you to create a hybrid approach and ensure response times stay as low as possible.





By implementing an optimised bundle/code splitting algorithm developed by the Google Chrome team, Next.js ensures that the smallest amount of HTML/JavaScript is getting sent to the client. This keeps response times down and means there is no large bundle to download and cache when first visiting the site.


File System routing is a key feature and removes the need to manually create routes. All files and directories under the root pages directory are automatically mapped to a route. Next.js also supports dynamic routing, essentially creating static pages from a function or request to an external endpoint.


Pre-fetching is another smart innovation and makes navigating via internal links blazingly fast. By scanning all the links on a page, the server can have those linked pages ready for when you decide to click on one. 


Developers are able to dynamically change the head meta tags for each page as well as set default tags to be included on each page. This fine level of control combined with SSR and file system routing, enables sites to be heavily SEO optimised, something that would take a lot of effort to set up in vanilla React.


Built-in sub-domain and domain routing along with automatic language detection makes creating internationalised sites easier then ever. By assigning each domain a locale, Next.js can make pages aware of which locale to use to serve translated pages to the end user.


Finally, I will touch on the fact that as well as serving static pages, API endpoints can be defined. Support for middleware, REST and GraphqL, sites that were typically spilt into two services, a front-end UI and back-end API, can now run as one. I believe this feature is more useful for smaller blogs or e-commerce sites where separation of concerns is not such a big deal. 


Overall, I believe Next.js will allow Ambrose Fox to develop dynamic and superior platforms in less time.

More articles


 

Streamlining Clinical Waste Disposal

Co-ordinating a fleet of drivers and managing the safe disposal of clinical waste is a logistical challenge. Clinical Waste Solutions have chosen Ambrose Fox to develop a tailor-made business management solution to streamline operations.

 

EWT Purchase Order System

Ambrose Fox has developed a Purchase Order System for our client, English Woodlands Timber.

 

3M PDF Translator

We built the PDF Translator for 3M to help manage multi-language campaigns.