Asttero

Jak skonfigurować projekt z Next.js 13? Instrukcja krok po kroku

Next.js Opublikowano 11 maja 2026 Zaktualizowano 15 czerwca 2026 8 min
Jak skonfigurować projekt z Next.js 13? Instrukcja krok po kroku

Budowa nowoczesnego, szybkiego sklepu internetowego wymaga technologii, która eliminuje opóźnienia i pozwala na pełną kontrolę nad doświadczeniem zakupowym użytkownika. Tradycyjne platformy monolityczne często nie radzą sobie z rygorystycznymi wymaganiami dotyczącymi szybkości ładowania. Rozwiązaniem tego problemu jest architektura headless, w której warstwa wizualna zostaje całkowicie oddzielona od silnika sprzedażowego. Dowiedz się, jak skonfigurować projekt z Next.js 13, aby stworzyć stabilny, bezpieczny i zoptymalizowany pod kątem konwersji front-end dla swojego e-commerce.

Jak skonfigurować projekt z Next.js 13?

Dlaczego Next.js 13 i App Router to standard dla headless e-commerce?

Większość sklepów internetowych traci klientów na ostatnim etapie ścieżki zakupowej z powodu powolnego działania interfejsu. Każda sekunda opóźnienia bezpośrednio obniża współczynnik konwersji. Tradycyjne systemy szablonowe narzucają ograniczenia, które utrudniają optymalizację kodu i szybkie renderowanie dynamicznych elementów.

Wprowadzenie Next.js 13 z architekturą App Router całkowicie zmienia zasady gry w projektowaniu nowoczesnych sklepów. Dzięki temu rozwiązaniu deweloperzy zyskują dostęp do React Server Components (RSC). Oznacza to, że komponenty są domyślnie renderowane po stronie serwera, a do przeglądarki użytkownika trafia czysty, lekki kod HTML. Ilość przesyłanego kodu JavaScript zostaje zredukowana do minimum, co przekłada się na natychmiastowe ładowanie stron produktowych.

Zrozumienie zachodzących zmian ułatwia szczegółowe omówienie tego, co nowego wprowadzono w Next.js 13. Połączenie tej technologii z Shopify Storefront API pozwala zachować stabilne, bezpieczne zaplecze transakcyjne, dając jednocześnie nieograniczone możliwości projektowania unikalnego interfejsu użytkownika.

Wymagania systemowe przed instalacją

Przed uruchomieniem instalatora upewnij się, że środowisko lokalne spełnia wymagania techniczne niezbędne do stabilnego działania Next.js 13.

Wymagania techniczne:

Spełnienie tych warunków pozwala na bezproblemowe przejście przez proces automatycznej inicjalizacji projektu bez ryzyka wystąpienia błędów podczas kompilacji.

Inicjalizacja projektu krok po kroku

Proces tworzenia nowego projektu rozpoczynamy od uruchomienia oficjalnego kreatora w terminalu. Narzędzie create-next-app automatycznie konfiguruje strukturę plików oraz instaluje wymagane zależności. Zanim przejdziemy do tego, jak skonfigurować projekt z Next.js 13, przygotujmy czysty katalog roboczy.

Uruchom terminal w wybranym katalogu i wpisz następującą komendę:


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

Podczas inicjalizacji instalator zada serię pytań dotyczących konfiguracji. Poniższe odpowiedzi pozwalają przygotować projekt klasy produkcyjnej pod e-commerce:


✔ 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

Wybór TypeScript zapewnia statyczne typowanie, co minimalizuje ryzyko błędów przy integracji z API Shopify. Katalog src/ pozwala na wyraźne oddzielenie kodu źródłowego od plików konfiguracyjnych w głównym folderze projektu.

Zrozumienie struktury katalogu app

Po zakończeniu instalacji w katalogu src/ znajdziesz folder app/. To tutaj odbywa się całe zarządzanie ścieżkami i widokami sklepu. Kluczowe znaczenie mają trzy pliki:

Zrozumienie tych zależności jest kluczowe, ponieważ routing w Next.js opiera się bezpośrednio na strukturze folderów wewnątrz katalogu app/.

Konfiguracja next.config.js pod Shopify CDN i optymalizację obrazów

Wydajny sklep internetowy musi błyskawicznie ładować zdjęcia produktów. Next.js oferuje wbudowany komponent Image, który automatycznie optymalizuje grafiki, kompresując je do nowoczesnych formatów WebP oraz AVIF. Jednak ze względów bezpieczeństwa framework wymaga jawnego zdefiniowania domen, z których mogą być pobierane zewnętrzne pliki.

Zdjęcia produktów w ekosystemie Shopify są przechowywane na serwerach CDN. Brak odpowiedniej konfiguracji w pliku next.config.js spowoduje błąd podczas próby wyrenderowania jakiejkolwiek grafiki produktowej.

Otwórz plik next.config.js w głównym katalogu projektu i zaktualizuj go o następującą konfigurację:


/** @type {import('next').NextConfig} */

const nextConfig = {

images: {

remotePatterns: [

{

protocol: 'https',

hostname: 'cdn.shopify.com',

pathname: '/s/files/**',

},

],

},

};

module.exports = nextConfig;

Dzięki zastosowaniu remotePatterns precyzyjnie określamy bezpieczne źródło pochodzenia multimediów. Next.js będzie teraz automatycznie optymalizował i serwował obrazy bezpośrednio z CDN Shopify, co drastycznie skróci czas ładowania strony. Dla dalszego zwiększania szybkości ładowania kluczowa jest kompleksowa optymalizacja wydajności w Next.js.

Zarządzanie zmiennymi środowiskowymi dla Shopify Storefront API

Bezpieczeństwo danych to priorytet w każdym projekcie e-commerce. Połączenie front-endu Next.js z panelem administracyjnym Shopify wymaga użycia kluczy dostępowych do Storefront API. Klucze te nie mogą trafić do kodu źródłowego widocznego dla użytkownika w przeglądarce. Wiedząc już, jak skonfigurować projekt z Next.js 13 pod kątem struktury, musisz zadbać o bezpieczeństwo danych uwierzytelniających.

W tym celu wykorzystujemy zmienne środowiskowe. Utwórz plik .env.local w głównym katalogu projektu i dodaj do niego następujące wpisy:


SHOPIFY_STORE_DOMAIN=twoj-sklep.myshopify.com

SHOPIFY_STOREFRONT_ACCESS_TOKEN=twój_publiczny_token_storefront_api

W Next.js zmienne środowiskowe są domyślnie dostępne wyłącznie w środowisku uruchomieniowym serwera. Oznacza to, że nie zostaną one dołączone do paczki kodu wysyłanej do przeglądarki klienta. Gdyby zaszła potrzeba upublicznienia zmiennej po stronie klienta, musiałaby ona posiadać przedrostek NEXT_PUBLIC_. W przypadku integracji z API Shopify najbezpieczniejszym rozwiązaniem jest wykonywanie zapytań po stronie serwera, co gwarantuje pełną ochronę danych uwierzytelniających.

Upewnij się, że plik .env.local znajduje się w pliku .gitignore, aby zapobiec jego przypadkowemu przesłaniu do repozytorium Git. Szczegółowe wytyczne dotyczące integracji z zewnętrznymi systemami znajdziesz w oficjalnej dokumentacji Shopify Custom Storefronts.

Konfiguracja Tailwind CSS i narzędzi deweloperskich

Szybkie wdrażanie zmian wizualnych wymaga spójnego systemu stylizowania. Wybrany podczas inicjalizacji framework Tailwind CSS jest już zintegrowany z projektem. Plik tailwind.config.js pozwala na definiowanie niestandardowych kolorów, fontów oraz punktów przełamania (breakpoints) dostosowanych do identyfikacji wizualnej marki.

Aby utrzymać porządek w kodzie przy pracy zespołowej, dobrym rozwiązaniem jest wdrożenie automatycznego sortowania klas Tailwind CSS. W tym celu instalujemy wtyczkę do narzędzia Prettier.

Uruchom w terminalu komendę instalacyjną:


npm install -D prettier prettier-plugin-tailwindcss

Następnie utwórz plik konfiguracyjny .prettierrc w głównym katalogu projektu i dodaj do niego konfigurację:


{

"plugins": ["prettier-plugin-tailwindcss"],

"semi": true,

"singleQuote": true,

"tabWidth": 2

}

Od tej pory przy każdym zapisie pliku klasy Tailwind CSS będą automatycznie układane w zalecanej kolejności. Zapobiega to powstawaniu konfliktów w stylach i ułatwia analizę kodu innym deweloperom. Spójność wizualną i czysty kod ułatwia także odpowiednie stylowanie w Next.js.

Server Components vs Client Components w praktyce e-commerce

Zrozumienie podziału na komponenty serwerowe i klienckie to klucz do zbudowania wydajnego sklepu headless. Next.js 13 domyślnie traktuje wszystkie pliki w katalogu app/ jako Server Components. Pobierają one dane bezpośrednio z API Shopify po stronie serwera, eliminując potrzebę wysyłania dodatkowych zapytań z przeglądarki użytkownika.

W e-commerce stosujemy podział oparty na konkretnych scenariuszach:

Aby przekształcić komponent w wersję kliencką, wystarczy na samej górze pliku dodać dyrektywę 'use client':


'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 ? 'Dodano do koszyka' : 'Dodaj do koszyka'}

</button>

);

}

Izolowanie komponentów klienckich i pozostawienie większości struktury sklepu po stronie serwera to najlepsza praktyka optymalizacyjna. Właściwy podział zadań między serwerem a przeglądarką szczegółowo opisuje renderowanie Server i Client Components w Next.js.

Podsumowanie i kolejne kroki w budowaniu sklepu headless

To, jak skonfigurować projekt z Next.js 13, decyduje o późniejszej stabilności całego ekosystemu headless. Prawidłowa wstępna konfiguracja projektu w Next.js 13 to fundament pod stabilny i szybki sklep internetowy. Dzięki wykorzystaniu App Routera, optymalizacji obrazów z CDN Shopify oraz bezpiecznemu zarządzaniu zmiennymi środowiskowymi, zyskujesz architekturę gotową do obsługi dużego ruchu bez spadków wydajności.

Kolejnym krokiem w rozwoju Twojego e-commerce jest zaprojektowanie mechanizmu pobierania danych o produktach oraz integracja koszyka z systemem płatności. Wszystkie te elementy spaja w całość profesjonalne wdrożenie Shopify headless e-commerce.

Budowa zaawansowanego front-endu wymaga doświadczenia w optymalizacji ścieżki zakupowej oraz integracji wielu systemów zewnętrznych. Jako oficjalny Shopify Partner, w Asttero pomagamy markom e-commerce projektować i wdrażać wydajne sklepy oparte o nowoczesny stos technologiczny. Skupiamy się na analizie danych, eliminowaniu wąskich gardeł w lejkach sprzedażowych oraz optymalizacji kosztów operacyjnych, aby Twój biznes rósł w przewidywalny sposób.

FAQ

Czy Next.js 13 wymaga hostingu wyłącznie na platformie Vercel?

Nie, Next.js 13 można uruchomić na dowolnym serwerze obsługującym Node.js, w kontenerze Docker lub na platformach chmurowych takich jak AWS czy Google Cloud. Vercel oferuje najprostszą konfigurację out-of-the-box, ale nie jest to jedyna opcja dla projektów headless e-commerce.

Jak rozwiązać błąd związany z brakiem dyrektywy 'use client' przy integracji zewnętrznych bibliotek?

Jeśli importujesz komponent z zewnętrznej biblioteki, który korzysta ze stanów (useState) lub efektów (useEffect), wystarczy umieścić go w pliku oznaczonym dyrektywą 'use client' na samej górze lub zaimportować go dynamicznie z wyłączonym renderowaniem po stronie serwera (SSR).

Czym różni się Next.js 13 od dedykowanego frameworka Shopify Hydrogen?

Hydrogen to framework stworzony przez Shopify, bazujący na Remixie i ściśle powiązany z ekosystemem Shopify. Next.js 13 to uniwersalny framework React o znacznie większej społeczności. Wybór Next.js daje większą elastyczność i ułatwia integrację z wieloma źródłami danych (multi-source headless).

Bibliografia