Case Studies

Navan Builds with Netlify and Next.js for Cross-team Collaboration

Case Studies

Navan Builds with Netlify and Next.js for Cross-team Collaboration

Navan’s software automates, personalizes, and simplifies an otherwise tedious experience: booking transit and filing expense reports. By focusing on providing an excellent user experience, they’ve grown into a worldwide company with over a $9B valuation. In order to build that exceptional user experience at all stages of the buyer journey, Navan’s web team recently migrated to a Jamstack architecture built with Netlify and Next.js.

At Jamstack Conf 2022, the Navan web team spoke about all aspects of their migration, including:

  • Why they made the decision to host their Next.js site on Netlify
  • How they balanced finding tools that work for the dev team and marketing teams
  • How they chose Contentful as their headless CMS

The Challenge: Free up engineering time to build better marketing sites

The web team behind Navan’s corporate site is lean. It’s composed of two developers– one fullstack and one frontend–as well as one designer and a web manager. Prior to their migration to Netlify, the team was frequently bogged down in work that they knew could be automated, and didn’t have as much time as they needed to build exceptional web experiences.

That’s why they needed a stack that would help them be nimble, and not have to fix server issues or make small copy edits to the site. As Kady Wood (Senior Director of Global Web Strategy and Experience) put it, the dev team needed “as little interruption as possible,” which is where Netlify helped them streamline their work.

Prior to the migration, Navan's corporate site was built with Ruby on Rails, hosted on Heroku with a homegrown CMS behind it. It had many points of failure, and wasn’t as performant as they knew it could be.

We needed to be able to enable marketers to make updates to the website without the web team doing it… they can focus on meeting their KPIs and the web development team can focus on more complex issues that only they can work on. – Kady Wood, Senior Director of Global Web Strategy and Experience, Navan

The requirements for their new stack were as follows:

  • Localization: The new site needed to make localization easier, as Navan increased their global scaleNeeded a localization aspect
  • Performance: High uptime requirements, as well as site speed and reliabilitySpeed and reliability (uptime)
  • Usability Across Teams: Easy for marketers to use and great for developers to use

Navan’s Corporate Site Stack: Netlify, Next.js, and Contentful

The developers on the team knew they wanted to build in Next,js, for its ability to scale through their needs in terms of statically generated pages and server-generated pages. Even on their corporate marketing site, as Aaron Emery, a full stack engineer on the team puts it, “We have certain parts of the website that are more “app”-like, and I knew Next could handle that.”

The next step was to find a place to deploy Next.js that was performant, met their usability requirements, and allowed them to deploy quickly.

With a homegrown solution it’s on the shoulders of your team. With Netlify, we have a partnership and a community we can go to and solve problems… the support team was a really big deal for me. - Kady Wood, Senior Director of Global Web Strategy and Experience, Navan

For their headless CMS, they shopped around a lot before landing on Contentful. On their decision to use Contentful, Kady says they chose it because “I wanted something that was developer friendly, but also really, really easy to use for our marketers,” and Contentful provided just that.

Easy incremental migrations with Netlify

It can be challenging to plan to move any website from one piece of hosting infrastructure to another.

One of the major wins with Netlify, Aaron says, was the ability to slowly migrate to a new solution. “There was no boiling the ocean,” he says. “We just started with the homepage and moved one URL at a time, and proxied what we needed to proxy.”

Netlify proxies and rewrites offer developers complete control.

Better support for content marketers and their localization campaigns

By using Contentful, Navan was able to empower marketers to make the changes they need to the site, without developer assistance.

Previously you would have to choose between being easy for a developer and hard for a marketer or hard for a marketer and easy for a developer. In this case, we were able to find something that suits both. – Kady Wood, Senior Director of Global Web Strategy and Experience, Navan

Additionally, this meant they could undertake localization efforts. Local teams in countries across the globe can now make country-specific edits to Contentful and know that they’ll be deployed exactly where they need to, without any involvement from the dev team.

It took us under five minutes to get localized. – Aaron Emery, Full Stack Engineer, Navan

Netlify ensures the dev team can use any framework they choose

By choosing to build and host their corporate website with Netlify, the Navan team doesn’t have to worry about forever chaining themselves to one framework. As Aaron mentioned in the fireside chat, different Javascript frameworks have different use cases, and there are new frameworks coming onto the market each year. Netlify supports many frameworks, and can even support using multiple frameworks at once to build different parts of a site or application.

One of the many benefits of Jamstack is that we’re not locked to Next.js. We have many other projects that we’ll spin up where … we have projects in mind where we want to use Astro. We’re not locked into that ecosystem 100%. We can introduce what we’re finding interesting. – Aaron Emery, Full Stack Engineer, Navan

Ready to get started? Connect a repo and deploy to Netlify today, for free.

Keep reading

Recent posts

Book cover with the title Deliver web project 10 times faster with Jamstack enterprise

Deliver web projects 10× faster

Get the whitepaper