Post by

3 April 2025

Perkiraan waktu baca: 21 menit

Next.Js E-Commerce Tutorial Untuk Pemula

Next.js adalah framework JavaScript yang dibangun di atas React, yang memungkinkan pembuatan aplikasi web dan situs statis dengan sangat efisien. Dibuat oleh Vercel, Next.js memberikan berbagai fitur canggih seperti server-side rendering (SSR), static site generation (SSG), API routes, dan optimasi otomatis untuk kecepatan dan SEO. Framework ini sangat populer di kalangan pengembang front-end karena kesederhanaan dan kemampuannya untuk menangani berbagai kebutuhan pengembangan aplikasi web secara otomatis.

Dengan Next.js, Anda dapat dengan mudah membuat aplikasi web dinamis yang juga teroptimasi dengan baik untuk SEO, mengingat Next.js mengutamakan kemampuan server-side rendering dan pre-rendering. Ini membuatnya sangat cocok untuk membangun situs e-commerce yang memerlukan performa tinggi dan pencapaian SEO yang optimal.

Mengapa Menggunakan Next.js untuk E-Commerce?

Ketika membangun sebuah situs e-commerce, ada beberapa kebutuhan dan tantangan yang harus dipertimbangkan. Beberapa di antaranya adalah:

Kecepatan dan Performa

Pengguna e-commerce sering kali membutuhkan akses cepat ke produk dan halaman checkout. Penggunaan Next.js memungkinkan optimasi performa dengan pre-rendering halaman, yang membantu mengurangi waktu pemuatan halaman. Selain itu, dengan server-side rendering, Next.js dapat menghasilkan konten yang sudah sepenuhnya dirender di server, sehingga meminimalkan waktu yang dibutuhkan untuk memuat data di sisi klien.

SEO (Search Engine Optimization)

Situs e-commerce perlu muncul di hasil pencarian Google untuk mendapatkan trafik organik yang banyak. Next.js memungkinkan optimasi SEO yang lebih baik karena secara default mendukung server-side rendering. Dengan SSR, konten produk dapat dirender di server dan langsung tersedia di halaman HTML, memudahkan mesin pencari untuk mengindeksnya. Ini memberikan keuntungan besar dibandingkan aplikasi single-page React yang hanya menggunakan client-side rendering (CSR), yang sering kali menyulitkan mesin pencari untuk mengindeks konten dengan benar.

Skalabilitas dan Fleksibilitas

Seiring dengan pertumbuhan bisnis e-commerce, situs Anda harus dapat menangani peningkatan trafik dan transaksi. Next.js mempermudah pembangunan aplikasi yang skalabel dan fleksibel. Dengan menggunakan API routes dan kemampuan untuk melakukan server-side rendering dan static generation secara bersamaan, Anda dapat dengan mudah menyesuaikan dan mengembangkan situs e-commerce Anda.

Pengalaman Pengguna yang Lebih Baik

Pengalaman pengguna (UX) adalah faktor kunci dalam e-commerce. Next.js memastikan bahwa aplikasi Anda memiliki waktu muat yang cepat, antarmuka yang responsif, dan navigasi yang lancar. Dengan mendukung fitur seperti lazy loading dan optimasi gambar, pengguna akan menikmati pengalaman belanja yang mulus dan efisien.

Keuntungan Menggunakan Next.js dalam Pembangunan E-Commerce

Ada beberapa keuntungan utama yang dapat Anda nikmati saat membangun situs e-commerce menggunakan Next.js:

Pre-rendering dan SEO-friendly

Dengan kemampuan untuk melakukan server-side rendering dan static site generation, Next.js memungkinkan situs Anda lebih mudah ditemukan oleh mesin pencari. Produk dan konten penting lainnya akan dirender lebih cepat dan langsung dapat diindeks.

Pengalaman Pengguna yang Optimal

Kecepatan situs adalah faktor penting dalam mempengaruhi konversi dan kepuasan pelanggan. Next.js secara otomatis mengoptimalkan performa aplikasi dengan fitur seperti lazy loading dan pengelolaan sumber daya.

API Routes untuk Backend

Next.js memungkinkan Anda untuk membangun API langsung di dalam proyek Next.js menggunakan API routes, tanpa memerlukan server terpisah. Hal ini mempermudah pengelolaan data, seperti produk dan transaksi pengguna, dalam satu tempat.

Optimasi Gambar dan Media

Situs e-commerce bergantung pada gambar produk yang tajam dan jelas. Next.js dilengkapi dengan dukungan otomatis untuk optimasi gambar, mengurangi ukuran file dan meningkatkan kecepatan halaman tanpa mengorbankan kualitas gambar.

Pengelolaan State yang Efisien

Dengan menggunakan React sebagai dasar, Next.js memungkinkan penggunaan berbagai solusi pengelolaan state seperti Redux atau Context API untuk menangani state aplikasi, termasuk keranjang belanja, status pengguna, dan preferensi lainnya.

Deployment yang Mudah

Platform seperti Vercel memungkinkan Anda untuk dengan mudah melakukan deploy aplikasi Next.js ke cloud, memastikan aplikasi Anda selalu tersedia dan dapat diskalakan sesuai kebutuhan.

Dengan pemahaman tentang kelebihan dan alasan memilih Next.js untuk e-commerce, selanjutnya kita akan membahas bagaimana mempersiapkan proyek e-commerce menggunakan Next.js.

Persiapan Proyek

Sebelum kita mulai membangun aplikasi e-commerce dengan Next.js, ada beberapa langkah persiapan yang perlu dilakukan, termasuk menginstal perangkat lunak yang diperlukan dan membuat proyek Next.js baru.

1. Persyaratan Sistem dan Alat yang Diperlukan

Untuk mengembangkan situs e-commerce menggunakan Next.js, Anda perlu menyiapkan beberapa alat dan perangkat lunak berikut:

Node.js: Next.js berjalan di atas Node.js, jadi pastikan Anda sudah menginstalnya. Gunakan versi terbaru agar mendapatkan fitur dan peningkatan terbaru.
NPM atau Yarn: Manajer paket untuk menginstal dependensi. Secara default, Node.js sudah menyertakan NPM, tetapi Anda juga bisa menggunakan Yarn sebagai alternatif.
Git: Berguna untuk mengelola versi proyek Anda.
Code Editor (VS Code disarankan): Editor kode yang akan digunakan untuk menulis dan mengedit proyek.
Browser Modern (Google Chrome atau Firefox): Untuk menguji tampilan dan fungsionalitas aplikasi.

Memeriksa Instalasi Node.js dan NPM

Sebelum melanjutkan, pastikan Node.js sudah terpasang dengan menjalankan perintah berikut di terminal atau command prompt:

node -v

Jika Node.js sudah terinstal, Anda akan melihat output berupa versi Node.js yang terpasang, misalnya:

v18.16.0

Untuk memastikan NPM juga sudah terinstal, jalankan:

npm -v

Jika berhasil, akan muncul versi NPM yang digunakan, misalnya:

9.5.1

Jika Node.js belum terpasang, Anda bisa mengunduh dan menginstalnya dari situs resmi https://nodejs.org .

2. Membuat Proyek Next.js Baru

Setelah semua alat siap, kita akan membuat proyek Next.js baru untuk e-commerce.

Menggunakan Create Next App

Cara termudah untuk memulai proyek Next.js adalah dengan menggunakan perintah berikut di terminal:

npx create-next-app@latest next-ecommerce

Atau, jika menggunakan Yarn:

yarn create next-app next-ecommerce

Perintah ini akan membuat proyek Next.js baru dengan konfigurasi dasar. Anda akan diminta untuk menjawab beberapa pertanyaan konfigurasi seperti:

Would you like to use TypeScript? → Ketik No jika tidak ingin menggunakan TypeScript (atau Yes jika ingin menggunakan TypeScript).
Would you like to use ESLint? → Ketik Yes untuk menambahkan linting ke proyek.
Would you like to use Tailwind CSS? → Ketik Yes jika ingin menggunakan Tailwind untuk styling.
Would you like to use “src/” directory? → Ketik Yes agar kode disimpan dalam folder src.
Would you like to use experimental app directory? → Ketik No (kecuali ingin mencoba fitur experimental).

Setelah proses instalasi selesai, masuk ke direktori proyek dengan perintah:

cd next-ecommerce

Kemudian jalankan aplikasi untuk memastikan semuanya berjalan dengan baik:

npm run dev

Jika berhasil, Anda akan melihat pesan seperti berikut:

Local: http://localhost:3000

Buka browser dan akses http://localhost:3000. Anda akan melihat halaman default Next.js.

3. Struktur Direktori dan File dalam Proyek Next.js

Setelah proyek berhasil dibuat, mari kita lihat struktur direktori yang dihasilkan:

next-ecommerce/
│── node_modules/
│── public/
│── src/
│ │── pages/
│ │ │── _app.js
│ │ │── index.js
│ │── components/
│ │── styles/
│── .gitignore
│── package.json
│── README.md

Penjelasan masing-masing folder dan file:

pages/ → Berisi halaman utama aplikasi. Next.js secara otomatis menjadikan setiap file dalam folder ini sebagai rute.
public/ → Folder untuk menyimpan aset statis seperti gambar dan ikon.
components/ → Tempat menyimpan komponen yang dapat digunakan ulang seperti header, footer, dan kartu produk.
styles/ → Folder untuk file CSS dan styling
package.json → Berisi informasi proyek dan dependensi yang digunakan.

Sekarang kita sudah menyiapkan proyek Next.js dasar. Selanjutnya, kita akan mulai membangun antarmuka pengguna untuk e-commerce dengan membuat halaman produk.

Desain Antarmuka Pengguna

Setelah menyiapkan proyek Next.js, langkah berikutnya adalah membangun antarmuka pengguna (UI) untuk aplikasi e-commerce kita. Pada bagian ini, kita akan:

Membuat halaman produk
Menampilkan daftar produk
Menambahkan gambar dan deskripsi produk
Menggunakan Tailwind CSS untuk styling (opsional)

1. Membuat Halaman Produk

Dalam folder pages/, kita akan membuat halaman utama e-commerce yang menampilkan daftar produk.

Buka file src/pages/index.js dan ubah kodenya menjadi seperti berikut:

import Head from "next/head";

export default function Home() {
return (
<div>
<Head>
<title>Next.js E-Commerce</title>
<meta name="description" content="Toko online dengan Next.js" />
</Head>
<h1>Selamat Datang di Toko Online</h1>
<p>Temukan berbagai produk terbaik dengan harga terbaik!</p>
</div>
);
}

Penjelasan kode:

<Head>: Digunakan untuk menambahkan meta tag, yang penting untuk SEO.
<h1> dan <p>: Elemen dasar untuk tampilan teks di halaman utama.

Sekarang jalankan server dengan perintah:

npm run dev

Kemudian buka browser dan akses http://localhost:3000, seharusnya muncul teks “Selamat Datang di Toko Online”.

2. Menampilkan Daftar Produk

Selanjutnya, kita akan menampilkan beberapa produk di halaman utama. Untuk sementara, kita akan menggunakan data produk dummy.

Buka file src/pages/index.js dan ubah kodenya menjadi:

import Head from "next/head";

const products = [
{ id: 1, name: "Laptop Gaming", price: 15000000, image: "/laptop.jpg" },
{ id: 2, name: "Smartphone 5G", price: 8000000, image: "/smartphone.jpg" },
{ id: 3, name: "Headset Bluetooth", price: 500000, image: "/headset.jpg" },
];

export default function Home() {
return (
<div>
<Head>
<title>Next.js E-Commerce</title>
<meta name="description" content="Toko online dengan Next.js" />
</Head>
<h1>Selamat Datang di Toko Online</h1>
<div style={{ display: "flex", gap: "20px", flexWrap: "wrap" }}>
{products.map((product) => (
<div
key={product.id}
style={{
border: "1px solid #ddd",
padding: "10px",
borderRadius: "5px",
width: "200px",
textAlign: "center",
}}
>
<img src={product.image} alt={product.name} width="100%" />
<h2>{product.name}</h2>
<p>Rp {product.price.toLocaleString()}</p>
<button style={{ backgroundColor: "blue", color: "white", padding: "5px 10px" }}>
Tambah ke Keranjang
</button>
</div>
))}
</div>
</div>
);
}

Penjelasan kode:

Kita membuat array products untuk menyimpan data produk dummy.
Menggunakan fungsi map() untuk menampilkan daftar produk dalam card sederhana.
Gambar produk disimpan di folder public/. Pastikan Anda memiliki file gambar laptop.jpg, smartphone.jpg, dan headset.jpg di dalam folder public/.

Sekarang lihat kembali browser, halaman utama akan menampilkan daftar produk dalam bentuk kartu!

3. Menggunakan Tailwind CSS untuk Styling (Opsional)

Agar tampilan lebih menarik, kita bisa menggunakan Tailwind CSS. Jika Anda memilih “Yes” untuk Tailwind CSS saat membuat proyek, framework ini sudah siap digunakan. Jika belum, Anda bisa menginstalnya dengan perintah berikut:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Kemudian buka file tailwind.config.js dan ubah menjadi seperti ini:

module.exports = {
content: ["./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};

Lalu, edit file src/styles/globals.css dan tambahkan baris ini di awal:

@tailwind base;
@tailwind components;
@tailwind utilities;

Sekarang ubah kode di src/pages/index.js agar menggunakan Tailwind CSS:

import Head from "next/head";

const products = [
{ id: 1, name: "Laptop Gaming", price: 15000000, image: "/laptop.jpg" },
{ id: 2, name: "Smartphone 5G", price: 8000000, image: "/smartphone.jpg" },
{ id: 3, name: "Headset Bluetooth", price: 500000, image: "/headset.jpg" },
];

export default function Home() {
return (
<div className="min-h-screen p-6">
<Head>
<title>Next.js E-Commerce</title>
<meta name="description" content="Toko online dengan Next.js" />
</Head>
<h1 className="text-3xl font-bold text-center">Selamat Datang di Toko Online</h1>
<div className="flex flex-wrap justify-center gap-6 mt-6">
{products.map((product) => (
<div
key={product.id}
className="border border-gray-300 p-4 rounded-lg w-64 text-center shadow-lg"
>
<img src={product.image} alt={product.name} className="w-full h-40 object-cover" />
<h2 className="text-xl font-semibold mt-2">{product.name}</h2>
<p className="text-lg text-gray-600">Rp {product.price.toLocaleString()}</p>
<button className="bg-blue-500 text-white px-4 py-2 rounded mt-4 hover:bg-blue-600">
Tambah ke Keranjang
</button>
</div>
))}
</div>
</div>
);
}

Perubahan dengan Tailwind CSS:

Menambahkan margin dan padding agar lebih rapi.
Menggunakan flexbox agar produk tersusun dengan baik.
Menambahkan shadow dan hover effects agar lebih menarik.

Sekarang buka browser, dan tampilan produk lebih modern dan responsif!

Kesimpulan Sementara

Di bagian ini, kita telah berhasil:

Membuat halaman utama dengan daftar produk.
Menampilkan produk dalam bentuk card dengan gambar dan harga.
Menggunakan Tailwind CSS untuk mempercantik tampilan.

Selanjutnya, kita akan menambahkan fitur Keranjang Belanja agar pengguna bisa menambahkan produk yang diinginkan!

Menambahkan Fitur Keranjang Belanja

Agar e-commerce lebih interaktif, kita akan menambahkan fitur keranjang belanja. Fitur ini memungkinkan pengguna menambahkan produk ke dalam keranjang dan melihat total harga belanjaan mereka.

1. Membuat State untuk Menyimpan Produk dalam Keranjang

Karena kita menggunakan React (Next.js), kita bisa menggunakan useState untuk menyimpan daftar produk yang ditambahkan ke keranjang.

Buka file src/pages/index.js dan ubah kode menjadi seperti ini:

import { useState } from "react";
import Head from "next/head";

const products = [
{ id: 1, name: "Laptop Gaming", price: 15000000, image: "/laptop.jpg" },
{ id: 2, name: "Smartphone 5G", price: 8000000, image: "/smartphone.jpg" },
{ id: 3, name: "Headset Bluetooth", price: 500000, image: "/headset.jpg" },
];

export default function Home() {
const [cart, setCart] = useState([]);

const addToCart = (product) => {
setCart([...cart, product]);
};

return (
<div className="min-h-screen p-6">
<Head>
<title>Next.js E-Commerce</title>
<meta name="description" content="Toko online dengan Next.js" />
</Head>

<h1 className="text-3xl font-bold text-center">Selamat Datang di Toko Online</h1>

<div className="flex flex-wrap justify-center gap-6 mt-6">
{products.map((product) => (
<div key={product.id} className="border border-gray-300 p-4 rounded-lg w-64 text-center shadow-lg">
<img src={product.image} alt={product.name} className="w-full h-40 object-cover" />
<h2 className="text-xl font-semibold mt-2">{product.name}</h2>
<p className="text-lg text-gray-600">Rp {product.price.toLocaleString()}</p>
<button
className="bg-blue-500 text-white px-4 py-2 rounded mt-4 hover:bg-blue-600"
onClick={() => addToCart(product)}
>
Tambah ke Keranjang
</button>
</div>
))}
</div>

{/* Menampilkan isi keranjang */}
<div className="mt-8 p-4 border-t border-gray-300">
<h2 className="text-2xl font-bold">Keranjang Belanja</h2>
{cart.length > 0 ? (
<ul>
{cart.map((item, index) => (
<li key={index} className="flex justify-between p-2 border-b">
<span>{item.name}</span>
<span>Rp {item.price.toLocaleString()}</span>
</li>
))}
</ul>
) : (
<p className="text-gray-500">Keranjang belanja masih kosong.</p>
)}
</div>
</div>
);
}

2. Penjelasan Kode

Apa yang baru dalam kode ini?

Menggunakan useState([]) untuk menyimpan daftar produk di dalam keranjang.
Fungsi addToCart(product) untuk menambahkan produk ke dalam keranjang.
Menampilkan isi keranjang belanja di bawah daftar produk.

Coba jalankan ulang server dengan perintah:

npm run dev

Kemudian buka browser, klik tombol Tambah ke Keranjang, dan lihat bagaimana produk muncul dalam daftar keranjang belanja!

3. Menambahkan Fitur Hapus Produk dari Keranjang

Saat ini, kita hanya bisa menambah produk ke keranjang, tapi tidak bisa menghapusnya. Mari tambahkan fitur hapus produk dari keranjang.

Ubah kode pada bagian keranjang seperti ini:

const removeFromCart = (index) => {
setCart(cart.filter((_, i) => i !== index));
};

Lalu, pada bagian daftar keranjang, tambahkan tombol hapus:

<ul>
{cart.map((item, index) => (
<li key={index} className="flex justify-between p-2 border-b">
<span>{item.name}</span>
<span>Rp {item.price.toLocaleString()}</span>
<button
className="bg-red-500 text-white px-2 py-1 rounded hover:bg-red-600"
onClick={() => removeFromCart(index)}
>
Hapus
</button>
</li>
))}
</ul>

Sekarang pengguna bisa menghapus produk dari keranjang dengan klik tombol “Hapus”.

4. Menampilkan Total Harga di Keranjang

Agar lebih informatif, kita bisa menampilkan total harga dari semua produk dalam keranjang.

Tambahkan kode berikut di bawah daftar keranjang:

const totalPrice = cart.reduce((sum, item) => sum + item.price, 0);

Lalu, tampilkan total harga setelah daftar produk dalam keranjang:

{cart.length > 0 && (
<div className="mt-4 font-semibold text-lg">
Total: Rp {totalPrice.toLocaleString()}
</div>
)}

5. Menambahkan Notifikasi saat Produk Ditambahkan ke Keranjang

Agar lebih interaktif, kita bisa menambahkan notifikasi sederhana dengan React state.

Tambahkan state message untuk notifikasi:

const [message, setMessage] = useState("");

Perbarui fungsi addToCart untuk menampilkan notifikasi:

const addToCart = (product) => {
setCart([...cart, product]);
setMessage(`${product.name} berhasil ditambahkan ke keranjang!`);
setTimeout(() => setMessage(""), 2000);
};

Tambahkan elemen notifikasi di bawah judul halaman utama:

{message && (
<div className="bg-green-200 text-green-800 p-2 rounded-md text-center my-4">
{message}
</div>
)}

Sekarang, setiap kali menambahkan produk ke keranjang, akan muncul notifikasi sementara!

Kesimpulan Sementara

Di bagian ini, kita telah:

Menambahkan fitur keranjang belanja dengan useState
Membuat tombol “Tambah ke Keranjang” untuk setiap produk
Menampilkan daftar produk di keranjang belanja
Menambahkan tombol “Hapus” untuk menghapus produk dari keranjang
Menampilkan total harga produk di dalam keranjang
Menambahkan notifikasi saat produk ditambahkan

Sekarang e-commerce kita sudah mulai terasa fungsional!

Langkah Selanjutnya

Untuk tahap berikutnya, kita bisa menambahkan:

Halaman checkout untuk menyelesaikan pesanan
Penyimpanan keranjang ke local storage agar tetap tersimpan saat halaman di-refresh
Integrasi dengan backend atau database (misalnya Firebase atau MongoDB)

Menambahkan Fitur Checkout & Penyimpanan Data

Sekarang kita akan menambahkan fitur checkout agar pengguna bisa menyelesaikan pesanan mereka. Kita juga akan menyimpan data keranjang menggunakan Local Storage, sehingga produk dalam keranjang tetap tersimpan meskipun halaman di-refresh.

1. Menyimpan Data Keranjang ke Local Storage

Saat ini, keranjang belanja hanya tersimpan dalam state React. Jika pengguna merefresh halaman, semua data akan hilang. Solusinya, kita bisa menggunakan Local Storage agar data tetap tersimpan.

Memodifikasi State agar Tersimpan di Local Storage

Buka src/pages/index.js dan ubah kode seperti ini:

import { useState, useEffect } from "react";
import Head from "next/head";

const products = [
{ id: 1, name: "Laptop Gaming", price: 15000000, image: "/laptop.jpg" },
{ id: 2, name: "Smartphone 5G", price: 8000000, image: "/smartphone.jpg" },
{ id: 3, name: "Headset Bluetooth", price: 500000, image: "/headset.jpg" },
];

export default function Home() {
const [cart, setCart] = useState([]);

// Load keranjang dari Local Storage saat pertama kali render
useEffect(() => {
const savedCart = localStorage.getItem("cart");
if (savedCart) {
setCart(JSON.parse(savedCart));
}
}, []);

// Simpan keranjang ke Local Storage setiap kali berubah
useEffect(() => {
localStorage.setItem("cart", JSON.stringify(cart));
}, [cart]);

const addToCart = (product) => {
setCart([...cart, product]);
};

const removeFromCart = (index) => {
setCart(cart.filter((_, i) => i !== index));
};

const totalPrice = cart.reduce((sum, item) => sum + item.price, 0);

return (
<div className="min-h-screen p-6">
<Head>
<title>Next.js E-Commerce</title>
<meta name="description" content="Toko online dengan Next.js" />
</Head>

<h1 className="text-3xl font-bold text-center">Selamat Datang di Toko Online</h1>

<div className="flex flex-wrap justify-center gap-6 mt-6">
{products.map((product) => (
<div key={product.id} className="border border-gray-300 p-4 rounded-lg w-64 text-center shadow-lg">
<img src={product.image} alt={product.name} className="w-full h-40 object-cover" />
<h2 className="text-xl font-semibold mt-2">{product.name}</h2>
<p className="text-lg text-gray-600">Rp {product.price.toLocaleString()}</p>
<button
className="bg-blue-500 text-white px-4 py-2 rounded mt-4 hover:bg-blue-600"
onClick={() => addToCart(product)}
>
Tambah ke Keranjang
</button>
</div>
))}
</div>

{/* Menampilkan isi keranjang */}
<div className="mt-8 p-4 border-t border-gray-300">
<h2 className="text-2xl font-bold">Keranjang Belanja</h2>
{cart.length > 0 ? (
<ul>
{cart.map((item, index) => (
<li key={index} className="flex justify-between p-2 border-b">
<span>{item.name}</span>
<span>Rp {item.price.toLocaleString()}</span>
<button
className="bg-red-500 text-white px-2 py-1 rounded hover:bg-red-600"
onClick={() => removeFromCart(index)}
>
Hapus
</button>
</li>
))}
</ul>
) : (
<p className="text-gray-500">Keranjang belanja masih kosong.</p>
)}
{cart.length > 0 && (
<div className="mt-4 font-semibold text-lg">
Total: Rp {totalPrice.toLocaleString()}
</div>
)}
<button
className="bg-green-500 text-white px-4 py-2 rounded mt-4 hover:bg-green-600"
onClick={() => window.location.href = "/checkout"}
>
Checkout
</button>
</div>
</div>
);
}

2. Menambahkan Halaman Checkout

Selanjutnya, kita buat halaman checkout di src/pages/checkout.js.

Buat file baru checkout.js di dalam folder src/pages/, lalu tambahkan kode berikut:

import { useState, useEffect } from "react";
import Head from "next/head";

export default function Checkout() {
const [cart, setCart] = useState([]);

useEffect(() => {
const savedCart = localStorage.getItem("cart");
if (savedCart) {
setCart(JSON.parse(savedCart));
}
}, []);

const totalPrice = cart.reduce((sum, item) => sum + item.price, 0);

return (
<div className="min-h-screen p-6">
<Head>
<title>Checkout - Next.js E-Commerce</title>
</Head>

<h1 className="text-3xl font-bold text-center">Checkout</h1>

{cart.length > 0 ? (
<div className="mt-6">
<ul>
{cart.map((item, index) => (
<li key={index} className="flex justify-between p-2 border-b">
<span>{item.name}</span>
<span>Rp {item.price.toLocaleString()}</span>
</li>
))}
</ul>
<div className="mt-4 font-semibold text-lg">Total: Rp {totalPrice.toLocaleString()}</div>

{/* Formulir Checkout */}
<div className="mt-6">
<h2 className="text-xl font-bold">Detail Pembayaran</h2>
<form className="mt-4">
<label className="block">
Nama Lengkap:
<input type="text" className="border w-full p-2 mt-1 rounded" required />
</label>
<label className="block mt-4">
Alamat Pengiriman:
<input type="text" className="border w-full p-2 mt-1 rounded" required />
</label>
<label className="block mt-4">
Metode Pembayaran:
<select className="border w-full p-2 mt-1 rounded">
<option>Transfer Bank</option>
<option>e-Wallet</option>
<option>Kartu Kredit</option>
</select>
</label>

<button
type="submit"
className="bg-blue-500 text-white px-4 py-2 rounded mt-4 hover:bg-blue-600"
onClick={() => alert("Pesanan berhasil dibuat!")}
>
Buat Pesanan
</button>
</form>
</div>
</div>
) : (
<p className="text-gray-500 text-center mt-6">Keranjang belanja masih kosong.</p>
)}
</div>
);
}

3. Uji Coba Checkout

Jalankan server dengan npm run dev
Tambahkan produk ke keranjang
Klik “Checkout”
Isi data pengiriman
Klik “Buat Pesanan”, dan akan muncul alert “Pesanan berhasil dibuat!”

Sekarang toko online kita bisa menyelesaikan pesanan!

Kesimpulan

Menyimpan keranjang belanja ke Local Storage
Menambahkan halaman Checkout
Menyediakan formulir pembayaran
Menampilkan total harga di halaman checkout

Langkah Selanjutnya:

Integrasi API pembayaran seperti Midtrans atau Stripe
Menyimpan data pesanan ke database (Firebase atau MongoDB)

Integrasi Backend & Pembayaran Online di Next.js E-Commerce

Saat ini, toko online kita bisa menampilkan produk, menyimpan keranjang belanja, dan menyelesaikan pesanan. Langkah berikutnya adalah:

Menyimpan data pesanan ke database
Menghubungkan pembayaran online (contoh: Midtrans, Stripe, atau PayPal)

1. Menggunakan Firebase untuk Menyimpan Data Pesanan

Agar pesanan pelanggan bisa tersimpan dengan aman, kita akan menggunakan Firebase Firestore.

Setup Firebase Firestore

Buka Firebase Console dan buat proyek baru.
Tambahkan Firestore Database di menu “Build > Firestore Database”.
Buat koleksi baru bernama orders untuk menyimpan pesanan pelanggan.
Dapatkan Konfigurasi API Firebase, lalu buat file .env.local di root proyek Next.js dan isi:

NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id

Instal Firebase di proyek Next.js

npm install firebase

Buat file firebase.js di folder src/lib/

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export { db };

2. Menyimpan Pesanan ke Firestore

Sekarang kita akan menyimpan data pesanan ke Firestore saat pelanggan checkout.

Buka src/pages/checkout.js, lalu tambahkan Firebase Firestore:

import { useState, useEffect } from "react";
import Head from "next/head";
import { db } from "@/lib/firebase";
import { collection, addDoc } from "firebase/firestore";

export default function Checkout() {
const [cart, setCart] = useState([]);
const [name, setName] = useState("");
const [address, setAddress] = useState("");
const [paymentMethod, setPaymentMethod] = useState("Transfer Bank");
const [loading, setLoading] = useState(false);

useEffect(() => {
const savedCart = localStorage.getItem("cart");
if (savedCart) {
setCart(JSON.parse(savedCart));
}
}, []);

const totalPrice = cart.reduce((sum, item) => sum + item.price, 0);

const handleCheckout = async (e) => {
e.preventDefault();
setLoading(true);

try {
const order = {
name,
address,
paymentMethod,
cart,
totalPrice,
status: "Pending",
createdAt: new Date(),
};

// Simpan ke Firestore
await addDoc(collection(db, "orders"), order);

// Bersihkan keranjang setelah checkout
localStorage.removeItem("cart");
setCart([]);
alert("Pesanan berhasil dibuat!");
} catch (error) {
console.error("Error menyimpan pesanan:", error);
alert("Gagal melakukan checkout.");
}

setLoading(false);
};

return (
<div className="min-h-screen p-6">
<Head>
<title>Checkout - Next.js E-Commerce</title>
</Head>

<h1 className="text-3xl font-bold text-center">Checkout</h1>

{cart.length > 0 ? (
<div className="mt-6">
<ul>
{cart.map((item, index) => (
<li key={index} className="flex justify-between p-2 border-b">
<span>{item.name}</span>
<span>Rp {item.price.toLocaleString()}</span>
</li>
))}
</ul>
<div className="mt-4 font-semibold text-lg">Total: Rp {totalPrice.toLocaleString()}</div>

<form className="mt-6" onSubmit={handleCheckout}>
<label className="block">
Nama Lengkap:
<input
type="text"
className="border w-full p-2 mt-1 rounded"
value={name}
onChange={(e) => setName(e.target.value)}
required
/>
</label>
<label className="block mt-4">
Alamat Pengiriman:
<input
type="text"
className="border w-full p-2 mt-1 rounded"
value={address}
onChange={(e) => setAddress(e.target.value)}
required
/>
</label>
<label className="block mt-4">
Metode Pembayaran:
<select
className="border w-full p-2 mt-1 rounded"
value={paymentMethod}
onChange={(e) => setPaymentMethod(e.target.value)}
>
<option>Transfer Bank</option>
<option>e-Wallet</option>
<option>Kartu Kredit</option>
</select>
</label>

<button
type="submit"
className="bg-blue-500 text-white px-4 py-2 rounded mt-4 hover:bg-blue-600"
disabled={loading}
>
{loading ? "Memproses..." : "Buat Pesanan"}
</button>
</form>
</div>
) : (
<p className="text-gray-500 text-center mt-6">Keranjang belanja masih kosong.</p>
)}
</div>
);
}

3. Menghubungkan API Pembayaran Online

Selanjutnya, kita bisa menghubungkan Midtrans, Stripe, atau PayPal untuk menerima pembayaran.

Contoh: Menggunakan Midtrans

Buat akun di Midtrans dan dapatkan API Key.
Tambahkan API Key ke .env.local

MIDTRANS_SERVER_KEY=your_midtrans_server_key
MIDTRANS_CLIENT_KEY=your_midtrans_client_key

Instal axios untuk komunikasi dengan API

npm install axios

Modifikasi handleCheckout untuk terhubung ke Midtrans

import axios from "axios";

const handleCheckout = async (e) => {
e.preventDefault();
setLoading(true);

try {
const response = await axios.post("/api/payment", {
totalPrice,
});

window.location.href = response.data.redirect_url;
} catch (error) {
console.error("Error pembayaran:", error);
alert("Gagal memproses pembayaran.");
}

setLoading(false);
};

Buat API endpoint di src/pages/api/payment.js

import axios from "axios";

export default async function handler(req, res) {
if (req.method === "POST") {
try {
const response = await axios.post("https://api.sandbox.midtrans.com/v2/charge", {
transaction_details: {
order_id: new Date().getTime(),
gross_amount: req.body.totalPrice,
},
}, {
headers: {
Authorization: `Basic ${Buffer.from(process.env.MIDTRANS_SERVER_KEY).toString("base64")}`,
"Content-Type": "application/json",
},
});

res.status(200).json(response.data);
} catch (error) {
res.status(500).json({ message: "Gagal membuat transaksi" });
}
}
}

Sekarang toko online kita sudah memiliki fitur checkout dengan Midtrans!

Deployment & Optimasi SEO pada Next.js E-Commerce*

Sekarang toko online kita sudah memiliki fitur:

Menampilkan produk
Menyimpan keranjang belanja
Checkout dengan Firebase Firestore
Pembayaran online dengan Midtrans

Langkah selanjutnya:

Deploy ke Vercel/Netlify
Optimasi SEO agar toko muncul di Google
Meningkatkan kecepatan website

1. Deployment ke Vercel atau Netlify

Deploy ke Vercel

Install Vercel CLI (jika belum)

npm install -g vercel

vercel login

Deploy proyek

vercel

Set Konfigurasi Environment Variable

Masuk ke Vercel Dashboard
Pilih proyek → Settings → Environment Variables
Tambahkan semua .env.local yang kita buat tadi

Selesai! Toko online sudah online di https://namaprojek.vercel.app

Deploy ke Netlify

Install Netlify CLI

npm install -g netlify-cli

netlify login

Deploy proyek

netlify deploy --prod

Tambahkan Environment Variables di Netlify Dashboard
Selesai! Website siap diakses di https://namaprojek.netlify.app

2. Optimasi SEO untuk Next.js E-Commerce

Agar website kita mudah ditemukan di Google, lakukan optimasi berikut:

1. Tambahkan Meta Tags di Setiap Halaman

Buka src/pages/_app.js, tambahkan Head dari Next.js:

import Head from "next/head";

function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<title>Toko Online Murah - Next.js E-Commerce</title>
<meta name="description" content="Beli produk berkualitas dengan harga terbaik di Toko Online Murah. Pengiriman cepat & aman!" />
<meta name="keywords" content="toko online, belanja murah, next.js e-commerce" />
<meta name="robots" content="index, follow" />
<meta property="og:title" content="Toko Online Murah" />
<meta property="og:description" content="Beli produk berkualitas dengan harga terbaik di Toko Online Murah." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://namatoko.com" />
<meta property="og:image" content="https://namatoko.com/logo.png" />
</Head>
<Component {...pageProps} />
</>
);
}

export default MyApp;

2. Gunakan Struktur Data Schema Markup

Schema Markup membantu Google memahami website kita.

Buka src/pages/index.js, tambahkan JSON-LD Schema

import Head from "next/head";

export default function Home() {
return (
<div>
<Head>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{
__html: JSON.stringify({
"@context": "https://schema.org",
"@type": "Store",
"name": "Toko Online Murah",
"url": "https://namatoko.com",
"logo": "https://namatoko.com/logo.png",
"description": "Beli produk berkualitas dengan harga terbaik.",
"address": {
"@type": "PostalAddress",
"streetAddress": "Jl. Raya No. 123",
"addressLocality": "Jakarta",
"postalCode": "12345",
"addressCountry": "ID"
},
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+62-812-3456-7890",
"contactType": "customer service"
}
})
}}
/>
</Head>
<h1>Selamat Datang di Toko Online Murah</h1>
</div>
);
}

Validasi Schema di Google Structured Data Testing Tool

3. Optimasi Gambar dengan Next.js Image

Pastikan semua gambar menggunakan <Image /> dari Next.js

import Image from "next/image";

<Image src="/produk.jpg" alt="Produk" width={500} height={500} />

Kompres gambar sebelum upload ke server dengan TinyPNG .

4. Gunakan Sitemap & Robots.txt

Install next-sitemap untuk membuat sitemap otomatis

npm install next-sitemap

Buat file next-sitemap.js di root proyek

module.exports = {
siteUrl: "https://namatoko.com",
generateRobotsTxt: true,
};

Tambahkan script ke package.json

"scripts": {
"postbuild": "next-sitemap"
}

Jalankan

npm run build && npm run postbuild

Tambahkan ke Google Search Console

Buka Google Search Console
Submit sitemap.xml

3. Meningkatkan Kecepatan Website

1. Gunakan Lazy Load untuk Gambar

<Image src="/produk.jpg" alt="Produk" width={500} height={500} loading="lazy" />

2. Gunakan CDN untuk Aset Statis

Gunakan Cloudflare atau Vercel CDN untuk caching otomatis.

3. Aktifkan ISR (Incremental Static Regeneration)

Ubah getServerSideProps menjadi getStaticProps di index.js:

export async function getStaticProps() {
const res = await fetch("https://api.example.com/products");
const products = await res.json();

return {
props: { products },
revalidate: 60, // regenerate page every 60 seconds
};
}

Selamat! Toko online Next.js kamu sudah siap online dan SEO-friendly!

Checklist Akhir:

Deploy ke Vercel/Netlify
Optimasi SEO
Meningkatkan kecepatan website

Langkah Selanjutnya:

Tambahkan fitur Wishlist
Gunakan Redux untuk state management
Integrasi Google Analytics & Facebook Pixel

Kesimpulan Akhir

Membangun e-commerce dengan Next.js memberikan banyak keuntungan, seperti kecepatan tinggi, SEO yang lebih baik, dan fleksibilitas dalam integrasi backend serta pembayaran online. Dalam tutorial ini, kita telah membahas langkah-langkah detail untuk membuat toko online dari nol hingga siap digunakan:

Membuat proyek Next.js & Tailwind CSS untuk tampilan responsif dan modern.
Menampilkan daftar produk dengan data dinamis menggunakan API atau database.
Membuat fitur keranjang belanja (Cart) menggunakan React Hooks & Local Storage.
Menyimpan pesanan ke database menggunakan Firebase Firestore.
Mengintegrasikan pembayaran online dengan Midtrans (bisa juga Stripe atau PayPal).
Mendeploy website ke Vercel/Netlify agar bisa diakses secara online.
Optimasi SEO & performa agar website mudah ditemukan di Google.

Dengan optimasi yang baik, toko online berbasis Next.js bisa menjadi solusi e-commerce yang cepat, aman, dan efisien.

Langkah Selanjutnya:

Tambahkan fitur Wishlist & Review Produk
Gunakan Redux atau Context API untuk manajemen state
Integrasikan Google Analytics & Facebook Pixel untuk tracking pengguna

Semoga tutorial ini membantu! Jika ada pertanyaan atau ingin menambahkan fitur lain, silakan diskusi.

Tag: #Tutorial #Programming

Share Artikel

Next.Js E-Commerce Tutorial Untuk Pemula

Mengapa Menggunakan Next.js untuk E-Commerce?

Keuntungan Menggunakan Next.js dalam Pembangunan E-Commerce

Persiapan Proyek

1. Persyaratan Sistem dan Alat yang Diperlukan

Memeriksa Instalasi Node.js dan NPM

2. Membuat Proyek Next.js Baru

Menggunakan Create Next App

3. Struktur Direktori dan File dalam Proyek Next.js

Desain Antarmuka Pengguna

1. Membuat Halaman Produk

2. Menampilkan Daftar Produk

3. Menggunakan Tailwind CSS untuk Styling (Opsional)

Kesimpulan Sementara

Menambahkan Fitur Keranjang Belanja

1. Membuat State untuk Menyimpan Produk dalam Keranjang

2. Penjelasan Kode

3. Menambahkan Fitur Hapus Produk dari Keranjang

4. Menampilkan Total Harga di Keranjang

5. Menambahkan Notifikasi saat Produk Ditambahkan ke Keranjang

Kesimpulan Sementara

Langkah Selanjutnya

Menambahkan Fitur Checkout & Penyimpanan Data

1. Menyimpan Data Keranjang ke Local Storage

Memodifikasi State agar Tersimpan di Local Storage

2. Menambahkan Halaman Checkout

3. Uji Coba Checkout

Kesimpulan

Integrasi Backend & Pembayaran Online di Next.js E-Commerce

1. Menggunakan Firebase untuk Menyimpan Data Pesanan

Setup Firebase Firestore

2. Menyimpan Pesanan ke Firestore

3. Menghubungkan API Pembayaran Online

Deployment & Optimasi SEO pada Next.js E-Commerce*

1. Deployment ke Vercel atau Netlify

Deploy ke Vercel

Deploy ke Netlify

2. Optimasi SEO untuk Next.js E-Commerce

1. Tambahkan Meta Tags di Setiap Halaman

2. Gunakan Struktur Data Schema Markup

3. Optimasi Gambar dengan Next.js Image

4. Gunakan Sitemap & Robots.txt

3. Meningkatkan Kecepatan Website

1. Gunakan Lazy Load untuk Gambar

2. Gunakan CDN untuk Aset Statis

3. Aktifkan ISR (Incremental Static Regeneration)

Kesimpulan Akhir

Baca Juga

Follow Media Sosial Ku