Our experience with rewriting our product website to Next.js
Why is Next.js the web framework our Marketing Team always wanted? (1/2)
How the next big thing in JavaScript became the next big thing for our product presentation on the web.For years we've been looking for the perfect perfect solution of our product web presentation…Like you, we need a technology that is on one side modern and renders fast, so people don’t have to wait for our content, and on the other side is easy to edit.This has changed dramatically with the growth of our product, a shift of the design trends, and last but not least demands on marketing. You know, change and iteration — even if it means rewriting and refactoring most of your code base — is normal. Each of the solutions we tried made total sense at the stage of our company, so let me briefly walk you through the most dramatic changes.3 iterations of our web devstack growthStep 1: Devs as marketersAt the beginning of 2015, our old web application was written in Angular.js and our desktop application in React.js with Atom as it’s core. We were 100% focused on product development, so we didn’t have any developers dedicated to the web. Therefore one of our React.js developers built a router with a custom Webpack configuration and coded a simple showcase of our product. Yep, not a very simple and elegant solution, but it served us well at the time.Step 2: One designer as a marketerAt the end of 2015, when Avocode started to get more traction, we knew we had to focus more on marketing. So our current CEO Vu — back then a designer — was the person who took care of marketing. We needed to quickly edit our website and build new microsites, so Vu found a tool called Webflow, which seemed like a good fit. With a basic knowledge of HTML and CSS, it allows you to built pretty nice websites.Step 3: A fully-fledged marketing teamStill, in 2016, we started growing faster, and we have built a marketing team focusing on design, strategy, front-end development, and a/b testing. The goal of this team is to raise awareness about our product, and one of the critical channels to do that is our web. Though preparing microsites in Webflow was quite quick, we ended up limited by the feature set of this tool:We were unable to sync symbols between projects, so we had to style the header and the footer for each project (basically for each microsite).We needed to add a lot of JavaScript code to our websites, but sadly there is a limit to the number of lines of your JavaScript code. Therefore we were forced to hack it by pasting scripts in the document HEAD or linking them as an external file from our CDN.Webflow auto-generates your code, which means it’s not written by our internal company standard and it creates a mess in the version control system like Git.We also needed some CSS functionality like vertical alignment or overflow-x/y which unfortunately aren’t supported in Webflow.When we needed to publish a website (or any edit) we had to build it in Webflow, download a zip file, dump it into our devstack, and run several Gulp scripts which made the web ready for production deployment.After a year of using Webflow, we arrived at a simple conclusion. It’s a great tool for microsites, but we need a modular system written from A to Z in our code.On the lookout for the perfect solution we had created a simple checklist of things we need:sharing symbols/components across the entire web project to keep it consistentwrite custom clean code for everything for better optimization and code readabilitysharing JavaScript modules with our product team (uploader, UI kit, auth, API calls…)anyone on the team has to be able to collaborate on the web project at the same time to be aware of conflictsIn autumn 2016, Zeit made us curious with the release of Next.js “minimal framework for building server-rendered universal JavaScript web apps.” When they released a 2.0 version with a programmatic API, they had our attention.What did we achieve with Next.js?Those jokers who laugh at JS frameworks (especially those based on React) which first require you to download ES6, Babel, install the router, add server and many other libraries, are no longer laughing. The cool thing about Next.js is that it’s pretty much prepared for production. While for example React.js is not out-of-the-box solution (it doesn’t really do anything unless you install the server, router, API calls, etc.), Next.js requires almost zero configuration setup — it comes with Babel to be able to use ES6 syntax and Webpack bundling, code splitting, hot reload, file system based router, server-side rendering and more.TIP: This is a nice tutorial how to get it up and running.Rewriting most of our websites into Next.js took one front-end developer and one full-stack developer less than a month.Thanks to the programmatic API, we were able to continuously rewrite the website while still maintaining two independent codebases.“Aside from the clear advantages of Next.js, the biggest game changer for us is the modularity of the code base. To be able to edit quickly and at best only in a few places, we have split our web into tiny — almost atomic — design parts.”— Martin Duris (Co-founder & Head of Marketing Avocode)How do we structure our codebase in Next.js?Pages — Separate pages of the website with a specific URL. Inside each Page folder, you would find Page Components, data (title, meta description, OG tags, textual content, etc.), and actions. Inside Pages we connect global Redux state, localization, tracking and more.Components — Each Page has its Components which contain logic, styling, and layout. An example of a Component would be our pricing table or a signup form.Modules — Global elements from our UI kit, things like buttons, inputs, etc.How do we edit the web content with Next.js?The general functionality and styles in Next.js are defined once, but the same logic can be reused in different styles like colors, font-styles, a vertical or horizontal order of elements and so on.Sign-up form is a great example of this. When we need to reuse the form with different styles somewhere else, we first import and use the signup_form.js Component with different props to rewrite the styles of this Component.When we need to edit logic and styles, we edit Components and Modules. An example would be a new button; we just import the button.js Module and modify it with different props.When the web edits are purely textual, we only edit the data.js file where we store data like texts, OG tags or similar content.How we deploy web changes with Next.js?Zeit offers a service called now for real-time global deployment of JavaScript (Node.js) or Docker powered websites to the cloud. Though we’re not using Zeit’s now, our solution is doing pretty much the same — we’re using Kubernetes to deploy Docker images.How does code splitting work in Next.js?When you enter a website which has code splitting, you’re not downloading the whole code of the website, but only specific parts.First, you get a bundle of assets, which are first needed upon a request, but soon after the server sends the remaining parts. The result is faster loading. Next.js offers a cool feature called pre-fetch which asynchronously fetches predefined content after the requested page is loaded.How does SSR work in Next.js?Next.js provides a server-side rendering which was one of the key reasons for us to choose this framework. The content of our website builds and renders on the server while at the same time the user can view the page and interact with it. Also, SSR provides search engine indexing.Source: https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8 by Alex GrigoryanHow do we A/B test with Next.js?This is more than a cherry on top for us. We’re doing a lot of split A/B tests in our communication to know what works best for our leads.Regarding the web communication, we have been relying on a fairly decent paid service called Visual Website Optimizer. However, since Next.js supports React, we easily added a React A/B testing package, and now we can add as many testing Variants as we want, not just for each page, but for each component and collect results data in Mixpanel.Last but not least, we’d like to thank the developers from ZEIT for bringing this tech to life and their wonderful Slack community for helping us set up our new devstack just right. 🙌🏼And now we have a question for you guys…If you’re using Next.js how do you manage production source maps with a tool like Sentry?Are you curious how we translated our website with the i18next localisation framework? Read more.