Asttero

How to Set Up a Next.js 13 Project: Step-by-Step Guide

Next.js Published May 11, 2026 Updated June 15, 2026 8 min
How to set up a Next.js 13 project: step-by-step guide

Building a modern, fast online store requires technology that eliminates delays and gives full control over the shopping experience. Traditional monolithic platforms often fail to meet strict load-time requirements. The solution is headless architecture, where the visual layer is fully separated from the sales engine. Learn how to configure a Next.js 13 project to create a stable, secure, conversion-optimized front end for your e-commerce store.

How to set up a Next.js 13 project

Why Are Next.js 13 and App Router the Standard for Headless E-Commerce?

Most online stores lose customers at the final purchase stage because the interface is slow. Every second of delay directly lowers conversion rate. Traditional template systems impose constraints that make code optimization and fast rendering of dynamic elements difficult.

Next.js 13 with the App Router architecture changes the rules for designing modern stores. Developers gain access to React Server Components (RSC). Components are rendered on the server by default, and the user's browser receives clean, lightweight HTML. The amount of JavaScript shipped is minimized, which translates into instant product page loads.

Understanding these changes is easier with a detailed look at what's new in Next.js 13. Combining this technology with the Shopify Storefront API keeps a stable, secure transactional backend while offering unlimited possibilities for designing a unique user interface.

System Requirements Before Installation

Before running the installer, ensure your local environment meets the technical requirements for stable Next.js 13 operation.

Technical requirements:

Meeting these conditions allows smooth automatic project initialization without compilation errors.

Step-by-Step Project Initialization

Start creating a new project by running the official wizard in the terminal. The create-next-app tool automatically configures the file structure and installs required dependencies. Before we configure the Next.js 13 project, prepare a clean working directory.

Open a terminal in your chosen directory and run:

npx create-next-app@13 my-headless-store

During initialization, the installer asks a series of configuration questions. The answers below prepare a production-grade e-commerce project:

✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias? … No

Choosing TypeScript provides static typing, which minimizes errors when integrating with the Shopify API. The src/ directory clearly separates source code from configuration files in the project root.

Understanding the app Directory Structure

After installation completes, you will find an app/ folder inside src/. This is where all route and view management for the store happens. Three files matter most:

Understanding these relationships is essential because routing in Next.js is based directly on the folder structure inside app/.

Configuring next.config.js for Shopify CDN and Image Optimization

A high-performance store must load product images instantly. Next.js offers a built-in Image component that automatically optimizes graphics by compressing them to modern WebP and AVIF formats. For security reasons, however, the framework requires explicitly defining domains from which external files may be loaded.

Product images in the Shopify ecosystem are stored on CDN servers. Without proper configuration in next.config.js, rendering any product image will fail.

Open next.config.js in the project root and update it with the following configuration:

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'cdn.shopify.com',
        pathname: '/s/files/**',
      },
    ],
  },
};

module.exports = nextConfig;

Using remotePatterns precisely defines a safe source for media. Next.js will now automatically optimize and serve images directly from Shopify's CDN, drastically shortening page load time. For further speed gains, comprehensive performance optimization in Next.js is essential.

Managing Environment Variables for Shopify Storefront API

Data security is a priority in every e-commerce project. Connecting a Next.js front end to the Shopify admin requires Storefront API access keys. These keys must not appear in source code visible to users in the browser. Once you know how to configure the Next.js 13 project structure, you must secure authentication data.

We use environment variables for this. Create a .env.local file in the project root and add:

SHOPIFY_STORE_DOMAIN=your-store.myshopify.com
SHOPIFY_STOREFRONT_ACCESS_TOKEN=your_public_storefront_api_token

In Next.js, environment variables are available only in the server runtime by default. They will not be bundled into code sent to the client's browser. If a variable must be exposed on the client, it needs the NEXT_PUBLIC_ prefix. For Shopify API integration, executing requests on the server is the safest approach and guarantees full protection of credentials.

Ensure .env.local is listed in .gitignore to prevent accidental commits to Git. Detailed integration guidelines are in Shopify's official Custom Storefronts documentation.

Configuring Tailwind CSS and Developer Tools

Fast visual iteration requires a consistent styling system. The Tailwind CSS framework selected during initialization is already integrated. The tailwind.config.js file lets you define custom colors, fonts, and breakpoints aligned with brand identity.

To keep code tidy in team work, automatic Tailwind class sorting via Prettier is a good practice. Install the plugin:

npm install -D prettier prettier-plugin-tailwindcss

Then create a .prettierrc file in the project root:

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2
}

From now on, Tailwind classes will be automatically ordered on every save. This prevents style conflicts and makes code easier for other developers to read. Consistent visuals and clean code also benefit from proper styling in Next.js.

Server Components vs. Client Components in E-Commerce Practice

Understanding the split between server and client components is key to building a performant headless store. Next.js 13 treats all files in app/ as Server Components by default. They fetch data directly from the Shopify API on the server, eliminating extra requests from the user's browser.

In e-commerce, we apply a scenario-based split:

To turn a component into a client component, add the 'use client' directive at the very top of the file:

'use client';

import { useState } from 'react';

export default function AddToCartButton() {
  const [added, setAdded] = useState(false);

  return (
    <button
      onClick={() => setAdded(true)}
      className="bg-black text-white px-6 py-3 rounded-md"
    >
      {added ? 'Added to cart' : 'Add to cart'}
    </button>
  );
}

Isolating client components and keeping most of the store structure on the server is a best practice for optimization. The proper division of work between server and browser is described in detail in Server and Client Components rendering in Next.js.

Summary and Next Steps in Building a Headless Store

How you configure the Next.js 13 project determines the later stability of the entire headless ecosystem. Correct initial setup is the foundation for a stable, fast online store. Using the App Router, optimizing images from Shopify's CDN, and securely managing environment variables gives you an architecture ready for high traffic without performance drops.

The next step in developing your e-commerce is designing product data fetching and integrating the cart with the payment system. Professional Shopify headless e-commerce implementation ties all these elements together.

Building an advanced front end requires experience in checkout optimization and integrating multiple external systems. As an official Shopify Partner, Asttero helps e-commerce brands design and deploy high-performance stores on a modern tech stack. We focus on data analysis, eliminating funnel bottlenecks, and optimizing operational costs so your business grows predictably.

FAQ

Does Next.js 13 Require Hosting Exclusively on Vercel?

No. Next.js 13 can run on any server supporting Node.js, in a Docker container, or on cloud platforms such as AWS or Google Cloud. Vercel offers the simplest out-of-the-box setup but is not the only option for headless e-commerce projects.

How Do I Fix the Missing 'use client' Directive Error When Integrating External Libraries?

If you import a component from an external library that uses state (useState) or effects (useEffect), place it in a file marked with 'use client' at the top, or import it dynamically with server-side rendering disabled.

How Does Next.js 13 Differ from Shopify's Dedicated Hydrogen Framework?

Hydrogen is a framework created by Shopify, based on Remix and tightly linked to the Shopify ecosystem. Next.js 13 is a universal React framework with a much larger community. Choosing Next.js offers greater flexibility and easier integration with multiple data sources (multi-source headless).

Bibliography