Shopify App Development: Going Beyond Liquid with Next.js & Hydrogen

April 21, 2025

If you’ve worked with Shopify, you’ve probably used Liquid — Shopify’s templating language. It’s great for simple themes, but when you need more control, better performance, or modern developer tools, Liquid can feel limiting.

That’s where Next.js and Hydrogen come in.

Why Move Beyond Liquid?

Liquid is server-rendered, which means:

Limited interactivity (without heavy JavaScript workarounds).
Slower performance (full page reloads, no fine-grained updates).
Harder to maintain (mixing Liquid + JS can get messy).

With Next.js (React framework) + Hydrogen (Shopify’s React-based framework), you get:
✅ Full control with React components (reusable, modular code).
✅ Blazing-fast performance (server-side rendering + client-side hydration).
✅ Modern tooling (TypeScript, Vite, hot reloading).

Now lets consider a small example:

Building a Product Carousel

First lets take the Liquid Way (Old School)

{% for product in collections.frontpage.products limit: 5 %}  
  <div class="product">  
    <img src="{{ product.featured_image | img_url: 'medium' }}" />  
    <h3>{{ product.title }}</h3>  
    <p>{{ product.price | money }}</p>  
  </div>  
{% endfor %}

Problems:

No lazy loading.
No smooth animations (without custom JS).
Full page reload if you want to update products.

In that context lets approach this with Next.

The Next.js + Hydrogen Way (Modern Approach)

// Using Hydrogen’s Shopify provider import { useShopQuery, ProductCard } from "@shopify/hydrogen";

export function ProductCarousel() { const { data } = useShopQuery({ query: `query {
collection(handle: "frontpage") { products(first: 5) { edges { node {
title featuredImage { url } priceRange { minVariantPrice { amount } }
} } } } }` });
return (

{data.collection.products.edges.map(({ node }) => (

))}

); }

Benefits:

Instant updates (no page reloads).
Smooth animations (using React state).
Better performance (lazy loading, optimized GraphQL queries).

When Should You Use Next.js + Hydrogen?

✔ Custom storefronts (when Liquid isn’t flexible enough).
✔ High-performance stores (e-commerce sites needing speed).
✔ Progressive Web Apps (PWAs) (offline support, app-like feel).

When Should You Stick with Liquid?

✔ Simple themes (no need for heavy interactivity).
✔ Quick fixes (small changes without rebuilding).

Getting Started

Set up a Hydrogen project:

npm create @shopify/hydrogen@latest

2. Connect to Shopify:

Use the Storefront API (GraphQL) instead of Liquid.

3. Deploy:

Host on Vercel, Netlify, or Shopify Oxygen.

Conclusion

Liquid is great for basic Shopify stores, but if you want more power, speed, and developer experience, Next.js + Hydrogen is the future.

Try it out — your store (and your dev team) will thank you!

intertoons

Interoons aim at providing electronically intelligent and comprehensive range of digital marketing solutions that exceed customer expectations. We implement revolutionary digital marketing ideas to achieve a common as well as the aggregate growth of the organization. Long-term customer relations and extended support are maintained.