≡ Menu

Going Headless: How to Build a Blazing-Fast Shopify Store with Next.js (App Router)

by Tyronne on June 26, 2026

Traditional Shopify themes (Liquid) are excellent for getting started, but as an e-commerce brand scales, performance bottlenecking and rigid design constraints often crawl in.

By decoupling your frontend with Next.js and using Shopify strictly as a headless commerce engine, you unlock sub-second page loads, completely custom UI freedom, and major SEO advantages.

Here is your step-by-step developer’s blueprint to building a production-ready headless Shopify store using the Next.js App Router and the Shopify Storefront API.

1. The Headless Architecture

In a headless setup, Shopify ceases to manage your layout. Instead, it acts as your data warehouse, inventory tracker, and checkout gateway.

  • Presentation Layer: Next.js (React Server Components, Dynamic Streaming).

  • Commerce Data Layer: Shopify Storefront API (GraphQL).

  • Hosting: Vercel, Netlify, or AWS.

2. Step 1: Setting Up Shopify Storefront API

Before writing code, you need to generate public access tokens to query your catalog.

  1. Navigate to your Shopify Admin panel  Settings > Apps and sales channels.

  2. Click Develop apps, then select Allow custom app development.

  3. Click Create an app and name it (e.g., NextJS Storefront).

  4. Under Configuration, click Configure Storefront API scopes. Select access tokens for read_products, read_product_listings, and read_checkout.

  5. Click Install App and securely copy the Storefront API access token.

3. Step 2: Initializing Your Next.js Project

Fire up your terminal and spin up a clean Next.js app with Tailwind CSS and TypeScript:

npx create-next-app@latest headless-shopify --typescript --tailwind --app
cd headless-shopify

Create a .env.local file in your root directory to securely house your credentials:

NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN="your-store-name.myshopify.com"
SHOPIFY_STOREFRONT_ACCESS_TOKEN="your_storefront_access_token_here"

4. Step 3: Creating the Shopify Fetch Client

Because Shopify uses a GraphQL API, you don’t need heavy GraphQL client libraries; a robust native fetch utility handling headers and errors is cleaner and pairs perfectly with Next.js caching algorithms.

Create a file at src/utils/shopify.ts:

const domain = process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN;
const token = process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN;

export async function shopifyFetch<T>({ query, variables = {} }: { query: string; variables?: any }): Promise<{ status: number; body: T } | never> {
  try {
    const result = await fetch(`https://${domain}/api/2024-04/graphql.json`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Shopify-Storefront-Access-Token': token!,
      },
      body: JSON.stringify({ query, variables }),
      next: { revalidate: 3600 } // Incremental Static Regeneration (ISR) - Cache for 1 hour
    });

    const body = await result.json();

    if (body.errors) {
      throw new Error(body.errors[0].message);
    }

    return {
      status: result.status,
      body: body.data,
    };
  } catch (error) {
    console.error('Shopify Fetch Error:', error);
    throw new Error('Failed to fetch data from Shopify');
  }
}

5. Step 4: Fetching and Rendering Products

Let’s fetch products cleanly using a React Server Component (RSC). This queries Shopify during server-side compilation, resulting in zero layout shifts and instant page loading for users.

Create a simple product type and standard query structure in src/app/page.tsx:

import Image from 'next/image';
import { shopifyFetch } from '@/utils/shopify';

interface ProductNode {
  id: string;
  title: string;
  handle: string;
  featuredImage: { url: string; altText: string };
  priceRange: { minVariantPrice: { amount: string; currencyCode: string } };
}

interface ShopifyProductsResponse {
  products: { nodes: ProductNode[] };
}

const productsQuery = `
  query getProducts {
    products(first: 6) {
      nodes {
        id
        title
        handle
        featuredImage {
          url
          altText
        }
        priceRange {
          minVariantPrice {
            amount
            currencyCode
          }
        }
      }
    }
  }
`;

export default async function HomePage() {
  const res = await shopifyFetch<ShopifyProductsResponse>({ query: productsQuery });
  const products = res.body?.products.nodes || [];

  return (
    <main className="max-w-7xl mx-auto px-4 py-12">
      <h1 className="text-4xl font-extrabold tracking-tight mb-8">Featured Collection</h1>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
        {products.map((product) => (
          <div key={product.id} className="group relative border rounded-lg p-4 flex flex-col justify-between">
            <div className="aspect-square w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75">
              <Image
                src={product.featuredImage.url}
                alt={product.featuredImage.altText || product.title}
                width={500}
                height={500}
                className="h-full w-full object-cover object-center"
              />
            </div>
            <div className="mt-4 flex justify-between">
              <h3 className="text-sm font-medium text-gray-700">{product.title}</h3>
              <p className="text-sm font-semibold text-gray-900">
                ${parseFloat(product.priceRange.minVariantPrice.amount).toFixed(2)} {product.priceRange.minVariantPrice.currencyCode}
              </p>
            </div>
          </div>
        ))}
      </div>
    </main>
  );
}

Performance Tip: Ensure you whitelist the Shopify CDN domain (cdn.shopify.com) in your next.config.ts configuration under images.remotePatterns to utilize Next.js’s native image optimization algorithms seamlessly.

6. Step 5: Handling Cart and Checkout Flow

Because you are headless, mutations like creating a cart or adding items are performed directly against Shopify’s backend via client actions or React Server Actions.

Shopify API Mutation Purpose
cartCreate Creates a unique cart instance on Shopify and returns a tracking cartId.
cartLinesAdd Appends selected items and variants to the active cart instance.
cartLinesRemove Removes items from the checkout queue.

The Checkout Escape Hatch

Rather than spending months engineering a custom PCI-compliant checkout matrix, simply use the checkoutUrl returned from your cartCreate or cartLinesAdd responses.

When a user clicks “Proceed to Checkout”, redirect them directly to Shopify’s securely hosted storefront checkout page (e.g., window.location.href = cart.checkoutUrl). Once the payment transaction completes, Shopify automatically routes them back to your Next.js success page.

7. Performance Best Practices for Launch

  • Leverage Hybrid Rendering: Use Incremental Static Regeneration (ISR) via Next.js fetch configuration to cache products statically, but revalidate background data every few minutes to keep prices and inventory synchronized without slow runtime database fetches.

  • Prefetch Context: Wrap your site navigational links in Next.js <Link /> components to prefetch subsequent collection dynamic assets prior to click actions.

  • Zero CSS Runtime: Standardize your interface rendering with utility tools like Tailwind CSS v4 or CSS modules to guarantee that no heavy global JavaScript code styling fragments block initial browser processing cycles.

Coding Quote of the Day:

“Our task is to make our software unquestionably the best canvas on which to develop the best businesses of the future. We do this by keeping everyone cutting edge and bringing all the best tools to bear.” — Tobias Lütke

Useful links below:

Let me & my team build you a money making website/blog for your business https://bit.ly/tnrwebsite_service

Get Bluehost hosting for as little as $1.99/month (save 75%)…https://bit.ly/3C1fZd2

Best email marketing automation solution on the market! http://www.aweber.com/?373860

Build high converting sales funnels with a few simple clicks of your mouse! https://bit.ly/484YV29

Join my Patreon for one-on-one coaching and help with your coding…https://www.patreon.com/c/TyronneRatcliff

Buy me a coffee ☕️https://buymeacoffee.com/tyronneratcliff

{ 0 comments }

Securing the Gates: Hardening and Rate Limiting Your NestJS API

by Tyronne on June 23, 2026

Building a fast, scalable API with NestJS is an excellent choice, but out-of-the-box frameworks are built for development speed, not battle conditions.

Once your API hits production, it becomes a target for brute-force attacks, Denial of Service (DoS), script kiddies, and malicious bots.

Hardening your API shouldn’t be an afterthought!

Here is a practical, production-ready guide to locking down your NestJS application using industry best practices.

1. Shielding HTTP Headers with Helmet

By default, Express (which powers NestJS under the hood) leaks information about your stack via headers like X-Powered-By.

Attackers use this to fingerprint your server and target specific vulnerabilities.

Helmet is a collection of 15 smaller middleware functions that set security-related HTTP headers to protect against common vulnerabilities like Cross-Site Scripting (XSS) and clickjacking.

Implementation

First, install the package:

npm i --save helmet

Then, apply it globally in your main.ts file:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import helmet from 'helmet';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  
  // Use Helmet early in the middleware stack
  app.use(helmet());

  await app.listen(3000);
}
bootstrap();

2. Preventing Abuse with Rate Limiting

Rate limiting limits the number of requests a user or IP address can make within a specific timeframe.

This is your primary defense against brute-force login attempts and DoS attacks.

NestJS provides an official @nestjs/throttler package that integrates seamlessly with its guard system.

Implementation

Install the throttler package:

npm i --save @nestjs/throttler

Configure it in your root AppModule:

import { Module } from '@nestjs/common';
import { ThrottlerModule, ThrottlerGuard } from '@nestjs/throttler';
import { APP_GUARD } from '@nestjs/core';

@Module({
  imports: [
    // Configure: Max 10 requests every 60 seconds per IP
    ThrottlerModule.forRoot([{
      ttl: 60000,
      limit: 10,
    }]),
  ],
  providers: [
    {
      provide: APP_GUARD,
      useClass: ThrottlerGuard, // Apply rate limiting globally
    },
  ],
})
export class AppModule {}

Granular Control (Overriding Globals)

You don’t want your heavy data-export endpoint to have the same limits as your public homepage. You can use decorators to customize limits per controller or route:

import { Controller, Get } from '@nestjs/common';
import { SkipThrottle, Throttle } from '@nestjs/throttler';

@Controller('users')
export class UsersController {
  
  @SkipThrottle() // Bypass rate limiting completely for this route
  @Get('public')
  findAllPublic() {
    return 'Public data';
  }

  @Throttle({ default: { limit: 3, ttl: 60000 } }) // Stricter limit for sensitive actions
  @Get('sensitive-data')
  getSecureData() {
    return 'Sensitive data';
  }
}

💡 Production Tip: By default, the throttler stores request counts in-memory. If your API scales horizontally across multiple servers or containers, switch to the Redis storage provider (throttler-storage-redis) so all instances share the same rate-limit state.

3. Strict Input Validation (Sanitizing Data)

Never trust data sent by the client. Malicious payloads can crash your app, execute unintended database queries, or inject malicious scripts.

NestJS makes it incredibly easy to validate inputs using the ValidationPipe.

Implementation

Install the required peer dependencies:

npm i --save class-validator class-transformer

Enable the validation pipe globally in main.ts with strict options:

import { ValidationPipe } from '@nestjs/common';

app.useGlobalPipes(
  new ValidationPipe({
    whitelist: true,            // Strips away any properties not defined in the DTO
    forbidNonWhitelisted: true, // Throws an error if unknown properties are sent
    transform: true,            // Automatically transforms payloads to match DTO types
  }),
);

Creating a Secure DTO

With whitelist and forbidNonWhitelisted enabled, any malicious properties sent to your endpoints are immediately blocked.

import { IsString, IsEmail, MinLength } from 'class-validator';

export class RegisterUserDto {
  @IsEmail()
  email: string;

  @IsString()
  @MinLength(8, { message: 'Password must be at least 8 characters long.' })
  password: string;
}

4. Taming Cross-Origin Resource Sharing (CORS)

CORS stops unauthorized web pages from making requests to your API. Leaving CORS wide open (origin: '*') allows any malicious website to execute requests on behalf of authenticated users.

Implementation

Configure CORS strictly in your main.ts:

app.enableCors({
  origin: ['https://yourfrontend.com', 'https://admin.yourfrontend.com'],
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
  credentials: true, // Allow cookies/auth headers if needed
  allowedHeaders: 'Content-Type, Authorization',
});

5. Summary Checklist for Production

Before you deploy your NestJS API to the wild, ensure you have ticked off these critical boxes:

Security Vector Tool / Strategy Action Item
HTTP Headers Helmet Obfuscate stack metadata and enforce HTTPS.
DDoS / Brute Force @nestjs/throttler Establish strict request limits (and connect to Redis if clustered).
Payload Injection ValidationPipe Enforce whitelist: true to discard malicious body parameters.
Cross-Site Request Hijacking Strict CORS Never use origin: '*' in production environments.
Data in Transit TLS / SSL Ensure your NestJS app sits behind a reverse proxy (like Nginx, Cloudflare, or an AWS ALB) that terminates SSL properly.

By implementing these quick wins, you transform your NestJS application from an exposed, default framework setup into a hardened API ready to withstand hostile web environments.

Coding Quote of the Day:

“Writing secure code isn’t about building a wall that can never be broken; it’s about making the cost of breaking it higher than the value of what’s inside.”

— Unknown

Useful links below:

Let me & my team build you a money making website/blog for your business https://bit.ly/tnrwebsite_service

Get Bluehost hosting for as little as $1.99/month (save 75%)…https://bit.ly/3C1fZd2

Best email marketing automation solution on the market! http://www.aweber.com/?373860

Build high converting sales funnels with a few simple clicks of your mouse! https://bit.ly/484YV29

Join my Patreon for one-on-one coaching and help with your coding…https://www.patreon.com/c/TyronneRatcliff

Buy me a coffee ☕️https://buymeacoffee.com/tyronneratcliff

{ 0 comments }
Previous Posts

This site rocks the Classic Responsive Skin for Thesis.