Overview
Moonlight Jet is a Swiss-based private jet charter brokerage company. Among its values, you can find Swiss reliability, pinpoint precision, confidentiality, and high standards. Chop-Chop was chosen to deploy a website using WordPress and Next.js.
Headless WordPress with Next.js
The WordPress market share is astonishing. Among content management systems (CMS). As for September 2022, WordPress covered 43% (or by other sources even 62%) of the entire market, while the competitive WIX had a stake of about 3%. WordPress provides a great editing experience for clients, it is easy to use and has a lot of plugins to use with.
Meanwhile, the new trend of headless solutions is gaining momentum. If you would like to still use WordPress but go headless, the combination of WordPress and Next.js as Jamstack may do the work.
With Representational State Transfer (REST) API as well as GraphQL API, you can get headless WordPress. In this case, you divide the front-end and the back-end. While WordPress will act as a back-end, you will need a framework to build your front-end. It is when Next.js pops in.
What is Next.js?
Even if you are familiar with services such as Hulu, you may not know, that it was built with Next.js. It is a framework provided by React community. Joining WordPress with Next.js is becoming a common practice when going headless. In this case, Next.js provides JavaScript and WordPress with the REST API.
Headless environment gives more flexibility and resilience. Even if you experience downtown on your WordPress server which stores your back-end, the front-end will still be serving the traffic without interruption. It is also easier to update content without cutting in developers' work.
Why should you decouple WordPress?
When WordPress does the whole front-end + back-end job, some tasks can take a while to perform. When you hit a particular URL, every request needs to go back to the server. Then PHP creates the files and other requested things and sends them back into HTML form. In the decoupled approach, JavaScript prebuilds and renders it before the user’s request. It lands in the CDN (Content Delivery Network) in the form of a static file. As there is no going back to the server, the website can work very fast.
Having a hidden back-end it makes your website more secure. Potential hackers have a smaller plot to attack.
If you are looking long-term and would like to have your website's front-end UI future-proof, going headless is the action to consider. You don’t know what will be the best source of traffic in the future. What kind of touchpoints will be the most attractive for users? Having your front-end decoupled, you don’t have to worry about it. It will be easier to use some changing APIs, than having to act with tons of plugins, that may become out of date.
Moonlight Jet and Chop-Chop
The cooperation between Chop-Chop and Moonlight Jet started in August 2022. The website was designed by Stefanie Wolf, but there was a need to find an agency with Next.js skills on boards.
Fast and seamless
The goal of the website was to make it work fast and seamless. When the front-end works independently of the back-end, it is important to support the plugins, which will not necessarily work properly after decoupling. This is why we have rewritten them for the needs of the Moonlight Jet website.
Support for plugins
One of the plugins worth mentioning is the Contact Form, which in this case plays the role of journey planner.
Moonlight Jet provided the list of airports it can operate from, along with ICAO codes, a four-letter code designating aerodromes around the world. When a user starts typing the name of the city, if there is an airport, it will pop out. We have also added a dynamic form that allows you to add more destinations while filling out the form. The customer can also add additional airports to the list in a very simple way.
Making the animation
One of the most time-consuming processes was preparing the animation. If you click an object on the website, you will see the icon of an aircraft flying away and going back in the background after a while. Also, the airplane visible in the center part of the page is slightly moving while you keep scrolling the page. Using Next.js to prepare animations was way easier than having to cope with PHP on WordPress.
Final result
After about two months of development, the website was ready for testing. We made some minor changes and since February 2023 the Moonlight Jet website has been live. Along with the development, we also helped with hosting, and provide support and maintenance services to keep the website in the best condition.