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.
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.
English Woodlands Timber: E-commerce
EWT's Stock Search Tool allows customers to select and pay for items through to checkout.
Veterinary Specialists Scotland: Website Launch
The success of our Anderson Moore’s website inspired the owner to ask us to create a website for their new veterinary referral hospital.
Meet the Team: Q&A at the Coffee Machine with Matt Beck
Ambrose Fox would like to introduce our Lead Web Developer, Matt Beck.