Simple Ecommerce dengan NextJs, Zustand, dan Laravel #Part 2

• Services (SSR)

• Struktur rapi & mudah di-maintain
• Keamanan lebih baik (endpoint dan token tersimpan di server)
• Performanya tinggi berkat SSR dan pemisahan komponen
• Maksimal untuk SEO
• Mudah dikembangkan karena setiap layer punya fungsi yang jelas

• Langkah implementasi API di Next.js

• Membuat file environment

NEXT_PUBLIC_API_URL=http://localhost:8000/api

Gambar 8

• Membuat Folder services/

Di dalam folder src, buat folder baru bernama services.

Strukturnya akan seperti Gambar 9 berikut:

Gambar 9

Dalam folder services buat file dengan nama products.services.js

kemudian masukan kode berikut:

'use server';
import axios from 'axios';

export const getProductList = async ({ page, perpage, name, category_id }) => {
    try {
        const res = await axios({
            method: 'GET',
            url: `${process.env.NEXT_PUBLIC_API_URL}/api/products/list`,
            params: {
                page,
                perpage,
                name,
                category_id
            },
            headers: {
                'Content-Type': 'application/json',
            },
        });
        return res.data;
    } catch (error) {
        throw new Error(
            error?.response?.data?.message ||
            'Terjadi kesalahan saat mengambil data produk.'
        );
    }
};

export const getProductById = async (productId) => {
    try {
        const res = await axios({
            method: 'GET',
            url: `${process.env.NEXT_PUBLIC_API_URL}/api/products/${productId}`,
            headers: {
                'Content-Type': 'application/json',
            },
        });
        return res.data;
    } catch (error) {
        throw new Error(
            error?.response?.data?.message ||
            'Terjadi kesalahan saat mengambil data produk.'
        );
    }
};

• Membuat Folder features/

Gambar 10

import { getProductList } from '@/services/products.service';
import { useEffect, useState } from 'react';

export default function useGetProductList({
    page = 1,
    perpage = 10,
    name = '',
    category_id = '',
}) {
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState(null);
    const [productList, setProductList] = useState([]);
    const [pagination, setPagination] = useState({});

    const fetchData = async () => {
        setIsLoading(true);
        setError(null);

        try {
            const res = await getProductList({ page, perpage, name, category_id });

            setProductList(res.data);
            setPagination(res.pagination);
        } catch (error) {
            console.error(error);
            setError(error.message);
        } finally {
            setIsLoading(false);
        }
    };

    useEffect(() => {
        fetchData();
    }, [page, perpage, name, category_id]);

    return {
        isLoading,
        error,
        productList,
        pagination,
        fetchData
    };
}

import { getProductById } from '@/services/products.service';
import { useEffect, useState } from 'react';

export default function useGetProductById(productId) {
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState(null);
    const [product, setProduct] = useState({});

    const fetchData = async () => {
        setIsLoading(true);
        setError(null);

        try {
            const res = await getProductById(productId);

            setProduct(res.data);
        } catch (error) {
            setError(error.message);
        } finally {
            setIsLoading(false);
        }
    };

    useEffect(() => {
        fetchData();
    }, []);

    return { isLoading, error, product };
}

• Menggunakan Features pada Client Component

"use client";
import FrontpageLayout from "@/components/layouts/FrontpageLayout";
import ProductCard from "@/components/ui/card/ProductCard";
import FetchError from "@/components/ui/error/FetchError";
import SpinnerLoading from "@/components/ui/loading/SpinnerLoading";
import useGetProductList from "@/features/product/useGetProductList";
import { useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";

export default function ProductPageContent() {
  const searchParams = useSearchParams();
  const router = useRouter();

  const [search, setSearch] = useState(searchParams.get("name") || "");

  const { isLoading, error, productList } = useGetProductList({
    perpage: 12,
    name: searchParams.get("name"),
  });

  const handleSearch = (e) => {
    e.preventDefault();
    if (search === "") {
      router.push(`/products`);
      return;
    }

    router.push(`/products?name=${search}`);
  };

  return (
    <FrontpageLayout>
      <div className="flex flex-col gap-4 w-full px-4">
        <div className="flex justify-between items-center gap-2">
          <h3 className="font-bold text-gray-800 text-3xl text-start mb-4">
            Produk
          </h3>

          <form className="w-1/2 sm:w-1/3" onSubmit={handleSearch}>
            <label
              htmlFor="default-search"
              className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
            >
              Search
            </label>
            <div className="relative">
              <input
                type="search"
                id="default-search"
                className="block w-full p-4 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                placeholder="Cari produk..."
                value={search}
                onChange={(e) => setSearch(e.target.value)}
              />
              <button
                type="submit"
                className="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
              >
                Cari
              </button>
            </div>
          </form>
        </div>

        {isLoading && <SpinnerLoading />}

        {error && <FetchError text={error} />}

        {!isLoading && !error && productList.length === 0 && (
          <FetchError text={"Produk tidak ditemukan"} />
        )}

        {!isLoading && !error && productList.length > 0 && (
          <>
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
              {productList.map((product, index) => (
                <ProductCard key={index} product={product} />
              ))}
            </div>
          </>
        )}
      </div>
    </FrontpageLayout>
  );
}