Website Rebuild for Growers Market
We’re thrilled to launch the new website for Growers Market. This is our most highly customised website yet.
With a large catalogue of regularly updating products, we decided we wanted to be able to server render the product pages for this site (as building every page for website with hundreds of pages can take several minutes which can easily burn through our build minutes, and is slow to show new content after updating). We’re still huge fans of static websites wherever possible, and Next.js is a framework that lets us easily use both.
Search is handled by Algolia. There is an app we can install in the Shopify backend to connect to the product catalogue, and we’re using their React Instant Search package to display the results on the frontend inside of a Reach UI Combobox which is an accessible component that is perfect for this. It handles keyboard navigation, aria attributes, and focus states for us. We’re really happy with the combination — it looks and works great!
Next.js has an image component that lets us use images from the Shopify CDN and transform them to an optimised format in place. It works similar to the image component for Gatsby, but instead of doing it at build time it happens when the page is requested and the image is then cached. This way only the images that actually get viewed are transformed.
Unfortunately the Next.js image component doesn’t work with our host of choice (Netlify) so for this site we’re using Vercel. No complaints so far, its a solid a powerful host. Netlify still has our heart, but we’d happily use Vercel again if it was a better choice for the project.
Netlify has a handy feature to automatically detect forms and forward responses to an email address of your choosing. Since we’re using Vercel, we had to build out the contact form functionality ourselves. We opted to use nodemailer in a Next.js API route which sends the contact form submission via SMTP using a Sendgrid account.
Since we weren’t using Gatsby for this site, we didn’t have access to any of their source plugins so we had to build the data layer ourselves. We source product and checkout data from Shopify using their Storefront GraphQL API, as well as from Sanity (also using their GraphQL API). To manage queries, mutations and caching, we used Apollo Client.
User authentication is provided with Firebase Auth (which pairs nicely with the Firebase database which we will be using in a future update).
Check it out here: https://www.growersmarket.net.au