Tips Frontend Development

useState adalah salah satu hooks yang sangat bermanfaat dalam framework React. Dengan menggunakan useState, developer dapat mengelola state atau keadaan di dalam komponen React dengan lebih efisien. Hal ini sangat membantu dalam membangun website modern yang dinamis, serta meningkatkan user experience (UX). Ketika developer ingin membuat komponen yang dapat merespon input pengguna atau perubahan data secara real-time, useState menjadi alat yang sangat tepat untuk digunakan. Menerapkan useState dalam Projek Booking Flight Ticket Dalam artikel ini, kita akan belajar cara menerapkan useState pada sebuah projek website booking flight ticket. Dengan menerapkan useState, kita dapat mengelola berbagai data dan interaksi pengguna, seperti memilih kota asal dan tujuan penerbangan, tanggal keberangkatan, jumlah penumpang, serta proses konfirmasi tiket. Penggunaan useState pada website booking semacam ini tidak hanya membuat website lebih interaktif, tetapi juga memudahkan pengguna untuk melakukan reservasi secara lebih intuitif. Tujuan dari artikel ini adalah memberikan gambaran umum tentang bagaimana useState dapat diterapkan pada projek nyata. Contoh-contoh yang dibahas akan menunjukkan penerapan praktis useState, sehingga Anda bisa lebih memahami cara penggunaannya dalam pengembangan aplikasi booking flight ticket. Cara Membuat Project React Booking Flight Ticket dengan Vite dan Menggunakan TypeScript Pada bagian ini, kita akan membahas cara membuat project React dengan Vite dan TypeScript yang berfungsi sebagai sistem booking flight ticket. Setiap langkah diberikan dengan contoh koding yang jelas untuk memudahkan Anda mengikuti prosesnya. 1. Instalasi Vite dengan TypeScript Langkah pertama dalam membuat project React adalah menginstal Vite dengan template TypeScript. Buka terminal dan jalankan perintah berikut: npm create vite@latest Saat diminta, berikan nama project, misalnya flight-booking-app, dan pilih React sebagai framework, lalu pilih TypeScript sebagai varian. Masuk ke direktori project dengan: cd flight-booking-app npm install Setelah itu, jalankan project dengan perintah: npm run dev Project Anda sekarang sudah berjalan dengan React dan TypeScript menggunakan Vite. 2. Struktur Folder Project Struktur folder yang dihasilkan oleh Vite sudah sangat ringkas. Folder src akan menjadi tempat Anda menyimpan komponen dan file lainnya. Berikut struktur dasarnya: flight-booking-app │ ├── src │ ├── components │ │ └── BookingForm.tsx │ └── App.tsx ├── public └── index.html Folder components akan digunakan untuk menyimpan komponen yang kita buat, seperti formulir booking penerbangan. 3. Membuat Komponen BookingForm Langkah berikutnya adalah membuat komponen BookingForm yang akan mengelola form booking penerbangan. Buat file baru di dalam folder components dengan nama BookingForm.tsx dan tambahkan kode berikut: import React, { useState } from 'react'; interface BookingFormProps {} const BookingForm: React.FC<BookingFormProps> = () => { const [departure, setDeparture] = useState(''); const [destination, setDestination] = useState(''); const [date, setDate] = useState(''); const [passengers, setPassengers] = useState(1); const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); console.log({ departure, destination, date, passengers, }); }; return ( <form onSubmit={handleSubmit}> <div> <label>Departure City:</label> <input type="text" value={departure} onChange={(e) => setDeparture(e.target.value)} /> </div> <div> <label>Destination City:</label> <input type="text" value={destination} onChange={(e) => setDestination(e.target.value)} /> </div> <div> <label>Date of Flight:</label> <input type="date" value={date} onChange={(e) => setDate(e.target.value)} /> </div> <div> <label>Number of Passengers:</label> <input type="number" value={passengers} onChange={(e) => setPassengers(parseInt(e.target.value))} min="1" /> </div> <button type="submit">Book Flight</button> </form> ); }; export default BookingForm; Komponen ini membuat form sederhana untuk booking penerbangan yang melibatkan input untuk kota keberangkatan, kota tujuan, tanggal, dan jumlah penumpang. Setiap input diatur menggunakan useState untuk menyimpan nilai yang dimasukkan pengguna. 4. Menghubungkan BookingForm ke App.tsx Buka file App.tsx di dalam folder src dan impor komponen BookingForm. Berikut adalah contoh kodingnya: import React from 'react'; import BookingForm from './components/BookingForm'; const App: React.FC = () => { return ( <div> <h1>Flight Ticket Booking</h1> <BookingForm /> </div> ); }; export default App; Pada file ini, kita mengimpor komponen BookingForm dan menampilkannya di dalam komponen App. Komponen BookingForm kini dapat digunakan untuk mengelola input pengguna. 5. Menjalankan Project Setelah semua kode diimplementasikan, Anda dapat menjalankan project dan melihat bagaimana form booking penerbangan bekerja. Pastikan terminal Anda tetap terbuka, dan jalankan kembali perintah berikut: npm run dev Buka browser Anda dan kunjungi URL yang diberikan oleh Vite, biasanya di http://localhost:5173. Di sana, Anda akan melihat halaman form booking penerbangan, dan data yang Anda masukkan akan tercatat di console browser ketika Anda mengklik tombol Book Flight. Cara Membuat types.ts dan Data Dummy untuk Projek Website Booking Flight Ticket Dalam pembuatan projek React dengan TypeScript, penting untuk mendefinisikan tipe data yang digunakan agar mempermudah dalam mengelola state dan memastikan konsistensi data di seluruh aplikasi. Di sini kita akan membuat file types.ts yang berisi tipe data untuk form booking penerbangan, dan juga file data dummy untuk simulasi data penerbangan. 1. Membuat File types.ts Pertama, buat sebuah file bernama types.ts di dalam folder src. File ini akan berfungsi untuk mendefinisikan tipe data yang digunakan dalam projek. Berikut adalah contoh kode yang bisa dimasukkan ke dalam types.ts: export interface FlightTicket { id: number; departure: string; destination: string; date: string; passengers: number; } export interface City { id: number; name: string; } Pada contoh di atas, kita membuat dua interface, yaitu FlightTicket yang digunakan untuk mendefinisikan data dari tiket penerbangan, dan City untuk daftar kota yang tersedia. 2. Membuat Data Dummy Setelah mendefinisikan tipe data di types.ts, langkah berikutnya adalah membuat file data dummy yang berisi contoh data penerbangan dan daftar kota. Buat file baru bernama dummyData.ts di dalam folder src dan tambahkan data dummy berikut: import { FlightTicket, City } from './types'; export const flightTickets: FlightTicket[] = [ { id: 1, departure: 'Jakarta', destination: 'Bali', date: '2024-11-01', passengers: 2, }, { id: 2, departure: 'Surabaya', destination: 'Lombok', date: '2024-11-05', passengers: 1, }, { id: 3, departure: 'Medan', destination: 'Jakarta', date: '2024-11-10', passengers: 4, }, ]; export const cities: City[] = [ { id: 1, name: 'Jakarta', }, { id: 2, name: 'Bali', }, { id: 3, name: 'Surabaya', }, { id: 4, name: 'Lombok', }, { id: 5, name: 'Medan', }, ]; File dummyData.ts ini berisi array flightTickets yang berisi data penerbangan, dan array cities yang berisi daftar kota asal dan tujuan penerbangan. Dengan data dummy ini, Anda dapat menggunakannya untuk mensimulasikan input atau pilihan kota dalam form booking di aplikasi. 3. Menggunakan Data Dummy di Komponen Sekarang, kita bisa menggunakan data dummy ini di komponen React kita, khususnya pada komponen BookingForm yang sudah dibuat sebelumnya. Berikut adalah contoh cara mengimpor dan menggunakan data tersebut di dalam komponen: import React, { useState } from 'react'; import { cities } from '../dummyData'; const BookingForm: React.FC = () => { const [departure, setDeparture] = useState(''); const [destination, setDestination] = useState(''); const [date, setDate] = useState(''); const [passengers, setPassengers] = useState(1); const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); console.log({ departure, destination, date, passengers, }); }; return ( <form onSubmit={handleSubmit}> <div> <label>Departure City:</label> <select value={departure} onChange={(e) => setDeparture(e.target.value)}> <option value="">Select City</option> {cities.map((city) => ( <option key={city.id} value={city.name}> {city.name} </option> ))} </select> </div> <div> <label>Destination City:</label> <select value={destination} onChange={(e) => setDestination(e.target.value)} > <option value="">Select City</option> {cities.map((city) => ( <option key={city.id} value={city.name}> {city.name} </option> ))} </select> </div> <div> <label>Date of Flight:</label> <input type="date" value={date} onChange={(e) => setDate(e.target.value)} /> </div> <div> <label>Number of Passengers:</label> <input type="number" value={passengers} onChange={(e) => setPassengers(parseInt(e.target.value))} min="1" /> </div> <button type="submit">Book Flight</button> </form> ); }; export default BookingForm; Pada contoh di atas, data dummy cities diimpor dari dummyData.ts dan digunakan untuk mengisi pilihan kota pada input select di form booking. Ini membuat form lebih dinamis dengan daftar kota yang tersedia untuk dipilih pengguna. 5 Contoh Penerapan useState Pada Projek Website Booking Flight Ticket Pada bagian ini, kita akan membahas beberapa contoh penerapan useState dari yang paling sederhana hingga yang lebih kompleks pada sebuah projek booking flight ticket. Setiap contoh dilengkapi dengan penjelasan dan contoh kode. 1. Mengelola Input Teks Sederhana dengan useState Pada kasus sederhana, kita dapat menggunakan useState untuk mengelola input teks dari pengguna. Misalnya, input untuk kota keberangkatan dan tujuan penerbangan. import React, { useState } from 'react'; const BookingForm: React.FC = () => { const [departure, setDeparture] = useState(''); const [destination, setDestination] = useState(''); return ( <form> <div> <label>Departure City:</label> <input type="text" value={departure} onChange={(e) => setDeparture(e.target.value)} /> </div> <div> <label>Destination City:</label> <input type="text" value={destination} onChange={(e) => setDestination(e.target.value)} /> </div> </form> ); }; export default BookingForm; Pada contoh ini, useState digunakan untuk menyimpan nilai dari input teks yang diambil dari pengguna. Ketika pengguna mengetik, nilai state diperbarui secara real-time. 2. Mengelola Input dengan Tipe Data Angka Selain mengelola input teks, useState juga dapat digunakan untuk mengelola input dengan tipe data angka, seperti jumlah penumpang. import React, { useState } from 'react'; const BookingForm: React.FC = () => { const [passengers, setPassengers] = useState(1); return ( <form> <div> <label>Number of Passengers:</label> <input type="number" value={passengers} onChange={(e) => setPassengers(parseInt(e.target.value))} min="1" /> </div> </form> ); }; export default BookingForm; Pada contoh ini, useState digunakan untuk menyimpan jumlah penumpang, yang dimasukkan melalui input bertipe angka (number). Nilai yang diinput akan diubah menjadi integer menggunakan parseInt. 3. Mengelola Pilihan Kota dengan Dropdown Berikut adalah contoh yang lebih kompleks, di mana kita menggunakan useState untuk mengelola pilihan kota menggunakan dropdown (select). import React, { useState } from 'react'; const cities = ['Jakarta', 'Bali', 'Surabaya', 'Lombok']; const BookingForm: React.FC = () => { const [departure, setDeparture] = useState(''); const [destination, setDestination] = useState(''); return ( <form> <div> <label>Departure City:</label> <select value={departure} onChange={(e) => setDeparture(e.target.value)}> <option value="">Select City</option> {cities.map((city) => ( <option key={city} value={city}> {city} </option> ))} </select> </div> <div> <label>Destination City:</label> <select value={destination} onChange={(e) => setDestination(e.target.value)} > <option value="">Select City</option> {cities.map((city) => ( <option key={city} value={city}> {city} </option> ))} </select> </div> </form> ); }; export default BookingForm; Pada contoh ini, useState digunakan untuk mengelola pilihan kota dari dropdown. Setiap kali pengguna memilih kota, nilai state akan diperbarui sesuai pilihan mereka. 4. Mengelola Tanggal Penerbangan dengan useState Penggunaan useState juga sangat membantu untuk mengelola input dengan tipe date, seperti tanggal penerbangan. import React, { useState } from 'react'; const BookingForm: React.FC = () => { const [date, setDate] = useState(''); return ( <form> <div> <label>Date of Flight:</label> <input type="date" value={date} onChange={(e) => setDate(e.target.value)} /> </div> </form> ); }; export default BookingForm; Pada contoh ini, useState mengelola input dengan tipe date. Ketika pengguna memilih tanggal, nilai state diperbarui dengan format string tanggal. 5. Mengelola Beberapa State Secara Bersamaan dan Mengirim Data Contoh berikut menggabungkan beberapa state sekaligus untuk mengelola seluruh data form dan menampilkan hasil input pengguna ketika form dikirim (submit). import React, { useState } from 'react'; const BookingForm: React.FC = () => { const [departure, setDeparture] = useState(''); const [destination, setDestination] = useState(''); const [date, setDate] = useState(''); const [passengers, setPassengers] = useState(1); const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); console.log({ departure, destination, date, passengers, }); }; return ( <form onSubmit={handleSubmit}> <div> <label>Departure City:</label> <input type="text" value={departure} onChange={(e) => setDeparture(e.target.value)} /> </div> <div> <label>Destination City:</label> <input type="text" value={destination} onChange={(e) => setDestination(e.target.value)} /> </div> <div> <label>Date of Flight:</label> <input type="date" value={date} onChange={(e) => setDate(e.target.value)} /> </div> <div> <label>Number of Passengers:</label> <input type="number" value={passengers} onChange={(e) => setPassengers(parseInt(e.target.value))} min="1" /> </div> <button type="submit">Book Flight</button> </form> ); }; export default BookingForm; Pada contoh ini, kita menggabungkan beberapa state (departure, destination, date, dan passengers) dan mengirimkan seluruh data ketika form disubmit. Setelah pengguna mengisi semua input, data akan dikirim dan ditampilkan di console sebagai objek. Poin Penting Lanjutan dalam Memperdalam Framework React JS Setelah memahami dasar-dasar React seperti useState, ada beberapa konsep lanjutan yang penting untuk dipelajari guna memperdalam pemahaman dan keterampilan dalam menggunakan framework React JS. 1. useEffect useEffect adalah hooks yang digunakan untuk mengelola efek samping (side effects) dalam komponen React, seperti fetching data dari API, berinteraksi dengan browser API (misalnya localStorage), atau mengatur timer. Dengan mempelajari useEffect, Anda dapat memahami cara kerja lifecycle komponen React dan kapan harus menjalankan kode tertentu. 2. Context API Context API membantu dalam mengelola state global yang dapat diakses oleh banyak komponen tanpa perlu menggunakan props drilling (mengoper props dari komponen induk ke komponen anak). Ini sangat berguna ketika Anda bekerja dengan data yang perlu diakses di banyak bagian aplikasi, seperti data pengguna yang sedang login atau tema aplikasi. 3. React Router React Router adalah library yang digunakan untuk mengatur navigasi atau routing dalam aplikasi React. Dengan React Router, Anda bisa membuat navigasi yang lebih kompleks, seperti routing dinamis, nested routes, dan juga pengelolaan URL parameters untuk navigasi yang lebih user-friendly. 4. Custom Hooks Custom hooks memungkinkan Anda untuk membuat logika reusable dalam aplikasi React. Setelah memahami hooks bawaan seperti useState dan useEffect, belajar membuat custom hooks akan membantu Anda mengelola logika yang kompleks dan menggunakannya di beberapa komponen tanpa mengulang kode. 5. Optimisasi Kinerja (Performance Optimization) Memahami cara kerja virtual DOM dan bagaimana React melakukan rendering ulang sangat penting dalam optimisasi kinerja. Anda perlu mempelajari teknik-teknik seperti memoization dengan React.memo, useMemo, dan useCallback untuk mencegah rendering ulang yang tidak perlu dan menjaga aplikasi tetap responsif. 6. State Management dengan Redux atau Zustand Untuk aplikasi yang lebih besar, pengelolaan state yang lebih kompleks dapat menjadi tantangan. Library seperti Redux atau Zustand membantu dalam mengelola state global dengan cara yang lebih terstruktur dan scalable. Dengan mempelajari state management, Anda bisa mengelola data aplikasi secara efisien, terutama ketika data tersebut dibagikan di banyak komponen. 7. Error Boundaries Error Boundaries digunakan untuk menangkap error yang terjadi dalam komponen-komponen React. Ini sangat penting untuk mencegah aplikasi crash secara keseluruhan ketika terjadi error di satu bagian aplikasi. Mempelajari Error Boundaries akan membantu Anda mengelola error dengan lebih baik dan memberikan pengalaman pengguna yang lebih stabil. 8. TypeScript dengan React TypeScript memberikan tipe statis pada JavaScript, yang membantu dalam mencegah error dan membuat kode lebih mudah dipelihara. Memahami penggunaan TypeScript dengan React adalah langkah penting jika Anda ingin meningkatkan kualitas dan skalabilitas aplikasi, terutama pada proyek yang lebih besar. 9. Server-Side Rendering (SSR) dan Static Site Generation (SSG) Memahami konsep SSR dan SSG penting untuk meningkatkan kinerja dan SEO aplikasi React. Framework seperti Next.js memudahkan penerapan SSR dan SSG dalam aplikasi React, dan membantu membuat aplikasi lebih cepat diakses oleh pengguna dengan loading yang lebih cepat. 10. Testing dengan Jest dan React Testing Library Testing merupakan aspek penting dalam pengembangan aplikasi yang berkualitas. Dengan mempelajari testing di React, Anda dapat memastikan bahwa komponen dan fungsionalitas berjalan dengan benar. Library seperti Jest dan React Testing Library sangat populer dalam dunia React untuk melakukan unit testing dan integration testing. Dengan mempelajari poin-poin ini, Anda akan memiliki pemahaman yang lebih mendalam tentang bagaimana membangun aplikasi React yang lebih besar, lebih kompleks, dan lebih optimal. Kesimpulan dan Saran Memperdalam pemahaman tentang React JS membutuhkan waktu dan latihan yang konsisten. Dengan memahami konsep dasar seperti useState dan useEffect, serta mempelajari topik-topik lanjutan seperti Context API, React Router, dan optimisasi kinerja, Anda akan dapat membangun aplikasi web yang lebih efisien dan interaktif. Teruslah berlatih dan eksplorasi teknologi-teknologi baru dalam ekosistem React. Untuk mempercepat pembelajaran Anda, sangat disarankan untuk belajar langsung bersama mentor expert di BuildWithAngga. Dengan akses belajar selamanya, Anda bisa berkonsultasi langsung dengan mentor profesional, serta membangun portofolio modern yang siap digunakan untuk melamar pekerjaan atau proyek freelance. Mendapatkan dukungan dari komunitas yang tepat akan membantu Anda lebih percaya diri dalam menghadapi tantangan dalam dunia pengembangan web.

Saat ini, website telah menjadi media utama bagi perusahaan untuk mempromosikan jasa atau produk mereka secara online. Dengan adanya website, perusahaan dapat menjangkau audiens lebih luas, meningkatkan brand awareness, dan mendatangkan lebih banyak pelanggan. Sebagai platform digital, website memberikan fleksibilitas bagi perusahaan untuk menyampaikan informasi terbaru, menjual produk secara langsung, hingga melayani pelanggan dengan lebih efektif. Oleh karena itu, memiliki website yang baik menjadi kebutuhan penting bagi setiap bisnis di era digital ini. Membangun Website Modern dengan TypeScript Untuk dapat membangun website yang modern, mudah diperbesar, dan dimaintain, developer perlu memanfaatkan teknologi yang tepat. Salah satu solusi terbaik adalah menggunakan TypeScript. TypeScript adalah bahasa pemrograman yang memberikan keunggulan dari segi keandalan dan skalabilitas dibandingkan JavaScript biasa. Dengan TypeScript, developer dapat menulis kode yang lebih jelas, terstruktur, dan mudah di-maintenance, sehingga ketika aplikasi berkembang, kode tetap terjaga kualitasnya. Bagi pemula, memulai dengan TypeScript akan sangat bermanfaat karena memberikan kerangka yang lebih kuat untuk membangun website yang siap berkembang. Apa Itu TypeScript dan Manfaat Utama dalam Proyek Website Modern TypeScript adalah superset dari JavaScript, yang berarti TypeScript dibangun di atas JavaScript dengan menambahkan fitur baru, terutama sistem static typing atau pengetikan statis. TypeScript dirancang untuk membantu developer menulis kode yang lebih aman dan mudah dipelihara. Dalam proyek website modern, TypeScript menawarkan berbagai manfaat, salah satunya adalah kemampuan untuk mendeteksi kesalahan sebelum kode dijalankan. Dengan adanya type annotations, TypeScript memastikan bahwa variabel, fungsi, dan objek digunakan sesuai tipe yang telah ditentukan, sehingga mengurangi potensi bug yang sulit ditemukan pada JavaScript biasa. Manfaat utama menggunakan TypeScript dalam proyek website modern meliputi: Penulisan Kode yang Lebih Terstruktur: Dengan TypeScript, developer dapat menggunakan fitur seperti interfaces, types, dan enums untuk membuat struktur data yang lebih jelas.Peningkatan Kualitas Kode: Karena kesalahan terdeteksi lebih awal melalui pengetikan statis, kualitas kode menjadi lebih baik dan lebih sedikit kesalahan yang terjadi di tahap pengembangan.Skalabilitas: Ketika aplikasi tumbuh besar, kode yang ditulis dengan TypeScript lebih mudah untuk di-maintain dan dikembangkan, karena setiap bagian kode memiliki tipe data yang jelas.Dukungan Editor yang Lebih Baik: TypeScript terintegrasi dengan baik pada banyak editor dan memberikan fitur seperti auto-completion dan refactoring yang membuat pengalaman developer lebih nyaman dan produktif. Mengapa Developer Perlu Mencoba TypeScript Dibandingkan JavaScript JavaScript memang merupakan bahasa yang kuat dan fleksibel, namun TypeScript menawarkan beberapa kelebihan yang bisa membuat pengembangan lebih efisien dan aman. Salah satu alasan utama untuk mencoba TypeScript adalah keandalannya dalam mengelola proyek-proyek besar. Dalam JavaScript, pengetikan yang longgar (dynamic typing) bisa menyebabkan bug yang sulit dideteksi, terutama pada aplikasi yang kompleks dan terus berkembang. Dengan TypeScript, developer memiliki kontrol lebih besar melalui type checking, yang memastikan setiap variabel dan fungsi digunakan sesuai dengan tipe yang diharapkan. Selain itu, penggunaan TypeScript bisa membantu developer menjadi lebih produktif karena memberikan dokumentasi kode yang lebih jelas melalui types, serta meningkatkan kolaborasi dalam tim. Dengan tipe data yang eksplisit, developer lain bisa lebih cepat memahami kode yang ditulis, tanpa perlu membaca seluruh implementasi. TypeScript juga membantu dalam debugging, karena sebagian besar kesalahan dapat ditemukan pada saat kompilasi, sehingga mempercepat proses pengembangan secara keseluruhan. Bagi developer yang sudah terbiasa dengan JavaScript, beralih ke TypeScript tidak memerlukan pembelajaran dari awal, karena TypeScript sepenuhnya kompatibel dengan JavaScript. Ini membuat proses adopsi lebih mudah, sambil memberikan semua manfaat dari sistem pengetikan yang lebih ketat. Membuat Proyek Toko Online Sederhana Menggunakan TypeScript dan Node.js Untuk memulai proyek toko online sederhana menggunakan TypeScript dan Node.js, berikut adalah langkah-langkah yang bisa diikuti: 1. Inisialisasi Proyek Mulailah dengan membuat direktori proyek baru dan inisialisasi Node.js di dalamnya. Buka terminal dan jalankan perintah berikut: mkdir toko-online-typescript cd toko-online-typescript npm init -y 2. Install TypeScript dan Dependencies Instal TypeScript dan beberapa dependency dasar seperti express untuk membangun server, serta ts-node dan nodemon untuk memudahkan proses pengembangan. npm install typescript ts-node-dev express Setelah itu, jalankan perintah untuk menginisialisasi file konfigurasi TypeScript. npx tsc --init 3. Struktur Folder Proyek Buat struktur folder sederhana untuk proyek ini: toko-online-typescript/ │ ├── src/ │ ├── index.ts │ ├── routes/ │ └── productRoutes.ts │ ├── package.json └── tsconfig.json 4. Buat Server Dasar dengan Express Di dalam folder src, buat file index.ts yang berfungsi sebagai titik masuk aplikasi. import express, { Application } from 'express'; import productRoutes from './routes/productRoutes'; const app: Application = express(); const PORT = 3000; app.use(express.json()); app.use('/products', productRoutes); app.listen(PORT, () => { console.log(`Server running on <http://localhost>:${PORT}`); }); 5. Buat Rute Produk Selanjutnya, buat file productRoutes.ts di dalam folder routes untuk mengelola rute produk. import { Router } from 'express'; const router = Router(); let products = [ { id: 1, name: 'Laptop', price: 15000000 }, { id: 2, name: 'Smartphone', price: 5000000 } ]; // Mendapatkan semua produk router.get('/', (req, res) => { res.json(products); }); // Menambahkan produk baru router.post('/', (req, res) => { const newProduct = { id: products.length + 1, ...req.body }; products.push(newProduct); res.status(201).json(newProduct); }); export default router; 6. Jalankan Proyek Untuk menjalankan proyek, tambahkan skrip di dalam package.json: "scripts": { "dev": "ts-node-dev src/index.ts" } Sekarang jalankan proyek dengan perintah berikut: npm run dev Proyek toko online sederhana Anda sekarang dapat diakses di http://localhost:3000/products. Mengatur TypeScript Configuration dan Menjalankan TypeScript Untuk mengonfigurasi TypeScript dalam proyek Anda, ada beberapa langkah yang perlu dilakukan, mulai dari pengaturan file konfigurasi hingga menjalankan proyek menggunakan TypeScript. 1. Buat File tsconfig.json Ketika Anda menjalankan perintah npx tsc --init, sebuah file tsconfig.json akan otomatis dibuat. Berikut adalah konfigurasi dasar untuk proyek Node.js menggunakan TypeScript: { "compilerOptions": { "target": "ES6", "module": "commonjs", "outDir": "./dist", "rootDir": "./src", "strict": true, "esModuleInterop": true, "skipLibCheck": true }, "include": ["src/**/*"], "exclude": ["node_modules"] } Penjelasan konfigurasi: target: Menentukan versi ECMAScript yang akan digunakan (dalam hal ini ES6).module: Menentukan format modul yang digunakan, dalam Node.js kita gunakan commonjs.outDir: Lokasi output file JavaScript setelah TypeScript dikompilasi.rootDir: Lokasi file TypeScript Anda.strict: Mengaktifkan pemeriksaan ketat untuk membantu mencegah bug.esModuleInterop: Memastikan kompatibilitas antara modul CommonJS dan ECMAScript. 2. Menjalankan TypeScript dengan tsc Untuk mengompilasi file TypeScript ke JavaScript, jalankan perintah berikut di terminal: npx tsc Perintah ini akan mengkompilasi seluruh file TypeScript dalam folder src menjadi file JavaScript, yang akan disimpan di folder dist sesuai pengaturan tsconfig.json. 3. Menjalankan Proyek Setelah Dikompilasi Setelah file dikompilasi, Anda bisa menjalankan aplikasi dengan Node.js langsung dari folder dist: node dist/index.js Proyek akan berjalan seperti biasa, tetapi sekarang Anda menjalankannya dari versi JavaScript yang dihasilkan oleh TypeScript. Dengan langkah-langkah di atas, Anda telah berhasil mengatur TypeScript dan menjalankan proyek toko online sederhana menggunakan TypeScript. Cara Menerapkan Basic Types di TypeScript Dalam TypeScript, tipe data dasar seperti number, string, boolean, array, tuple, dan enum dapat digunakan untuk memastikan bahwa variabel, fungsi, dan objek digunakan sesuai tipe yang diharapkan. Berikut adalah langkah-langkah untuk menerapkan setiap tipe dasar ini dengan contoh koding yang lengkap. Menggunakan Tipe Number Tipe number digunakan untuk angka, baik bilangan bulat maupun desimal. Di TypeScript, kita bisa secara eksplisit mendefinisikan variabel sebagai number. let price: number = 15000; let discount: number = 20.5; console.log(price); // Output: 15000 console.log(discount); // Output: 20.5 Menggunakan Tipe String Tipe string digunakan untuk menyimpan teks atau nilai string. Kita bisa menggunakan tanda kutip tunggal atau ganda untuk mendefinisikan string. let productName: string = 'Laptop'; let productDescription: string = "Laptop high-end untuk gaming"; console.log(productName); // Output: Laptop console.log(productDescription); // Output: Laptop high-end untuk gaming Menggunakan Tipe Boolean Tipe boolean hanya memiliki dua nilai: true atau false. Tipe ini berguna untuk logika kondisi. let isAvailable: boolean = true; let isDiscounted: boolean = false; console.log(isAvailable); // Output: true console.log(isDiscounted); // Output: false Menggunakan Tipe Array Tipe array digunakan untuk menyimpan beberapa nilai dengan tipe yang sama. Di TypeScript, kita bisa menentukan tipe elemen array menggunakan notasi type[] atau Array<type>. let productPrices: number[] = [15000, 25000, 35000]; let productNames: Array<string> = ['Laptop', 'Smartphone', 'Tablet']; console.log(productPrices); // Output: [15000, 25000, 35000] console.log(productNames); // Output: ['Laptop', 'Smartphone', 'Tablet'] Menggunakan Tipe Tuple Tipe tuple memungkinkan kita menyimpan array dengan elemen yang memiliki tipe data berbeda, namun dalam urutan tertentu. let productDetail: [string, number, boolean] = ['Laptop', 15000, true]; console.log(productDetail); // Output: ['Laptop', 15000, true] // Elemen pertama adalah string, kedua adalah number, dan ketiga adalah boolean Menggunakan Tipe Enum Tipe enum adalah cara untuk memberi nama sekelompok nilai numerik atau string, sehingga kita bisa merujuk pada nilai-nilai ini dengan nama yang lebih mudah dibaca. enum ProductCategory { Electronics, Furniture, Clothing } let productCategory: ProductCategory = ProductCategory.Electronics; console.log(productCategory); // Output: 0 (karena enums dimulai dari 0 secara default) Kita juga bisa menentukan nilai secara eksplisit pada enum. enum PaymentStatus { Pending = 'PENDING', Completed = 'COMPLETED', Failed = 'FAILED' } let currentStatus: PaymentStatus = PaymentStatus.Completed; console.log(currentStatus); // Output: COMPLETED Dengan langkah-langkah di atas, Anda sekarang dapat menerapkan berbagai tipe data dasar seperti number, string, boolean, array, tuple, dan enum dalam proyek TypeScript Anda. Tipe-tipe ini membantu memastikan bahwa kode Anda lebih aman dan mudah dipelihara. Cara Menerapkan Function, Typing Function Parameters, Default Parameters, Optional Parameters, dan Arrow Functions di TypeScript Dalam TypeScript, function dapat ditulis dengan tipe data yang jelas untuk parameter dan nilai kembalian. Selain itu, TypeScript mendukung parameter default dan opsional, serta arrow functions. Berikut adalah langkah-langkah lengkap dengan contoh koding. Menerapkan Function dengan Typing pada Parameters Saat mendefinisikan fungsi di TypeScript, kita dapat menentukan tipe parameter dan nilai yang akan dikembalikan oleh fungsi tersebut. Ini memberikan kejelasan dan keamanan dalam proses pengembangan. function calculateTotalPrice(price: number, quantity: number): number { return price * quantity; } let totalPrice = calculateTotalPrice(15000, 3); console.log(totalPrice); // Output: 45000 Di sini, tipe number ditentukan untuk parameter price dan quantity, serta fungsi ini akan mengembalikan nilai bertipe number. Menerapkan Default Parameters TypeScript memungkinkan kita menetapkan nilai default untuk parameter fungsi. Jika parameter ini tidak diberikan nilai saat fungsi dipanggil, maka nilai default akan digunakan. function applyDiscount(price: number, discount: number = 10): number { return price - (price * discount) / 100; } let priceWithDiscount = applyDiscount(20000); console.log(priceWithDiscount); // Output: 18000 Dalam contoh di atas, jika nilai discount tidak diberikan, maka secara otomatis akan menggunakan nilai default 10. Menerapkan Optional Parameters TypeScript juga mendukung parameter opsional, yang berarti parameter tersebut tidak harus disertakan ketika fungsi dipanggil. Untuk mendefinisikan parameter opsional, tambahkan tanda tanya ? setelah nama parameter. function calculateShippingCost(weight: number, expedited?: boolean): number { if (expedited) { return weight * 100; } else { return weight * 50; } } let normalShipping = calculateShippingCost(2); let expeditedShipping = calculateShippingCost(2, true); console.log(normalShipping); // Output: 100 console.log(expeditedShipping); // Output: 200 Dalam contoh ini, parameter expedited bersifat opsional. Jika tidak diberikan, fungsi akan tetap berjalan dengan asumsi expedited bernilai false. Menerapkan Arrow Functions Arrow functions adalah sintaks yang lebih singkat untuk mendefinisikan fungsi, sering digunakan dalam konteks callbacks atau fungsi sederhana. const calculateTax = (price: number): number => { return price * 0.1; } let tax = calculateTax(10000); console.log(tax); // Output: 1000 Arrow function ini memiliki sintaks yang lebih ringkas dan bisa sangat berguna ketika ingin menulis fungsi singkat atau anonim. Untuk arrow functions yang sangat sederhana, jika hanya ada satu baris kode yang langsung mengembalikan nilai, kita bisa menghilangkan tanda kurung kurawal dan kata kunci return. const calculateDiscount = (price: number, discount: number): number => price - (price * discount) / 100; let discountedPrice = calculateDiscount(20000, 15); console.log(discountedPrice); // Output: 17000 Arrow function ini langsung mengembalikan hasil perhitungan tanpa perlu menulis return dan kurung kurawal. Latihan Menerapkan Basic Types dan Function pada Proyek Toko Online Dalam latihan ini, kita akan membuat proyek toko online sederhana dengan beberapa fitur dasar. Kita akan menggunakan berbagai tipe dasar TypeScript seperti number, string, boolean, array, tuple, dan enum, serta mendefinisikan beberapa fungsi yang mencakup penggunaan typing pada parameter, default parameter, optional parameter, dan arrow functions. 1. Inisialisasi Proyek Mulai dengan menginisialisasi proyek baru: mkdir toko-online cd toko-online npm init -y npm install typescript ts-node-dev express npx tsc --init Buat folder src dan tambahkan file index.ts sebagai entry point. 2. Struktur Data untuk Produk Buat tipe dasar untuk produk menggunakan interface. Setiap produk akan memiliki id, name, price, stock, dan category. enum ProductCategory { Electronics = 'Electronics', Clothing = 'Clothing', Groceries = 'Groceries' } interface Product { id: number; name: string; price: number; stock: number; category: ProductCategory; } let products: Product[] = [ { id: 1, name: 'Laptop', price: 15000, stock: 10, category: ProductCategory.Electronics }, { id: 2, name: 'T-Shirt', price: 200, stock: 50, category: ProductCategory.Clothing }, { id: 3, name: 'Rice', price: 100, stock: 100, category: ProductCategory.Groceries } ]; Di sini, kita menggunakan enum untuk kategori produk dan interface untuk mendefinisikan tipe produk. Array products menyimpan daftar produk yang ada. 3. Menambahkan Fungsi untuk Mengelola Produk Sekarang buat fungsi untuk menambah, mengedit, dan menghapus produk. Kita akan menggunakan typing pada parameter dan nilai kembalian. function addProduct(newProduct: Product): Product[] { products.push(newProduct); return products; } function updateProduct(id: number, updatedFields: Partial<Product>): Product[] { const productIndex = products.findIndex((product) => product.id === id); if (productIndex !== -1) { products[productIndex] = { ...products[productIndex], ...updatedFields }; } return products; } function deleteProduct(id: number): Product[] { products = products.filter((product) => product.id !== id); return products; } Fungsi addProduct menambahkan produk baru ke dalam daftar.Fungsi updateProduct memungkinkan pembaruan hanya pada field tertentu dengan menggunakan Partial<Product>.Fungsi deleteProduct menghapus produk berdasarkan ID. 4. Menghitung Total Harga dengan Fungsi Menggunakan Parameter Default dan Opsional Sekarang buat fungsi yang menghitung total harga pembelian. Kita akan menggunakan parameter default untuk diskon dan parameter opsional untuk jumlah barang yang dibeli. function calculateTotalPrice(price: number, quantity: number = 1, discount?: number): number { let total = price * quantity; if (discount) { total = total - (total * discount) / 100; } return total; } const totalPrice1 = calculateTotalPrice(15000, 2); const totalPrice2 = calculateTotalPrice(200, 5, 10); console.log(totalPrice1); // Output: 30000 console.log(totalPrice2); // Output: 900 Fungsi ini menggunakan: Parameter quantity dengan nilai default 1, sehingga jika pengguna tidak memasukkan jumlah, fungsi akan menganggap jumlahnya 1.Parameter opsional discount untuk menghitung harga setelah diskon jika tersedia. 5. Menampilkan Produk dengan Fungsi dan Arrow Function Buat fungsi untuk menampilkan produk yang tersedia dan gunakan arrow function untuk menyaring produk berdasarkan kategori. const displayAvailableProducts = (): void => { products.forEach((product) => { console.log(`Product: ${product.name}, Price: ${product.price}, Stock: ${product.stock}, Category: ${product.category}`); }); }; const filterProductsByCategory = (category: ProductCategory): Product[] => { return products.filter((product) => product.category === category); }; displayAvailableProducts(); const electronicsProducts = filterProductsByCategory(ProductCategory.Electronics); console.log(electronicsProducts); displayAvailableProducts menggunakan void sebagai tipe kembalian karena tidak mengembalikan apa pun.filterProductsByCategory adalah arrow function yang menyaring produk berdasarkan kategori tertentu. 6. Menjalankan Proyek Tambahkan skrip berikut di dalam package.json untuk menjalankan proyek: "scripts": { "dev": "ts-node-dev src/index.ts" } Kemudian jalankan proyek dengan: npm run dev Contoh 5 Kesalahan Umum Ketika Menggunakan TypeScript Meskipun TypeScript membantu menulis kode yang lebih aman dan terstruktur, ada beberapa kesalahan umum yang sering terjadi, terutama bagi pemula. Berikut ini adalah 5 contoh kesalahan saat menggunakan TypeScript, lengkap dengan penjelasan dan contoh koding. 1. Mengabaikan Strict Typing Salah satu kesalahan umum adalah mengabaikan sistem pengetikan ketat TypeScript dengan tidak mendefinisikan tipe data secara eksplisit. Ini bisa menghilangkan manfaat utama dari TypeScript. let productName = 'Laptop'; // TypeScript secara otomatis menganggap ini string productName = 123; // Kesalahan: Type 'number' tidak bisa ditetapkan ke type 'string' Solusi: Selalu mendefinisikan tipe data secara eksplisit untuk menghindari masalah ini. let productName: string = 'Laptop'; productName = 'Smartphone'; // Tidak ada kesalahan karena tipe tetap string 2. Tidak Menangani Nilai undefined dan null Ketika bekerja dengan nilai yang mungkin undefined atau null, mengabaikan kemungkinan ini bisa menyebabkan kesalahan pada runtime. TypeScript sering kali mengharuskan kita untuk menangani nilai tersebut dengan baik. function getProductById(id: number): string | undefined { if (id === 1) { return 'Laptop'; } } let product = getProductById(2); console.log(product.toUpperCase()); // Kesalahan: Tidak bisa membaca 'toUpperCase' dari 'undefined' Solusi: Gunakan pengecekan untuk menangani kemungkinan undefined atau null. let product = getProductById(2); if (product) { console.log(product.toUpperCase()); // Tidak ada kesalahan } 3. Salah Menggunakan any Menggunakan tipe any terlalu sering dapat merusak keamanan tipe di TypeScript, karena kita kehilangan manfaat dari pengetikan yang ketat. let product: any = 'Laptop'; product = 123; // Tidak ada kesalahan, tetapi bisa menyebabkan bug di runtime Solusi: Hindari penggunaan any sebanyak mungkin, dan gunakan tipe yang lebih spesifik. let product: string = 'Laptop'; // product = 123; // Kesalahan: Type 'number' tidak bisa ditetapkan ke type 'string' 4. Salah Menggunakan Union Types Union types memungkinkan variabel untuk memiliki lebih dari satu tipe, tetapi penggunaan yang salah bisa menimbulkan kebingungan. function displayProductInfo(product: string | number) { console.log(product.toUpperCase()); // Kesalahan: Property 'toUpperCase' tidak ada di type 'number' } Solusi: Gunakan pengecekan tipe (type guard) sebelum memanggil metode atau melakukan operasi yang spesifik untuk tipe tertentu. function displayProductInfo(product: string | number) { if (typeof product === 'string') { console.log(product.toUpperCase()); // Tidak ada kesalahan } else { console.log(product); // Menangani tipe number } } 5. Salah Mendefinisikan Object dan Array Types Kesalahan umum lainnya adalah mendefinisikan tipe objek atau array tanpa spesifik, seperti menggunakan object atau any[] yang terlalu umum dan tidak aman. let product: object = { name: 'Laptop', price: 15000 }; console.log(product.name); // Kesalahan: Property 'name' tidak ada di type 'object' Solusi: Gunakan interface atau type untuk mendefinisikan struktur objek atau array dengan lebih jelas. interface Product { name: string; price: number; } let product: Product = { name: 'Laptop', price: 15000 }; console.log(product.name); // Tidak ada kesalahan Kesimpulan dan Saran Dalam mempelajari TypeScript, ada banyak kesalahan yang bisa dihindari dengan memahami konsep-konsep dasarnya secara mendalam. Dengan pengetikan yang ketat dan berbagai fitur canggih, TypeScript membantu programmer menulis kode yang lebih aman, terstruktur, dan mudah dikelola dalam proyek besar. Bagi programmer pemula maupun berpengalaman, belajar dan berlatih TypeScript akan memperkaya kemampuan dalam membangun aplikasi web modern. Jika Anda ingin memperdalam pemahaman Anda tentang TypeScript atau teknologi web lainnya, belajar bareng mentor expert di BuildWithAngga bisa menjadi pilihan terbaik. Anda akan mendapatkan akses materi seumur hidup, konsultasi langsung dengan mentor berpengalaman, serta kesempatan membangun portfolio modern yang siap digunakan untuk bekerja. Dengan bimbingan dari para ahli, Anda bisa lebih percaya diri dalam mengembangkan kemampuan dan meraih karier yang sukses di dunia programming.

Di era digital saat ini, setiap perusahaan wajib memiliki website modern dan dinamis untuk memberikan pengalaman terbaik kepada pengguna. Website yang lambat atau sulit digunakan dapat membuat calon pelanggan pergi ke kompetitor. Website modern tidak hanya tentang tampilan yang menarik, tapi juga bagaimana fungsinya dapat memberikan kenyamanan saat digunakan, mulai dari kecepatan loading hingga interaksi yang mulus di setiap fitur. React JS adalah salah satu framework yang diciptakan untuk memenuhi kebutuhan pembuatan website dinamis tersebut. Dengan berbagai fitur menarik yang tersedia, seperti useState dan useEffect, React memungkinkan developer untuk mengelola state dan side effects dengan lebih mudah. React JS dirancang agar developer dapat membangun komponen-komponen UI yang efisien dan interaktif, dengan memanfaatkan hooks seperti useState untuk mengelola data atau nilai di dalam aplikasi dan useEffect untuk menangani efek samping yang terjadi saat rendering. Hooks seperti useState dan useEffect membantu membuat kode menjadi lebih bersih dan lebih mudah dipelihara, terutama dalam web development modern yang membutuhkan responsivitas tinggi. Dengan React, developer dapat membuat website yang dinamis, efisien, dan mudah dikembangkan seiring pertumbuhan bisnis. Apa Itu useState dan useEffect pada React JS? useState dan useEffect adalah dua hook yang paling umum digunakan dalam React JS. Keduanya memiliki peran penting dalam membantu developer mengelola state dan side effects saat membangun aplikasi berbasis komponen. useState adalah hook yang digunakan untuk mengelola state di dalam komponen React. Ketika kita membuat komponen dalam React, terkadang kita perlu menyimpan dan mengubah data seiring berjalannya waktu, misalnya data input dari pengguna atau hasil perhitungan. Dengan useState, developer dapat membuat variabel yang dinamis, dan ketika nilai tersebut berubah, React akan secara otomatis merender ulang komponen yang bersangkutan. Di sisi lain, useEffect adalah hook yang digunakan untuk menangani efek samping dalam komponen. Efek samping ini bisa berupa pengambilan data dari API, manipulasi DOM secara langsung, atau berinteraksi dengan layanan eksternal. Dengan useEffect, kita bisa menentukan kapan sebuah fungsi dijalankan setelah rendering, sehingga membantu sinkronisasi antara komponen dan sumber data eksternal. Fitur yang Dapat Dibangun dengan useState dan useEffect di Website Point of Sales Pada website point of sales (POS), useState dan useEffect bisa dimanfaatkan untuk membangun berbagai fitur dinamis yang mendukung operasional penjualan. Berikut beberapa contoh fitur yang dapat dikembangkan: Manajemen Keranjang Belanja: Dengan useState, kita bisa mengelola daftar barang yang ditambahkan ke dalam keranjang oleh pengguna. Setiap kali pengguna menambah atau menghapus produk, nilai keranjang akan diperbarui secara otomatis, dan tampilan total harga akan berubah sesuai dengan barang yang ada.Mengambil Data Produk dari API: Dengan useEffect, kita bisa mengambil data produk secara real-time dari API. Misalnya, ketika pengguna membuka halaman POS, useEffect akan digunakan untuk memuat daftar produk terbaru dari server sehingga pengguna selalu mendapatkan informasi stok terkini.Hitung Total Harga Transaksi: Menggunakan useState untuk menyimpan nilai total transaksi, kita bisa membuat fitur yang menghitung harga total berdasarkan produk yang dipilih oleh pengguna. Jika pengguna menambah produk ke keranjang, total harga akan langsung diperbarui.Notifikasi Perubahan Stok: Dengan kombinasi useState dan useEffect, kita bisa membuat notifikasi yang muncul ketika ada perubahan stok produk. Misalnya, ketika sebuah produk hampir habis, useEffect bisa memicu notifikasi untuk mengingatkan pengguna atau kasir. Kedua hook ini sangat membantu dalam membangun aplikasi yang dinamis dan responsif, seperti website POS, yang memerlukan interaksi real-time dengan pengguna dan sistem backend. Tata Cara Membuat Projek Website Point of Sales Menggunakan Terminal dan Vite Untuk memulai proyek website point of sales (POS) menggunakan React dengan Vite, kita bisa mengikuti beberapa langkah dasar berikut ini. Dalam tutorial ini, kita akan menginstal Vite sebagai tool build yang cepat untuk proyek React. Langkah 1: Install Node.js dan npm Sebelum memulai, pastikan kamu sudah menginstal Node.js dan npm (Node Package Manager) di komputermu. Node.js diperlukan untuk menjalankan perintah-perintah JavaScript di terminal, sementara npm digunakan untuk mengelola package yang dibutuhkan oleh proyek React. Untuk memeriksa apakah Node.js sudah terinstal, jalankan perintah ini di terminal: node -v Jika Node.js sudah terinstal, akan muncul versi Node.js yang sedang kamu gunakan. Jika belum, silakan download dan instal dari website resmi Node.js. Langkah 2: Membuat Proyek Baru dengan Vite Setelah Node.js terinstal, kamu bisa membuat proyek React baru dengan menggunakan Vite. Buka terminal, lalu jalankan perintah berikut: npm create vite@latest Setelah itu, kamu akan diminta untuk memberikan nama proyek. Misalnya, kamu bisa menamainya pos-website. Kemudian pilih template React ketika ditanya tentang jenis proyek yang ingin kamu buat. Vite akan menginstal semua dependensi dasar yang dibutuhkan untuk memulai proyek React. Langkah 3: Masuk ke Direktori Proyek Setelah proses instalasi selesai, masuk ke direktori proyek dengan perintah: cd pos-website Langkah 4: Instal Dependensi Proyek Di dalam direktori proyek, kamu perlu menginstal semua dependensi yang dibutuhkan untuk menjalankan proyek Vite React. Jalankan perintah berikut: npm install Ini akan menginstal semua package yang diperlukan seperti React, React DOM, dan dependensi Vite lainnya. Langkah 5: Menjalankan Proyek di Server Lokal Setelah instalasi selesai, kamu bisa langsung menjalankan proyek POS dengan perintah berikut: npm run dev Vite akan memulai server lokal untuk proyekmu, dan kamu bisa melihat proyek berjalan di browser melalui URL http://localhost:3000 atau alamat lain yang ditampilkan di terminal. Langkah 6: Struktur Folder Dasar Proyek Vite Setelah berhasil menjalankan proyek, kamu akan melihat struktur folder dasar seperti ini: index.html: file utama untuk struktur HTML dasar.src: folder ini berisi file-file JavaScript dan komponen React. Di dalam folder src, kamu akan menemukan App.jsx yang menjadi file utama untuk komponen React. Langkah 7: Membuat Komponen untuk Fitur POS Untuk membangun fitur point of sales, kita bisa mulai dengan membuat beberapa komponen React. Sebagai contoh, buat komponen ProductList.jsx di dalam folder src/components: mkdir src/components touch src/components/ProductList.jsx Di dalam file ProductList.jsx, kamu bisa mulai menuliskan kode untuk menampilkan daftar produk. Tata Cara Menerapkan useState pada Website Point of Sales Berikut adalah panduan untuk menerapkan useState pada aplikasi website point of sales menggunakan React. Dalam contoh ini, kita akan menggunakan useState untuk mengelola daftar produk dan menambahkan fitur sederhana seperti menambahkan produk ke keranjang. Kami akan menggunakan data dummy untuk mencontohkan bagaimana useState bekerja. Langkah 1: Buat Data Dummy Produk Pertama, buat data dummy produk di dalam komponen. Kamu bisa menyimpan data ini di dalam komponen utama atau dalam file terpisah. Untuk keperluan demo, kita akan membuatnya langsung di dalam komponen. const products = [ { id: 1, name: "Product A", price: 100 }, { id: 2, name: "Product B", price: 200 }, { id: 3, name: "Product C", price: 300 }, ]; Langkah 2: Buat Komponen ProductList Selanjutnya, buat komponen ProductList yang akan menampilkan daftar produk. Kita akan menggunakan useState untuk menyimpan data produk yang ada di keranjang. import React, { useState } from "react"; const ProductList = () => { const [cart, setCart] = useState([]); const addToCart = (product) => { setCart([...cart, product]); }; return ( <div> <h3>Daftar Produk</h3> {products.map((product) => ( <div key={product.id}> <p>{product.name}</p> <p>Harga: {product.price}</p> <button onClick={() => addToCart(product)}>Tambah ke Keranjang</button> </div> ))} <h3>Keranjang</h3> {cart.length > 0 ? ( cart.map((item, index) => ( <div key={index}> <p>{item.name}</p> <p>Harga: {item.price}</p> </div> )) ) : ( <p>Keranjang kosong</p> )} </div> ); }; export default ProductList; Langkah 3: Menggunakan useState untuk Menambah Produk ke Keranjang Dalam komponen di atas, kita menggunakan useState untuk membuat state cart yang akan menyimpan produk yang ditambahkan ke keranjang. Fungsi setCart digunakan untuk memperbarui daftar produk di keranjang ketika pengguna mengklik tombol "Tambah ke Keranjang". Dengan memanggil setCart([...cart, product]), kita menambahkan produk baru ke dalam array cart tanpa mengubah data sebelumnya. Langkah 4: Tampilkan Data Keranjang Setelah menambahkan produk ke keranjang, kita menampilkan produk yang ada di dalam keranjang di bagian bawah halaman. Jika keranjang kosong, akan muncul pesan "Keranjang kosong". Jika ada produk, produk tersebut akan ditampilkan bersama dengan harganya. Dengan cara ini, useState membantu kita mengelola data secara dinamis sesuai interaksi pengguna, seperti menambahkan produk ke keranjang dalam aplikasi point of sales. Tata Cara Menerapkan useEffect pada Website Point of Sales Berikut adalah panduan untuk menerapkan useEffect pada website point of sales (POS) menggunakan React. Dalam contoh ini, kita akan menggunakan useEffect untuk melakukan simulasi pengambilan data produk dari API menggunakan data dummy. Langkah 1: Buat Komponen ProductList dengan useEffect Buat komponen React bernama ProductList di mana kita akan menggunakan useEffect untuk memuat data produk saat komponen pertama kali dirender. import React, { useState, useEffect } from "react"; const ProductList = () => { const [products, setProducts] = useState([]); useEffect(() => { // Simulasi pengambilan data produk dari API menggunakan data dummy const fetchProducts = async () => { const dummyProducts = [ { id: 1, name: "Product A", price: 100 }, { id: 2, name: "Product B", price: 200 }, { id: 3, name: "Product C", price: 300 }, ]; // Simulasi waktu tunggu seperti ketika mengambil data dari API setTimeout(() => { setProducts(dummyProducts); }, 1000); }; fetchProducts(); }, []); // Dependency array kosong untuk menjalankan useEffect hanya sekali saat komponen di-mount return ( <div> <h3>Daftar Produk</h3> {products.length > 0 ? ( products.map((product) => ( <div key={product.id}> <p>{product.name}</p> <p>Harga: {product.price}</p> </div> )) ) : ( <p>Loading produk...</p> )} </div> ); }; export default ProductList; Langkah 2: Memahami useEffect untuk Pengambilan Data Dalam contoh di atas, useEffect digunakan untuk menjalankan fungsi fetchProducts hanya satu kali ketika komponen pertama kali dimuat. Ini dilakukan dengan memberikan array dependency kosong [] pada useEffect, yang berarti efek ini hanya akan dijalankan sekali ketika komponen pertama kali dirender. Fungsi fetchProducts mensimulasikan pengambilan data dari API dengan menggunakan data dummy. Dalam contoh ini, kita menggunakan setTimeout untuk mensimulasikan keterlambatan pengambilan data, seolah-olah kita sedang memanggil API dan menunggu respons. Setelah satu detik, kita memperbarui state products dengan data dummy. Langkah 3: Tampilkan Data Produk Setelah data produk diambil, kita memeriksa apakah products memiliki data. Jika data sudah dimuat, produk ditampilkan di layar. Jika data masih dalam proses diambil, kita menampilkan pesan "Loading produk..." untuk memberikan feedback visual kepada pengguna. Dengan useEffect, kita dapat mengatur logika pengambilan data secara mudah tanpa harus menulis banyak kode tambahan. Hook ini sangat bermanfaat dalam pengembangan aplikasi point of sales yang memerlukan pengambilan data produk secara real-time dari API atau sumber data lainnya. Apa Itu Dependency Array pada useEffect? Dependency array pada useEffect adalah parameter opsional yang digunakan untuk mengontrol kapan efek di dalam useEffect akan dijalankan ulang. Dengan menambahkan nilai-nilai tertentu ke dalam array ini, React akan memantau perubahan pada nilai-nilai tersebut dan menjalankan efek kembali hanya ketika salah satu nilai berubah. Jika dependency array kosong ([]), useEffect hanya akan dijalankan sekali ketika komponen pertama kali dirender (atau di-mount). Jika ada nilai di dalam array, useEffect akan dijalankan setiap kali salah satu nilai tersebut berubah. Ini sangat berguna untuk mengoptimalkan kinerja komponen agar tidak terus-menerus menjalankan efek yang tidak perlu. Contoh Penerapan Dependency Array pada Website Point of Sales Pada website point of sales (POS), useEffect dengan dependency array dapat digunakan untuk berbagai kebutuhan, seperti: Mengambil Data Produk Sekali Saat Halaman Dimuat Dalam aplikasi POS, kita sering kali perlu mengambil data produk dari API atau server. Dengan dependency array kosong, kita bisa memastikan pengambilan data hanya dilakukan sekali saat halaman pertama kali dimuat, sehingga data produk tidak perlu diambil ulang setiap kali komponen dirender ulang.Menampilkan Detail Produk Berdasarkan Pilihan Pengguna Jika pengguna mengklik salah satu produk dari daftar, kita dapat menggunakan dependency array untuk menjalankan efek setiap kali produk yang dipilih berubah. Sebagai contoh, ketika pengguna memilih produk, data produk tersebut bisa di-fetch atau diambil dari state yang ada, kemudian useEffect akan dijalankan untuk menampilkan detail produk.Memperbarui Harga Total Berdasarkan Daftar Produk di Keranjang Dalam kasus lain, jika aplikasi POS memiliki fitur keranjang belanja, useEffect dengan dependency array dapat digunakan untuk menghitung total harga setiap kali daftar produk di keranjang berubah. Dependency array akan memuat data keranjang, dan useEffect akan dijalankan ulang setiap kali ada perubahan di dalam keranjang, sehingga total harga selalu diperbarui. Apakah Syarat Menerapkan Dependency Array dengan Value yang Tidak Kosong Harus Melakukan Fetch Endpoint API? Penerapan dependency array dengan value yang tidak kosong dalam useEffect tidak harus selalu terkait dengan melakukan fetch endpoint API. Dependency array berfungsi untuk mengontrol kapan useEffect akan dijalankan ulang berdasarkan perubahan nilai di dalam array tersebut. Ini berarti dependency array bisa memantau state, props, atau nilai apa pun yang berubah dalam komponen, dan tidak harus selalu berhubungan dengan API call. Sebagai contoh, dependency array bisa digunakan untuk memperbarui UI berdasarkan interaksi pengguna atau perubahan state tanpa melibatkan API sama sekali. Berikut ini adalah contoh di mana dependency array digunakan tanpa melakukan fetch dari API: import React, { useState, useEffect } from "react"; const ProductList = () => { const [selectedProduct, setSelectedProduct] = useState(null); const [message, setMessage] = useState(""); useEffect(() => { // Set pesan ketika produk yang dipilih berubah if (selectedProduct) { setMessage(`Anda memilih ${selectedProduct.name}`); } }, [selectedProduct]); // Dependency array memantau perubahan nilai selectedProduct const products = [ { id: 1, name: "Product A", price: 100 }, { id: 2, name: "Product B", price: 200 }, { id: 3, name: "Product C", price: 300 }, ]; const handleProductClick = (product) => { setSelectedProduct(product); }; return ( <div> <h3>Daftar Produk</h3> {products.map((product) => ( <div key={product.id} style={{ border: "1px solid #ccc", padding: "10px", margin: "10px 0" }}> <p>{product.name}</p> <p>Harga: {product.price}</p> <button onClick={() => handleProductClick(product)}>Pilih Produk</button> </div> ))} <div> <h3>Pesan</h3> <p>{message}</p> </div> </div> ); }; export default ProductList; Pada contoh di atas, useEffect digunakan untuk menampilkan pesan setiap kali pengguna memilih produk dari daftar. Dependency array berisi selectedProduct, yang berarti useEffect hanya akan dijalankan ketika nilai selectedProduct berubah, yaitu ketika pengguna memilih produk baru. Ini tidak melibatkan fetch API, namun tetap menggunakan dependency array untuk mengontrol kapan efek dijalankan. Dalam kasus lain, dependency array juga bisa digunakan untuk memantau nilai seperti props yang diberikan dari komponen induk, atau state internal yang berubah karena interaksi pengguna. Jadi, penggunaan dependency array tidak terbatas pada fetch data dari API, melainkan bisa untuk segala jenis perubahan nilai dalam aplikasi React. Tata Cara Menerapkan useEffect dengan Dependency Array pada Website Point of Sales Dalam contoh ini, kita akan menggunakan useEffect dengan dependency array yang nilainya akan berubah setiap kali pengguna mengklik produk. Ketika produk diklik, nilai dalam dependency array akan diperbarui, dan detail produk yang dipilih akan ditampilkan di sebelah kanan layar. Langkah 1: Siapkan Komponen dan Data Produk Buat komponen ProductList yang memuat daftar produk menggunakan data dummy. Produk yang dipilih oleh pengguna akan disimpan dalam state selectedProduct, dan detail produk tersebut akan ditampilkan setelah nilai dependency array berubah. import React, { useState, useEffect } from "react"; const ProductList = () => { const [products, setProducts] = useState([]); const [selectedProduct, setSelectedProduct] = useState(null); const [productDetails, setProductDetails] = useState(null); useEffect(() => { // Simulasi pengambilan data produk dari API const dummyProducts = [ { id: 1, name: "Product A", price: 100, description: "Deskripsi Product A" }, { id: 2, name: "Product B", price: 200, description: "Deskripsi Product B" }, { id: 3, name: "Product C", price: 300, description: "Deskripsi Product C" }, ]; // Simulasi delay untuk pengambilan data setTimeout(() => { setProducts(dummyProducts); }, 1000); }, []); // Dependency array kosong untuk dijalankan sekali saat komponen di-mount // useEffect dengan dependency array yang memantau perubahan selectedProduct useEffect(() => { if (selectedProduct) { // Menampilkan detail produk berdasarkan produk yang dipilih setProductDetails({ name: selectedProduct.name, price: selectedProduct.price, description: selectedProduct.description, }); } }, [selectedProduct]); // Efek ini akan dijalankan setiap kali selectedProduct berubah return ( <div style={{ display: "flex" }}> <ProductCards products={products} setSelectedProduct={setSelectedProduct} /> <ProductDetails product={productDetails} /> </div> ); }; Langkah 2: Komponen untuk Menampilkan Daftar Produk Buat komponen ProductCards yang menampilkan daftar produk dari props dan memungkinkan pengguna memilih produk. const ProductCards = ({ products, setSelectedProduct }) => { const handleProductClick = (product) => { setSelectedProduct(product); }; return ( <div style={{ width: "50%" }}> <h3>Daftar Produk</h3> {products.length > 0 ? ( products.map((product) => ( <div key={product.id} style={{ border: "1px solid #ccc", padding: "10px", margin: "10px 0" }}> <p>{product.name}</p> <p>Harga: {product.price}</p> <button onClick={() => handleProductClick(product)}>Lihat Detail</button> </div> )) ) : ( <p>Loading produk...</p> )} </div> ); }; Langkah 3: Komponen untuk Menampilkan Detail Produk Setelah produk dipilih, detail produk akan ditampilkan di bagian kanan layar berdasarkan produk yang dipilih. const ProductDetails = ({ product }) => { return ( <div style={{ width: "50%", paddingLeft: "20px" }}> <h3>Detail Produk</h3> {product ? ( <div> <p><strong>{product.name}</strong></p> <p>Harga: {product.price}</p> <p>Deskripsi: {product.description}</p> </div> ) : ( <p>Pilih produk untuk melihat detail</p> )} </div> ); }; Langkah 4: Memahami Dependency Array Dalam contoh ini: useEffect pertama digunakan untuk memuat data produk saat komponen pertama kali dirender. Dependency array kosong ([]) memastikan efek hanya dijalankan sekali.useEffect kedua digunakan untuk memantau perubahan nilai selectedProduct. Setiap kali pengguna mengklik produk, selectedProduct diperbarui, yang memicu useEffect kedua untuk memperbarui state productDetails. Dependency array [selectedProduct] memastikan bahwa efek hanya dijalankan ketika ada perubahan pada selectedProduct. Dengan cara ini, setiap kali pengguna mengklik sebuah produk, detail produk akan muncul di sebelah kanan layar berkat perubahan pada dependency array. Beberapa Contoh Fitur Point of Sales yang Tidak Seharusnya Menggunakan useEffect atau Dependency Array Meskipun useEffect dengan dependency array sangat berguna dalam banyak kasus, ada situasi di mana menggunakan useState saja adalah pendekatan yang lebih baik, terutama jika fitur yang diimplementasikan tidak memerlukan efek samping. Dalam aplikasi point of sales (POS), ada beberapa fitur yang cukup sederhana untuk dikelola dengan useState saja tanpa perlu menggunakan useEffect. Penggunaan useEffect secara berlebihan dapat membuat kode lebih kompleks daripada yang diperlukan. Berikut adalah beberapa contoh fitur point of sales yang lebih baik dikelola dengan useState saja tanpa useEffect. Contoh 1: Mengelola Kuantitas Produk dalam Keranjang Belanja Pada aplikasi POS, ketika pengguna menambah atau mengurangi kuantitas produk dalam keranjang, kita tidak memerlukan useEffect karena perubahan kuantitas dapat langsung dikelola dengan useState. import React, { useState } from "react"; const Cart = () => { const [cartItems, setCartItems] = useState([ { id: 1, name: "Product A", quantity: 1, price: 100 }, { id: 2, name: "Product B", quantity: 2, price: 200 }, ]); const increaseQuantity = (id) => { const updatedCartItems = cartItems.map(item => item.id === id ? { ...item, quantity: item.quantity + 1 } : item ); setCartItems(updatedCartItems); }; const decreaseQuantity = (id) => { const updatedCartItems = cartItems.map(item => item.id === id && item.quantity > 1 ? { ...item, quantity: item.quantity - 1 } : item ); setCartItems(updatedCartItems); }; return ( <div> <h3>Keranjang Belanja</h3> {cartItems.map(item => ( <div key={item.id}> <p>{item.name}</p> <p>Harga: {item.price}</p> <p>Kuantitas: {item.quantity}</p> <button onClick={() => increaseQuantity(item.id)}>Tambah</button> <button onClick={() => decreaseQuantity(item.id)}>Kurangi</button> </div> ))} </div> ); }; export default Cart; Penjelasan: Di sini, useState digunakan untuk mengelola daftar produk dan kuantitasnya dalam keranjang.Tidak diperlukan useEffect karena setiap perubahan langsung dapat dikelola melalui fungsi handler (increaseQuantity dan decreaseQuantity) yang mengubah state. Contoh 2: Menampilkan Total Harga Berdasarkan Produk di Keranjang Untuk menghitung total harga barang-barang dalam keranjang, kita bisa langsung menghitungnya di dalam JSX tanpa perlu memisahkan logika ke dalam useEffect. Ini adalah contoh di mana menggunakan useState saja sudah cukup, karena perhitungan total harga adalah hasil langsung dari state yang ada. import React, { useState } from "react"; const CartWithTotal = () => { const [cartItems, setCartItems] = useState([ { id: 1, name: "Product A", quantity: 1, price: 100 }, { id: 2, name: "Product B", quantity: 2, price: 200 }, ]); const totalPrice = cartItems.reduce((total, item) => total + item.price * item.quantity, 0); return ( <div> <h3>Keranjang Belanja</h3> {cartItems.map(item => ( <div key={item.id}> <p>{item.name}</p> <p>Harga: {item.price}</p> <p>Kuantitas: {item.quantity}</p> </div> ))} <h3>Total Harga: {totalPrice}</h3> </div> ); }; export default CartWithTotal; Penjelasan: Tidak ada kebutuhan untuk menggunakan useEffect di sini karena total harga dapat dihitung langsung dari state yang ada setiap kali komponen dirender.Menggunakan useState untuk menyimpan item keranjang sudah cukup, dan perhitungan total harga bisa dilakukan dalam JSX, sehingga lebih sederhana dan efisien. Contoh 3: Menampilkan Pesan Berdasarkan Kondisi Simpel Jika Anda ingin menampilkan pesan sederhana berdasarkan apakah keranjang belanja kosong atau tidak, ini juga tidak memerlukan useEffect. Anda bisa memeriksa kondisi langsung di JSX menggunakan useState. import React, { useState } from "react"; const CartMessage = () => { const [cartItems, setCartItems] = useState([]); return ( <div> <h3>Keranjang Belanja</h3> {cartItems.length > 0 ? ( cartItems.map(item => ( <div key={item.id}> <p>{item.name}</p> <p>Harga: {item.price}</p> <p>Kuantitas: {item.quantity}</p> </div> )) ) : ( <p>Keranjang kosong</p> )} </div> ); }; export default CartMessage; Penjelasan: Tidak diperlukan useEffect karena kondisi apakah keranjang kosong atau tidak bisa langsung diperiksa berdasarkan panjang array cartItems.useState sudah cukup untuk mengelola state dan menampilkan pesan yang sesuai di JSX tanpa efek samping tambahan. Mengapa Tidak Menggunakan useEffect? useEffect sebaiknya digunakan ketika Anda membutuhkan efek samping seperti pengambilan data dari API, melakukan sinkronisasi state dengan sumber eksternal, atau mengatur event listener.Dalam contoh-contoh di atas, tidak ada efek samping yang terjadi. Semua perubahan state langsung berpengaruh pada rendering komponen, sehingga tidak perlu ada penggunaan useEffect. 3 Contoh Kesalahan Ketika Menerapkan useEffect pada Proyek Point of Sales Dalam pengembangan aplikasi dengan React, khususnya aplikasi point of sales (POS), useEffect sering kali disalahgunakan atau diterapkan secara tidak tepat, yang dapat menyebabkan masalah performa, logika bisnis yang salah, atau bug sulit terdeteksi. Berikut adalah tiga kesalahan umum dalam penerapan useEffect di proyek POS, serta solusi untuk memperbaikinya. Kesalahan 1: Memasukkan State yang Tidak Perlu ke dalam Dependency Array Kesalahan umum adalah memasukkan state yang selalu berubah secara terus-menerus ke dalam dependency array, yang menyebabkan useEffect dijalankan berulang-ulang dan tidak efisien. Contoh Koding: import React, { useState, useEffect } from "react"; const Cart = () => { const [cartItems, setCartItems] = useState([]); const [totalPrice, setTotalPrice] = useState(0); useEffect(() => { // Menghitung total harga setiap kali ada perubahan pada cartItems setTotalPrice(cartItems.reduce((total, item) => total + item.price * item.quantity, 0)); }, [cartItems, totalPrice]); // Kesalahan: memasukkan totalPrice ke dalam dependency array const addItemToCart = (newItem) => { setCartItems([...cartItems, newItem]); }; return ( <div> <h3>Total Harga: {totalPrice}</h3> <button onClick={() => addItemToCart({ id: 1, name: "Product A", price: 100, quantity: 1 })}> Tambah Produk A </button> </div> ); }; export default Cart; Kesalahan: Memasukkan totalPrice ke dalam dependency array menyebabkan useEffect terus dijalankan ulang setiap kali totalPrice berubah, padahal totalPrice sudah diperbarui di dalam efek tersebut. Solusi: Hapus totalPrice dari dependency array karena kita hanya perlu memantau perubahan pada cartItems. Perbaikan Koding: useEffect(() => { setTotalPrice(cartItems.reduce((total, item) => total + item.price * item.quantity, 0)); }, [cartItems]); // Dependency hanya pada cartItems Kesalahan 2: Menggunakan useEffect untuk Operasi yang Bisa Dilakukan Langsung di JSX Kesalahan lainnya adalah menggunakan useEffect untuk tugas yang sebenarnya bisa langsung dilakukan di JSX, seperti perhitungan sederhana atau render kondisional. Ini memperumit kode dan tidak efisien. Contoh Koding: import React, { useState, useEffect } from "react"; const CartMessage = () => { const [cartItems, setCartItems] = useState([]); const [message, setMessage] = useEffect(""); useEffect(() => { if (cartItems.length > 0) { setMessage("Keranjang Anda tidak kosong"); } else { setMessage("Keranjang kosong"); } }, [cartItems]); // Kesalahan: Menggunakan useEffect untuk mengatur pesan sederhana return ( <div> <h3>{message}</h3> </div> ); }; export default CartMessage; Kesalahan: Menggunakan useEffect untuk mengatur pesan sederhana seperti "Keranjang kosong" atau "Keranjang tidak kosong", yang sebenarnya bisa langsung dikelola di JSX. Solusi: Alihkan logika ini langsung ke dalam JSX tanpa menggunakan useEffect, karena tidak ada efek samping yang perlu ditangani. Perbaikan Koding: const CartMessage = () => { const [cartItems, setCartItems] = useState([]); return ( <div> <h3>{cartItems.length > 0 ? "Keranjang Anda tidak kosong" : "Keranjang kosong"}</h3> </div> ); }; Kesalahan 3: Menjalankan Fetch Data Berulang Kali Tanpa Menggunakan Dependency Array yang Tepat Kesalahan yang sering terjadi adalah tidak menetapkan dependency array dengan benar pada useEffect, yang menyebabkan fetch data atau efek lainnya dijalankan berulang-ulang setiap kali komponen dirender. Contoh Koding: import React, { useState, useEffect } from "react"; const ProductList = () => { const [products, setProducts] = useState([]); useEffect(() => { // Mengambil data produk setiap kali komponen dirender fetch("<https://api.example.com/products>") .then((response) => response.json()) .then((data) => setProducts(data)); }); // Kesalahan: Tidak ada dependency array, menyebabkan fetch terus-menerus return ( <div> <h3>Daftar Produk</h3> {products.map((product) => ( <div key={product.id}> <p>{product.name}</p> <p>Harga: {product.price}</p> </div> ))} </div> ); }; export default ProductList; Kesalahan: Karena tidak ada dependency array, useEffect dijalankan setiap kali komponen dirender, sehingga fetch data terus-menerus dilakukan, yang mengakibatkan beban berlebih pada aplikasi dan server. Solusi: Gunakan dependency array kosong [] jika Anda hanya ingin fetch data satu kali ketika komponen pertama kali di-mount. Perbaikan Koding: useEffect(() => { fetch("<https://api.example.com/products>") .then((response) => response.json()) .then((data) => setProducts(data)); }, []); // Dependency array kosong agar fetch hanya dijalankan sekali Kesimpulan Kesalahan pertama adalah memasukkan state yang tidak perlu ke dalam dependency array, yang menyebabkan efek dijalankan berulang-ulang.Kesalahan kedua adalah menggunakan useEffect untuk tugas sederhana yang bisa langsung ditangani dalam JSX.Kesalahan ketiga adalah tidak menggunakan dependency array dengan benar, yang menyebabkan efek seperti fetch data dijalankan terus-menerus. Dengan memahami kesalahan umum ini, Anda dapat mengoptimalkan penggunaan useEffect di proyek React, khususnya dalam aplikasi point of sales, dan memastikan performa serta logika aplikasi tetap efisien dan mudah di-maintain. Kesimpulan dan Penutup Dalam mengembangkan aplikasi point of sales atau proyek lain dengan React, memahami bagaimana cara yang benar dalam menggunakan useEffect dan useState sangatlah penting untuk memastikan performa aplikasi yang optimal dan efisien. Menghindari kesalahan umum, seperti memasukkan state yang tidak perlu dalam dependency array atau menjalankan logika sederhana di dalam useEffect, akan membuat kode Anda lebih bersih dan mudah dikelola. Setiap orang dapat belajar lebih dalam tentang pengembangan aplikasi dan React di BuildWithAngga. Dengan bergabung, Anda akan mendapatkan berbagai manfaat, termasuk konsultasi dengan mentor yang berpengalaman, akses materi selamanya, serta kesempatan untuk membangun portofolio terbaik yang akan meningkatkan peluang Anda dalam mendapatkan pekerjaan di dunia industri teknologi. Temukan pengalaman belajar yang menyenangkan dan terstruktur bersama BuildWithAngga, di mana Anda dapat mempercepat karir Anda di dunia web development dan teknologi lainnya.

Next.js adalah salah satu framework JavaScript yang sangat populer dan sering digunakan oleh developer dalam membangun website modern. Mengapa? Karena Next.js tidak hanya menawarkan performa tinggi, tetapi juga memudahkan developer dalam mengelola data dan state yang berbeda-beda. Ketika membangun sebuah website yang kompleks, seperti toko online atau aplikasi dengan banyak interaksi, menggunakan Next.js dapat menjadi pilihan terbaik. Framework ini memungkinkan pengelolaan data secara efisien, membuat pengelolaan state lebih mudah, serta memberikan fitur-fitur seperti rendering server-side yang meningkatkan performa dan SEO website. Next.js juga memudahkan developer untuk membuat website dengan struktur yang terorganisir dengan baik, sehingga cocok untuk proyek-proyek yang skalanya besar maupun kecil. Selain itu, framework ini sangat mendukung modularitas, di mana kita bisa dengan mudah membagi komponen-komponen website menjadi bagian yang lebih kecil, membuatnya lebih mudah untuk dikelola dan dikembangkan. Mengirim Data Antar Komponen di Next.js Dalam pengembangan website modern, sering kali kita bekerja dengan data dalam jumlah besar. Data tersebut harus dikelola dan ditampilkan dengan baik pada tampilan yang diinginkan. Di sinilah Next.js sangat membantu. Salah satu kemampuan dasar yang perlu dikuasai ketika menggunakan Next.js adalah cara mapping atau memetakan data dan mengirimkan data tersebut ke komponen yang berbeda. Artikel ini akan membahas bagaimana kita dapat memanfaatkan dummy data dalam Next.js dan bagaimana mengirim data tersebut antar komponen. Mapping data adalah proses di mana kita mengambil data dari sumber, baik itu dari API atau data statis seperti dummy data, dan menampilkannya dalam komponen. Setiap komponen bisa menerima data tersebut sebagai props dan menggunakannya sesuai kebutuhan, seperti untuk menampilkan daftar produk, kategori, atau informasi lainnya. Dengan memahami cara mengirim data ke komponen yang berbeda di Next.js, kita dapat membangun aplikasi web yang lebih dinamis dan responsif terhadap perubahan data. Membuat Proyek Website Sewa Rumah Menggunakan Next.js 14 dengan npm Untuk memulai proyek website sewa rumah menggunakan Next.js 14, pertama-tama kita perlu menginstal Next.js menggunakan npm. Berikut langkah-langkah lengkap untuk membuat proyek ini: npx create-next-app@latest website-sewa-rumah cd website-sewa-rumah npm install npm run dev Perintah di atas akan membuat proyek baru bernama website-sewa-rumah, menginstal semua dependensi, dan menjalankan proyek di mode pengembangan. Setelah berhasil, Anda dapat mengakses proyek tersebut melalui http://localhost:3000. Dalam proyek ini, kita akan membuat beberapa halaman penting seperti daftar rumah yang disewakan, kategori, testimoni dari penyewa, dan transaksi. Seluruh data akan dikelola melalui komponen-komponen terpisah agar lebih modular dan mudah dikelola. Membuat Data Dummy untuk Categories, Testimonials, Houses, dan Transactions Dalam proyek website sewa rumah, kita sering kali memerlukan data dummy untuk membantu dalam pengembangan dan testing. Data dummy ini dapat mencakup kategori rumah, testimoni penyewa, daftar rumah yang disewakan, dan transaksi yang terjadi. Berikut ini contoh bagaimana cara membuat data dummy di Next.js. Langkah pertama: Buat file data.js atau dummyData.js di folder root atau dalam folder data untuk menyimpan data dummy: // dummyData.js export const categories = [ { id: 1, name: 'Rumah Minimalis', description: 'Desain modern dan minimalis.' }, { id: 2, name: 'Rumah Klasik', description: 'Desain klasik dengan material kayu.' }, { id: 3, name: 'Rumah Modern', description: 'Rumah dengan teknologi pintar.' } ]; export const testimonials = [ { id: 1, name: 'Budi', message: 'Pelayanan sangat memuaskan!' }, { id: 2, name: 'Siti', message: 'Rumah bersih dan nyaman.' }, { id: 3, name: 'Andi', message: 'Proses sewa cepat dan mudah.' } ]; export const houses = [ { id: 1, name: 'Rumah Mewah di Jakarta', price: 100000000, category: 3, description: 'Rumah dengan teknologi pintar.' }, { id: 2, name: 'Rumah Minimalis di Bandung', price: 50000000, category: 1, description: 'Desain modern dan minimalis.' }, { id: 3, name: 'Rumah Klasik di Yogyakarta', price: 75000000, category: 2, description: 'Desain klasik dengan material kayu.' } ]; export const transactions = [ { id: 1, houseId: 1, userId: 1, date: '2024-10-01', amount: 100000000 }, { id: 2, houseId: 2, userId: 2, date: '2024-09-15', amount: 50000000 } ]; Langkah kedua: Import data dummy tersebut ke komponen yang membutuhkan. Misalnya, jika Anda ingin menampilkan daftar rumah yang disewakan, Anda bisa mengimpor data houses dari dummyData.js. // pages/index.js import { houses, categories } from '../dummyData'; export default function Home() { return ( <div> <h1>Daftar Rumah yang Disewakan</h1> <ul> {houses.map((house) => ( <li key={house.id}> <h2>{house.name}</h2> <p>Kategori: {categories.find(cat => cat.id === house.category)?.name}</p> <p>Harga: Rp {house.price}</p> <p>Deskripsi: {house.description}</p> </li> ))} </ul> </div> ); } Cara Melakukan Mapping pada Data dan Validasi Ketika Data Kosong Ketika melakukan mapping pada data, terutama dalam proyek Next.js, Anda bisa memanfaatkan fungsi map untuk mengiterasi data yang ada. Selain itu, penting untuk memastikan bahwa ketika data kosong, aplikasi tetap menampilkan informasi yang tepat. Misalnya, jika tidak ada rumah yang tersedia, kita dapat memberikan pesan yang menyatakan bahwa belum ada data terbaru. Berikut adalah cara lengkap melakukan mapping pada data dengan validasi data kosong: Langkah pertama: Import data dummy seperti houses, categories, dan testimonials, lalu lakukan mapping menggunakan fungsi map. Langkah kedua: Tambahkan validasi untuk mengecek apakah data tersebut kosong. Jika kosong, tampilkan pesan bahwa belum ada data terbaru. Berikut contoh koding lengkap: // pages/index.js import { houses, categories, testimonials } from '../dummyData'; export default function Home() { return ( <div> <h1>Daftar Rumah yang Disewakan</h1> {houses.length > 0 ? ( <ul> {houses.map((house) => ( <li key={house.id}> <h2>{house.name}</h2> <p>Kategori: {categories.find(cat => cat.id === house.category)?.name}</p> <p>Harga: Rp {house.price}</p> <p>Deskripsi: {house.description}</p> </li> ))} </ul> ) : ( <p>Belum ada data rumah terbaru.</p> )} <h1>Testimoni Penyewa</h1> {testimonials.length > 0 ? ( <ul> {testimonials.map((testimonial) => ( <li key={testimonial.id}> <p>{testimonial.message} - <strong>{testimonial.name}</strong></p> </li> ))} </ul> ) : ( <p>Belum ada testimoni terbaru.</p> )} </div> ); } Penjelasan kode: Pada bagian houses, kita melakukan pengecekan apakah data houses memiliki panjang lebih dari 0. Jika iya, maka kita melakukan mapping pada data tersebut untuk menampilkannya ke layar. Jika tidak, kita menampilkan pesan "Belum ada data rumah terbaru."Hal yang sama dilakukan pada bagian testimonials. Jika ada data, kita menampilkannya; jika tidak, kita memberikan pesan "Belum ada testimoni terbaru." Cara Membuat Component Baru Terpisah untuk Menerima Data dari Halaman Lain Pada proyek Next.js, kita bisa membuat komponen terpisah untuk memudahkan pengelolaan dan modularisasi aplikasi. Komponen ini dapat menerima data yang dilempar dari halaman lain dengan menggunakan props. Props adalah mekanisme di React dan Next.js untuk mengirimkan data dari satu komponen ke komponen lainnya. Berikut adalah langkah-langkah lengkap untuk membuat komponen baru dan menerima data dari halaman lain. Langkah pertama: Buat komponen baru yang akan menerima data. Misalnya, buat komponen HouseList di dalam folder components. // components/HouseList.js export default function HouseList({ houses, categories }) { return ( <div> <h2>Daftar Rumah</h2> {houses.length > 0 ? ( <ul> {houses.map((house) => ( <li key={house.id}> <h3>{house.name}</h3> <p>Kategori: {categories.find(cat => cat.id === house.category)?.name}</p> <p>Harga: Rp {house.price}</p> <p>Deskripsi: {house.description}</p> </li> ))} </ul> ) : ( <p>Belum ada data rumah terbaru.</p> )} </div> ); } Pada komponen HouseList, props houses dan categories akan diterima dari komponen induk dan digunakan untuk melakukan mapping data dan menampilkannya. Jika data houses kosong, maka akan muncul pesan "Belum ada data rumah terbaru." Langkah kedua: Di halaman lain, misalnya halaman Home, kirim data ke komponen HouseList melalui props. // pages/index.js import { houses, categories, testimonials } from '../dummyData'; import HouseList from '../components/HouseList'; export default function Home() { return ( <div> <h1>Website Sewa Rumah</h1> {/* Kirim data houses dan categories ke komponen HouseList */} <HouseList houses={houses} categories={categories} /> <h2>Testimoni Penyewa</h2> {testimonials.length > 0 ? ( <ul> {testimonials.map((testimonial) => ( <li key={testimonial.id}> <p>{testimonial.message} - <strong>{testimonial.name}</strong></p> </li> ))} </ul> ) : ( <p>Belum ada testimoni terbaru.</p> )} </div> ); } Pada halaman Home, kita mengimpor komponen HouseList dan mengirimkan data houses dan categories ke dalam komponen tersebut menggunakan props. Dengan cara ini, komponen HouseList akan menerima data yang dilempar dan menampilkannya sesuai dengan logika yang sudah ditentukan. Penjelasan tambahan: Komponen HouseList bersifat reusable karena dapat menerima data yang berbeda dari berbagai halaman lain jika diperlukan.Data dikirimkan menggunakan props yang merupakan metode standar di React untuk mengirim informasi dari komponen induk ke komponen anak. Ilmu Penting Lain yang Perlu Dipelajari Selanjutnya Setelah mempelajari cara membangun website menggunakan Next.js dan mengelola data dengan baik, ada beberapa ilmu penting lainnya yang bisa membantu meningkatkan kemampuan pengembangan web Anda. Ilmu-ilmu ini sangat berguna untuk mempersiapkan Anda menjadi developer yang lebih mahir dalam membangun aplikasi yang kompleks dan skalabel. Semua topik berikut tersedia di Buildwithangga sebagai bagian dari berbagai kursus yang dapat diakses dengan mudah. 1. React State Management (Redux atau Zustand) Mengelola state dalam aplikasi yang semakin besar bisa menjadi tantangan. Menggunakan alat seperti Redux atau Zustand akan membantu Anda mengelola state secara lebih efisien. Di Buildwithangga, Anda bisa belajar cara menggunakan Redux atau Zustand untuk membangun aplikasi dengan alur data yang lebih teratur dan mudah dipelihara. 2. API Integration dan Authentication Setelah berhasil membangun website yang bisa menampilkan data, penting untuk belajar bagaimana mengintegrasikan API eksternal untuk mengambil data dari server. Selain itu, ilmu tentang autentikasi menggunakan JWT atau OAuth sangat penting untuk menjaga keamanan aplikasi web. Buildwithangga menyediakan kursus yang mengajarkan cara menghubungkan website dengan API dan menerapkan autentikasi yang aman. 3. Deployment dan Optimisasi Website Membuat aplikasi lokal adalah langkah pertama, tetapi memahami cara meng-deploy aplikasi ke server seperti Vercel atau Netlify adalah langkah berikutnya yang penting. Anda juga perlu belajar cara mengoptimalkan performa website agar lebih cepat diakses oleh pengguna. Di Buildwithangga, Anda bisa menemukan panduan lengkap tentang deployment serta teknik optimisasi seperti image lazy loading, caching, dan server-side rendering. 4. TypeScript Jika Anda ingin membangun aplikasi yang lebih skalabel dan mudah di-maintain, TypeScript adalah teknologi yang harus dipelajari. TypeScript memberikan tipedata yang kuat di dalam JavaScript, sehingga mengurangi kesalahan pada saat pengembangan. Buildwithangga menyediakan kursus yang akan membantu Anda memahami bagaimana TypeScript bisa diintegrasikan dengan Next.js untuk membangun aplikasi yang lebih solid. 5. Responsive Design dan Tailwind CSS Untuk membangun website yang tampilannya menarik di berbagai perangkat, mempelajari responsive design dan alat seperti Tailwind CSS sangat penting. Dengan menggunakan Tailwind CSS, Anda bisa mempercepat pengembangan antarmuka yang responsif tanpa perlu menulis CSS dari awal. Di Buildwithangga, Anda dapat belajar cara menerapkan Tailwind CSS dalam proyek Next.js untuk membuat desain yang modern dan responsif. Ilmu-ilmu di atas akan memperluas wawasan dan keterampilan Anda sebagai seorang developer. Dengan belajar dari mentor berpengalaman di Buildwithangga, Anda juga akan mendapatkan akses ke bonus konsultasi, diskusi dengan sesama siswa, serta roadmap belajar yang terstruktur untuk membantu Anda lebih siap menghadapi tantangan di dunia kerja.

Di era digital seperti sekarang, membangun website modern adalah langkah penting bagi perusahaan yang ingin meningkatkan bisnis mereka secara online. Sebuah website tidak hanya berfungsi sebagai wajah perusahaan di dunia digital, tetapi juga sebagai platform interaksi antara perusahaan dan pelanggannya. Dengan website yang modern dan responsif, perusahaan dapat menjangkau lebih banyak audiens, meningkatkan kepercayaan pelanggan, dan memperkuat branding mereka. Selain itu, website yang baik juga dapat mendukung strategi pemasaran, seperti SEO dan media sosial, yang pada akhirnya membantu meningkatkan penjualan dan profit perusahaan. Oleh karena itu, penting bagi perusahaan untuk terus belajar dan mengikuti perkembangan teknologi agar bisa memaksimalkan potensi website mereka dalam menjalankan bisnis secara online. Mengapa Menggunakan Next.js untuk Website Modern Salah satu framework yang banyak digunakan oleh developer untuk membangun website modern adalah Next.js. Framework ini sangat populer karena fleksibilitasnya yang memungkinkan penggunaannya baik untuk frontend maupun backend. Dengan Next.js, perusahaan dapat membangun aplikasi web yang cepat, efisien, dan SEO-friendly, sehingga dapat meningkatkan performa website dan pengalaman pengguna. Selain itu, Next.js juga mendukung rendering server-side dan static site generation, yang membuatnya sangat cocok untuk berbagai jenis proyek web development. Fleksibilitas inilah yang menjadikan Next.js pilihan tepat untuk perusahaan yang ingin mencoba teknologi terbaru dan menghadirkan website modern yang handal untuk bisnis mereka. Fitur Component dalam Next.js untuk Mempercepat Development Next.js memiliki fitur yang sangat membantu dalam mempercepat proses development, yaitu component. Component dalam Next.js memungkinkan developer untuk memecah tampilan website menjadi bagian-bagian kecil yang terpisah namun saling terhubung. Setiap component ini berfungsi secara independen, yang artinya bisa digunakan kembali di berbagai bagian lain dari aplikasi. Dengan memanfaatkan fitur ini, proses development menjadi jauh lebih efisien karena developer tidak perlu menulis ulang kode yang sama. Selain itu, component juga mempermudah proses maintenance website. Ketika ada perubahan yang perlu dilakukan, developer hanya perlu memperbarui component tertentu tanpa harus memodifikasi keseluruhan aplikasi. Inilah yang membuat component menjadi salah satu fitur andalan di Next.js untuk membangun website modern. Apa Itu Component-Based Architecture dan Jenis Component dalam Next.js Component-based architecture adalah pendekatan dalam pengembangan aplikasi web yang mengorganisir aplikasi menjadi potongan-potongan kecil yang disebut component. Setiap component memiliki fungsi spesifik dan dapat digunakan kembali di berbagai bagian aplikasi. Pendekatan ini membuat kode lebih mudah dipahami, dipelihara, dan dikembangkan dalam jangka panjang. Di Next.js, terdapat beberapa jenis component yang sering digunakan, antara lain: Functional Components: Ini adalah jenis component yang paling umum dalam Next.js. Component ini hanya menerima props dan mengembalikan tampilan (UI). Biasanya digunakan untuk tampilan statis atau elemen yang tidak membutuhkan banyak logika kompleks.Stateful Components: Component yang memiliki internal state, biasanya digunakan ketika aplikasi membutuhkan interaksi dinamis, seperti form input atau perubahan data secara real-time.Presentational Components: Digunakan khusus untuk merender tampilan tanpa memiliki logika bisnis yang kompleks. Presentational components fokus pada bagaimana tampilan muncul kepada pengguna.Container Components: Component yang menangani logika bisnis dan mengelola state dari aplikasi. Biasanya, container components bekerja sama dengan presentational components untuk memisahkan logika dan tampilan. Developer perlu menggunakan component berdasarkan kebutuhan aplikasi. Misalnya, jika hanya membutuhkan tampilan sederhana, maka functional components bisa digunakan. Namun, jika ada interaksi yang lebih kompleks atau pengelolaan data, stateful dan container components menjadi pilihan yang tepat. Dengan memanfaatkan berbagai jenis component ini, developer dapat membangun aplikasi web yang lebih terstruktur, efisien, dan mudah di-maintain. Membuat Project Next.js Toko Sepatu Online Terbaru dengan npm Pada tutorial ini, kita akan membahas bagaimana cara membuat project Next.js terbaru untuk toko sepatu online. Berikut adalah langkah-langkahnya beserta contoh kode yang lengkap. Install Next.js dengan npm Untuk memulai, pastikan npm sudah terpasang di komputer Anda. Setelah itu, buka terminal dan jalankan perintah berikut untuk membuat project Next.js baru: npx create-next-app@latest toko-sepatu-online Perintah ini akan membuat folder bernama toko-sepatu-online dan menginstal semua dependency yang diperlukan untuk memulai project Next.js. Menjalankan Project Next.js Setelah proses instalasi selesai, masuk ke direktori project yang baru saja dibuat: cd toko-sepatu-online Jalankan project Next.js untuk melihat apakah semuanya berjalan dengan baik: npm run dev Kunjungi http://localhost:3000 di browser Anda, dan Anda akan melihat halaman default Next.js. Struktur Project Berikut adalah struktur dasar project yang baru saja dibuat: toko-sepatu-online/ ├── node_modules/ ├── public/ ├── src/ │ ├── pages/ │ └── styles/ ├── .gitignore ├── package.json ├── README.md └── next.config.js Membuat Halaman Home untuk Toko Sepatu Buka file src/pages/index.js dan modifikasi untuk membuat halaman home bagi toko sepatu online Anda: import Head from 'next/head'; export default function Home() { return ( <div> <Head> <title>Toko Sepatu Online</title> <meta name="description" content="Belanja sepatu online dengan koleksi terbaru" /> </Head> <header> <h1>Selamat Datang di Toko Sepatu Online</h1> <p>Koleksi sepatu terbaru untuk gaya dan kenyamanan Anda</p> </header> </div> ); } Menambahkan Daftar Produk Sepatu Untuk menampilkan daftar sepatu, buat array data produk sepatu di dalam halaman index.js. Kemudian, gunakan fungsi map untuk menampilkan daftar produk tersebut. const products = [ { id: 1, name: 'Sepatu Running', price: 500000 }, { id: 2, name: 'Sepatu Basket', price: 600000 }, { id: 3, name: 'Sepatu Casual', price: 400000 } ]; export default function Home() { return ( <div> <Head> <title>Toko Sepatu Online</title> <meta name="description" content="Belanja sepatu online dengan koleksi terbaru" /> </Head> <header> <h1>Selamat Datang di Toko Sepatu Online</h1> <p>Koleksi sepatu terbaru untuk gaya dan kenyamanan Anda</p> </header> <section> <h2>Produk Kami</h2> <ul> {products.map((product) => ( <li key={product.id}> <h3>{product.name}</h3> <p>Harga: Rp {product.price}</p> </li> ))} </ul> </section> </div> ); } Menambahkan Style pada Halaman Untuk memberikan tampilan yang lebih baik, tambahkan CSS ke halaman Anda. Buka file src/styles/globals.css dan tambahkan gaya berikut: body { font-family: Arial, sans-serif; margin: 0; padding: 0; box-sizing: border-box; } header { background-color: #f8f9fa; padding: 20px; text-align: center; } h1 { color: #333; } section { padding: 20px; } ul { list-style-type: none; padding: 0; } li { border-bottom: 1px solid #ddd; padding: 10px 0; } Setelah itu, buka kembali halaman di browser Anda. Sekarang tampilan toko sepatu online Anda terlihat lebih rapi dan profesional. Menambahkan Produk Baru Untuk menambahkan produk baru, Anda hanya perlu menambahkannya ke dalam array products di file index.js: const products = [ { id: 1, name: 'Sepatu Running', price: 500000 }, { id: 2, name: 'Sepatu Basket', price: 600000 }, { id: 3, name: 'Sepatu Casual', price: 400000 }, { id: 4, name: 'Sepatu Formal', price: 700000 } ]; Produk baru tersebut akan otomatis muncul di halaman produk tanpa perlu perubahan besar pada kode lainnya. Membuat Beberapa Komponen Utama pada Website Sepatu Online Dalam Next.js, kita bisa memanfaatkan fitur component untuk memecah website menjadi bagian-bagian kecil yang lebih mudah diatur dan dipelihara. Berikut adalah cara membuat beberapa komponen utama untuk website sepatu online beserta contoh koding lengkap. Membuat Komponen Header Komponen pertama yang akan kita buat adalah Header, yang akan menampilkan judul dan deskripsi singkat tentang toko sepatu online. Buat file Header.js di dalam folder src/components. import React from 'react'; const Header = () => { return ( <header> <h1>Toko Sepatu Online</h1> <p>Koleksi sepatu terbaru dengan harga terjangkau</p> </header> ); }; export default Header; Setelah itu, import komponen Header ke dalam halaman utama src/pages/index.js. import Head from 'next/head'; import Header from '../components/Header'; export default function Home() { return ( <div> <Head> <title>Toko Sepatu Online</title> <meta name="description" content="Belanja sepatu online dengan koleksi terbaru" /> </Head> <Header /> {/* Konten lainnya */} </div> ); } Membuat Komponen Produk Selanjutnya, kita buat komponen Product untuk menampilkan informasi setiap produk. Buat file Product.js di dalam folder src/components. import React from 'react'; const Product = ({ name, price }) => { return ( <div> <h3>{name}</h3> <p>Harga: Rp {price}</p> </div> ); }; export default Product; Kemudian, kita gunakan komponen Product ini di halaman utama untuk menampilkan daftar produk. Kembali ke src/pages/index.js dan tambahkan produk ke dalam halaman: import Head from 'next/head'; import Header from '../components/Header'; import Product from '../components/Product'; export default function Home() { const products = [ { id: 1, name: 'Sepatu Running', price: 500000 }, { id: 2, name: 'Sepatu Basket', price: 600000 }, { id: 3, name: 'Sepatu Casual', price: 400000 } ]; return ( <div> <Head> <title>Toko Sepatu Online</title> <meta name="description" content="Belanja sepatu online dengan koleksi terbaru" /> </Head> <Header /> <section> <h2>Daftar Produk</h2> <div> {products.map((product) => ( <Product key={product.id} name={product.name} price={product.price} /> ))} </div> </section> </div> ); } Membuat Komponen Footer Untuk melengkapi website, kita buat komponen Footer yang akan berisi informasi singkat tentang toko. Buat file Footer.js di dalam folder src/components. import React from 'react'; const Footer = () => { return ( <footer> <p>© 2024 Toko Sepatu Online. All Rights Reserved.</p> </footer> ); }; export default Footer; Sekarang, tambahkan komponen Footer ke dalam halaman utama index.js agar muncul di bagian bawah halaman. import Head from 'next/head'; import Header from '../components/Header'; import Product from '../components/Product'; import Footer from '../components/Footer'; export default function Home() { const products = [ { id: 1, name: 'Sepatu Running', price: 500000 }, { id: 2, name: 'Sepatu Basket', price: 600000 }, { id: 3, name: 'Sepatu Casual', price: 400000 } ]; return ( <div> <Head> <title>Toko Sepatu Online</title> <meta name="description" content="Belanja sepatu online dengan koleksi terbaru" /> </Head> <Header /> <section> <h2>Daftar Produk</h2> <div> {products.map((product) => ( <Product key={product.id} name={product.name} price={product.price} /> ))} </div> </section> <Footer /> </div> ); } Menambahkan Style untuk Komponen Buat tampilan website lebih menarik dengan menambahkan style di file src/styles/globals.css. Berikut adalah contoh CSS yang bisa digunakan: body { font-family: Arial, sans-serif; margin: 0; padding: 0; box-sizing: border-box; } header { background-color: #f8f9fa; padding: 20px; text-align: center; } footer { background-color: #343a40; color: #fff; text-align: center; padding: 10px 0; position: absolute; bottom: 0; width: 100%; } section { padding: 20px; } h1 { color: #333; } h3 { color: #007bff; } p { margin: 0; } Menggunakan Komponen secara Efisien Dengan menggunakan komponen, website sepatu online Anda kini lebih terstruktur dan mudah untuk dikembangkan. Komponen Header, Product, dan Footer bisa digunakan di berbagai halaman, sehingga tidak perlu menulis ulang kode di setiap halaman. Ini tidak hanya mempercepat proses development, tetapi juga memudahkan proses maintenance di masa depan. Komponen memungkinkan Anda untuk fokus pada setiap bagian secara terpisah dan membuat website menjadi lebih modular dan scalable. Membuat Data Dummy pada Website Toko Sepatu dan Mengirimkan Data ke Component di Halaman Lain Dalam membangun website dengan Next.js, salah satu kebutuhan umum adalah membuat data dummy dan mengirimkan data tersebut dari satu halaman ke halaman lainnya. Berikut adalah langkah-langkah lengkap beserta contoh koding untuk membuat data dummy dan meneruskannya antar halaman di website toko sepatu. Membuat Data Dummy Produk Sepatu Pertama, buat data dummy untuk produk sepatu yang bisa diakses dari berbagai halaman. Buat file baru bernama products.js di dalam folder src/data. export const products = [ { id: 1, name: 'Sepatu Running', price: 500000, description: 'Sepatu untuk olahraga lari.' }, { id: 2, name: 'Sepatu Basket', price: 600000, description: 'Sepatu untuk bermain basket.' }, { id: 3, name: 'Sepatu Casual', price: 400000, description: 'Sepatu santai untuk sehari-hari.' }, { id: 4, name: 'Sepatu Formal', price: 700000, description: 'Sepatu formal untuk acara resmi.' } ]; Data ini akan digunakan untuk menampilkan daftar produk di halaman toko sepatu serta diteruskan ke halaman detail produk. Menampilkan Daftar Produk di Halaman Utama Sekarang kita tampilkan data produk di halaman utama. Buka file src/pages/index.js dan impor data dari file products.js, lalu tampilkan daftar produk menggunakan component Product. import Head from 'next/head'; import Header from '../components/Header'; import Product from '../components/Product'; import { products } from '../data/products'; import Link from 'next/link'; export default function Home() { return ( <div> <Head> <title>Toko Sepatu Online</title> <meta name="description" content="Belanja sepatu online dengan koleksi terbaru" /> </Head> <Header /> <section> <h2>Daftar Produk</h2> <div> {products.map((product) => ( <div key={product.id}> <Product name={product.name} price={product.price} /> <Link href={`/product/${product.id}`}> <a>Lihat Detail</a> </Link> </div> ))} </div> </section> </div> ); } Pada kode di atas, setiap produk ditampilkan menggunakan component Product, dan setiap produk juga memiliki link yang mengarahkan pengguna ke halaman detail produk menggunakan Link dari Next.js. Membuat Halaman Detail Produk Untuk menampilkan detail produk, buat halaman dinamis menggunakan routing berbasis file di Next.js. Buat folder product di dalam src/pages, lalu buat file [id].js untuk menangani routing dinamis berdasarkan id produk. import { products } from '../../data/products'; import { useRouter } from 'next/router'; import Head from 'next/head'; const ProductDetail = () => { const router = useRouter(); const { id } = router.query; const product = products.find((p) => p.id === parseInt(id)); if (!product) { return <p>Produk tidak ditemukan</p>; } return ( <div> <Head> <title>{product.name} - Detail Produk</title> <meta name="description" content={`Detail produk untuk ${product.name}`} /> </Head> <h1>{product.name}</h1> <p>Harga: Rp {product.price}</p> <p>{product.description}</p> </div> ); }; export default ProductDetail; Pada halaman ini, id produk diambil dari URL menggunakan useRouter() dari Next.js. Produk yang sesuai dengan id tersebut kemudian dicari dari data dummy dan ditampilkan detailnya. Jika produk tidak ditemukan, akan muncul pesan "Produk tidak ditemukan". Menghubungkan Halaman Utama dengan Halaman Detail Kembali ke halaman utama, kita telah menambahkan link yang mengarahkan ke halaman detail produk dengan URL /product/[id]. Ketika pengguna mengklik link "Lihat Detail" pada suatu produk, mereka akan diarahkan ke halaman ProductDetail yang menampilkan informasi lengkap produk tersebut. Misalnya, jika pengguna mengklik produk dengan id 1, mereka akan diarahkan ke URL /product/1, dan halaman detail akan menampilkan nama, harga, dan deskripsi produk tersebut. Menambahkan Style untuk Halaman Detail Agar tampilan lebih menarik, tambahkan style untuk halaman detail produk di file src/styles/globals.css. h1 { color: #007bff; margin-top: 20px; } p { font-size: 18px; } a { color: #007bff; text-decoration: none; } a:hover { text-decoration: underline; } Mengatur Types TypeScript pada Component di Next.js Dalam project Next.js yang menggunakan TypeScript, mengatur types pada setiap component sangat penting untuk memastikan data yang diterima atau dikirim lebih akurat dan aman. Berikut adalah langkah-langkah lengkap beserta contoh koding untuk mengatur types TypeScript pada component agar data yang diterima atau dikirim sesuai dengan yang diharapkan. Mengaktifkan TypeScript pada Project Next.js Jika project Next.js Anda belum menggunakan TypeScript, Anda bisa mengaktifkannya dengan menjalankan perintah berikut: touch tsconfig.json npm install --save-dev typescript @types/react @types/node Setelah itu, jalankan project Next.js Anda, dan Next.js akan otomatis mengonversi file-file ke dalam format TypeScript. Menyiapkan Data Dummy dengan TypeScript Langkah pertama adalah membuat type untuk data dummy. Buat file baru bernama types.ts di dalam folder src untuk mendefinisikan type yang digunakan. Misalnya, kita ingin mendefinisikan type untuk produk sepatu: export interface Product { id: number; name: string; price: number; description: string; } Type Product ini memiliki empat properti: id, name, price, dan description, yang semuanya wajib ada ketika produk digunakan. Membuat Data Dummy dengan Type Setelah mendefinisikan type, kita dapat menggunakannya dalam file products.ts yang berisi data dummy. Buka file src/data/products.ts dan gunakan type yang sudah didefinisikan: import { Product } from '../types'; export const products: Product[] = [ { id: 1, name: 'Sepatu Running', price: 500000, description: 'Sepatu untuk olahraga lari.' }, { id: 2, name: 'Sepatu Basket', price: 600000, description: 'Sepatu untuk bermain basket.' }, { id: 3, name: 'Sepatu Casual', price: 400000, description: 'Sepatu santai untuk sehari-hari.' }, { id: 4, name: 'Sepatu Formal', price: 700000, description: 'Sepatu formal untuk acara resmi.' } ]; Di sini, kita menggunakan Product[] untuk mendefinisikan bahwa variabel products adalah array dari objek Product. Mengatur Type pada Komponen Product Sekarang kita akan membuat komponen Product dan menetapkan type untuk data yang diterima oleh komponen tersebut. Buka file src/components/Product.tsx dan buat komponen dengan TypeScript. import React from 'react'; import { Product } from '../types'; interface ProductProps { name: string; price: number; } const ProductComponent: React.FC<ProductProps> = ({ name, price }) => { return ( <div> <h3>{name}</h3> <p>Harga: Rp {price}</p> </div> ); }; export default ProductComponent; Di sini, kita membuat interface ProductProps untuk mendefinisikan bahwa ProductComponent menerima dua props: name dan price, yang keduanya bertipe string dan number. Menggunakan Komponen dengan Type yang Tepat Sekarang, kita akan menggunakan ProductComponent di halaman utama. Buka file src/pages/index.tsx dan impor data serta component: import Head from 'next/head'; import Header from '../components/Header'; import ProductComponent from '../components/Product'; import { products } from '../data/products'; export default function Home() { return ( <div> <Head> <title>Toko Sepatu Online</title> <meta name="description" content="Belanja sepatu online dengan koleksi terbaru" /> </Head> <Header /> <section> <h2>Daftar Produk</h2> <div> {products.map((product) => ( <ProductComponent key={product.id} name={product.name} price={product.price} /> ))} </div> </section> </div> ); } Pada bagian ini, kita memastikan bahwa setiap produk yang dilemparkan ke ProductComponent memiliki data dengan tipe yang sesuai (name: string dan price: number). Menambahkan Type untuk Routing Dinamis Selain mengatur types pada komponen, kita juga bisa mengatur types untuk halaman dengan routing dinamis. Buka file src/pages/product/[id].tsx dan tambahkan type untuk menangani produk: import { useRouter } from 'next/router'; import { products } from '../../data/products'; import { Product } from '../../types'; const ProductDetail: React.FC = () => { const router = useRouter(); const { id } = router.query; const product: Product | undefined = products.find((p) => p.id === Number(id)); if (!product) { return <p>Produk tidak ditemukan</p>; } return ( <div> <h1>{product.name}</h1> <p>Harga: Rp {product.price}</p> <p>{product.description}</p> </div> ); }; export default ProductDetail; Di sini, kita memastikan bahwa data product yang ditemukan sesuai dengan type Product. Jika product tidak ditemukan, halaman akan menampilkan pesan error. Menerapkan State Management pada Component agar Data dan Tampilan Dinamis Dalam pengembangan aplikasi Next.js, state management sangat penting untuk membuat komponen lebih dinamis. Dengan state, kita bisa mengatur data yang berubah secara real-time, seperti interaksi pengguna atau perubahan nilai dari input. Berikut adalah langkah-langkah lengkap untuk menerapkan state management pada sebuah komponen dengan contoh koding yang rinci. Membuat State dengan useState Pertama, kita akan membuat komponen sederhana yang menggunakan useState untuk mengelola state di dalamnya. Misalnya, kita akan membuat komponen yang menampilkan daftar sepatu dan memungkinkan pengguna untuk menambah produk sepatu ke dalam daftar favorit. Buat komponen baru bernama ProductList.tsx di dalam folder src/components: import React, { useState } from 'react'; const ProductList = () => { const [favorites, setFavorites] = useState<string[]>([]); const products = ['Sepatu Running', 'Sepatu Basket', 'Sepatu Casual', 'Sepatu Formal']; const addFavorite = (product: string) => { if (!favorites.includes(product)) { setFavorites([...favorites, product]); } }; return ( <div> <h2>Daftar Produk</h2> <ul> {products.map((product) => ( <li key={product}> {product} <button onClick={() => addFavorite(product)}>Tambah ke Favorit</button> </li> ))} </ul> <h3>Produk Favorit</h3> {favorites.length > 0 ? ( <ul> {favorites.map((favorite) => ( <li key={favorite}>{favorite}</li> ))} </ul> ) : ( <p>Belum ada produk favorit</p> )} </div> ); }; export default ProductList; Pada contoh di atas, kita menggunakan useState untuk menyimpan daftar produk favorit di state favorites. Komponen ini memiliki daftar produk sepatu, dan pengguna bisa menambahkan produk ke daftar favorit dengan mengklik tombol "Tambah ke Favorit". Setiap kali produk ditambahkan, state favorites diperbarui, dan daftar favorit ditampilkan secara dinamis di bawah daftar produk. Menampilkan Komponen di Halaman Utama Selanjutnya, kita akan menampilkan komponen ProductList di halaman utama. Buka file src/pages/index.tsx dan tambahkan ProductList ke dalamnya: import Head from 'next/head'; import Header from '../components/Header'; import ProductList from '../components/ProductList'; export default function Home() { return ( <div> <Head> <title>Toko Sepatu Online</title> <meta name="description" content="Belanja sepatu online dengan koleksi terbaru" /> </Head> <Header /> <ProductList /> </div> ); } Sekarang, komponen ProductList akan muncul di halaman utama. Pengguna dapat menambah produk ke daftar favorit, dan setiap produk yang dipilih akan ditampilkan secara dinamis di bagian "Produk Favorit". Mengelola State dengan Input Pengguna Untuk memperlihatkan lebih banyak penggunaan state, kita akan menambahkan input yang memungkinkan pengguna untuk menambahkan produk baru ke daftar produk. Kembali ke file ProductList.tsx dan tambahkan input untuk menambah produk: import React, { useState } from 'react'; const ProductList = () => { const [favorites, setFavorites] = useState<string[]>([]); const [products, setProducts] = useState<string[]>(['Sepatu Running', 'Sepatu Basket', 'Sepatu Casual', 'Sepatu Formal']); const [newProduct, setNewProduct] = useState<string>(''); const addFavorite = (product: string) => { if (!favorites.includes(product)) { setFavorites([...favorites, product]); } }; const addProduct = () => { if (newProduct && !products.includes(newProduct)) { setProducts([...products, newProduct]); setNewProduct(''); } }; return ( <div> <h2>Daftar Produk</h2> <ul> {products.map((product) => ( <li key={product}> {product} <button onClick={() => addFavorite(product)}>Tambah ke Favorit</button> </li> ))} </ul> <h3>Tambah Produk Baru</h3> <input type="text" value={newProduct} onChange={(e) => setNewProduct(e.target.value)} placeholder="Nama produk baru" /> <button onClick={addProduct}>Tambah Produk</button> <h3>Produk Favorit</h3> {favorites.length > 0 ? ( <ul> {favorites.map((favorite) => ( <li key={favorite}>{favorite}</li> ))} </ul> ) : ( <p>Belum ada produk favorit</p> )} </div> ); }; export default ProductList; Pada kode di atas, kita menambahkan state baru newProduct untuk menyimpan input dari pengguna. Ketika pengguna mengetikkan nama produk baru, state newProduct akan diperbarui, dan ketika tombol "Tambah Produk" diklik, produk baru akan ditambahkan ke daftar produk menggunakan setProducts. Daftar produk diperbarui secara dinamis, dan pengguna juga dapat menambahkan produk baru ke daftar favorit. Menyimpan State di Local Storage (Opsional) Untuk mempertahankan state meskipun halaman di-refresh, Anda bisa menggunakan local storage. Berikut adalah cara menerapkan penyimpanan data menggunakan local storage pada state produk favorit: Tambahkan efek samping untuk menyimpan dan mengambil data dari local storage menggunakan useEffect dari React: import React, { useState, useEffect } from 'react'; const ProductList = () => { const [favorites, setFavorites] = useState<string[]>([]); const [products, setProducts] = useState<string[]>(['Sepatu Running', 'Sepatu Basket', 'Sepatu Casual', 'Sepatu Formal']); const [newProduct, setNewProduct] = useState<string>(''); useEffect(() => { const savedFavorites = localStorage.getItem('favorites'); if (savedFavorites) { setFavorites(JSON.parse(savedFavorites)); } }, []); useEffect(() => { localStorage.setItem('favorites', JSON.stringify(favorites)); }, [favorites]); const addFavorite = (product: string) => { if (!favorites.includes(product)) { setFavorites([...favorites, product]); } }; const addProduct = () => { if (newProduct && !products.includes(newProduct)) { setProducts([...products, newProduct]); setNewProduct(''); } }; return ( <div> <h2>Daftar Produk</h2> <ul> {products.map((product) => ( <li key={product}> {product} <button onClick={() => addFavorite(product)}>Tambah ke Favorit</button> </li> ))} </ul> <h3>Tambah Produk Baru</h3> <input type="text" value={newProduct} onChange={(e) => setNewProduct(e.target.value)} placeholder="Nama produk baru" /> <button onClick={addProduct}>Tambah Produk</button> <h3>Produk Favorit</h3> {favorites.length > 0 ? ( <ul> {favorites.map((favorite) => ( <li key={favorite}>{favorite}</li> ))} </ul> ) : ( <p>Belum ada produk favorit</p> )} </div> ); }; export default ProductList; Pada contoh ini, state favorites disimpan ke dalam local storage setiap kali produk baru ditambahkan ke dalam daftar favorit, dan saat halaman dimuat kembali, data favorit diambil dari local storage. Menerapkan Conditional Rendering pada Component di Proyek Toko Sepatu Online Dalam sebuah aplikasi, terkadang kita perlu menampilkan elemen atau konten yang berbeda berdasarkan kondisi tertentu. Pada proyek toko sepatu online, kita bisa menggunakan conditional rendering untuk mengontrol tampilan berdasarkan kondisi seperti ketersediaan produk, status login pengguna, atau kategori produk yang dipilih. Berikut adalah langkah-langkah untuk menerapkan conditional rendering pada sebuah component dengan contoh kode lengkap. Membuat Komponen Produk dengan Ketersediaan Stok Kita akan membuat komponen ProductList yang menampilkan daftar sepatu. Sepatu yang stoknya habis akan ditampilkan dengan pesan khusus, sementara sepatu yang tersedia akan menampilkan tombol "Tambah ke Keranjang". Buat file ProductList.tsx di dalam folder src/components: import React from 'react'; interface Product { id: number; name: string; price: number; isAvailable: boolean; } const ProductList: React.FC = () => { const products: Product[] = [ { id: 1, name: 'Sepatu Running', price: 500000, isAvailable: true }, { id: 2, name: 'Sepatu Basket', price: 600000, isAvailable: false }, { id: 3, name: 'Sepatu Casual', price: 400000, isAvailable: true }, { id: 4, name: 'Sepatu Formal', price: 700000, isAvailable: false } ]; return ( <div> <h2>Daftar Produk</h2> <ul> {products.map((product) => ( <li key={product.id}> <h3>{product.name}</h3> <p>Harga: Rp {product.price}</p> {product.isAvailable ? ( <button>Tambah ke Keranjang</button> ) : ( <p style={{ color: 'red' }}>Stok Habis</p> )} </li> ))} </ul> </div> ); }; export default ProductList; Pada contoh di atas, kita menggunakan conditional rendering untuk menampilkan pesan "Stok Habis" jika isAvailable bernilai false. Jika isAvailable bernilai true, maka akan menampilkan tombol "Tambah ke Keranjang". Ini adalah cara dasar untuk menerapkan conditional rendering di dalam komponen berdasarkan kondisi stok produk. Menampilkan Komponen di Halaman Utama Untuk menampilkan komponen ini di halaman utama, buka file src/pages/index.tsx dan tambahkan komponen ProductList: import Head from 'next/head'; import Header from '../components/Header'; import ProductList from '../components/ProductList'; export default function Home() { return ( <div> <Head> <title>Toko Sepatu Online</title> <meta name="description" content="Belanja sepatu online dengan koleksi terbaru" /> </Head> <Header /> <ProductList /> </div> ); } Sekarang, ketika Anda membuka halaman utama, daftar produk akan ditampilkan dengan pesan khusus jika stok habis. Conditional Rendering Berdasarkan Kategori Produk Selanjutnya, kita akan menerapkan conditional rendering berdasarkan kategori produk yang dipilih oleh pengguna. Buat sebuah state untuk menyimpan kategori yang dipilih, dan tampilkan produk berdasarkan kategori tersebut. Modifikasi file ProductList.tsx untuk menambahkan fitur ini: import React, { useState } from 'react'; interface Product { id: number; name: string; price: number; category: string; isAvailable: boolean; } const ProductList: React.FC = () => { const [selectedCategory, setSelectedCategory] = useState<string>('All'); const products: Product[] = [ { id: 1, name: 'Sepatu Running', price: 500000, category: 'Olahraga', isAvailable: true }, { id: 2, name: 'Sepatu Basket', price: 600000, category: 'Olahraga', isAvailable: false }, { id: 3, name: 'Sepatu Casual', price: 400000, category: 'Casual', isAvailable: true }, { id: 4, name: 'Sepatu Formal', price: 700000, category: 'Formal', isAvailable: false } ]; const filteredProducts = selectedCategory === 'All' ? products : products.filter((product) => product.category === selectedCategory); return ( <div> <h2>Daftar Produk</h2> <div> <button onClick={() => setSelectedCategory('All')}>Semua</button> <button onClick={() => setSelectedCategory('Olahraga')}>Olahraga</button> <button onClick={() => setSelectedCategory('Casual')}>Casual</button> <button onClick={() => setSelectedCategory('Formal')}>Formal</button> </div> <ul> {filteredProducts.map((product) => ( <li key={product.id}> <h3>{product.name}</h3> <p>Harga: Rp {product.price}</p> {product.isAvailable ? ( <button>Tambah ke Keranjang</button> ) : ( <p style={{ color: 'red' }}>Stok Habis</p> )} </li> ))} </ul> </div> ); }; export default ProductList; Pada contoh ini, kita menambahkan tombol untuk memilih kategori produk (All, Olahraga, Casual, Formal). Berdasarkan kategori yang dipilih, daftar produk akan difilter menggunakan metode filter(). Hasil filter tersebut kemudian ditampilkan dengan conditional rendering yang sama untuk ketersediaan stok. Menyempurnakan Tampilan dengan Conditional Rendering Kita juga bisa menyempurnakan tampilan dengan menambahkan pesan khusus jika tidak ada produk yang sesuai dengan kategori yang dipilih. Modifikasi kode di dalam ProductList.tsx: import React, { useState } from 'react'; interface Product { id: number; name: string; price: number; category: string; isAvailable: boolean; } const ProductList: React.FC = () => { const [selectedCategory, setSelectedCategory] = useState<string>('All'); const products: Product[] = [ { id: 1, name: 'Sepatu Running', price: 500000, category: 'Olahraga', isAvailable: true }, { id: 2, name: 'Sepatu Basket', price: 600000, category: 'Olahraga', isAvailable: false }, { id: 3, name: 'Sepatu Casual', price: 400000, category: 'Casual', isAvailable: true }, { id: 4, name: 'Sepatu Formal', price: 700000, category: 'Formal', isAvailable: false } ]; const filteredProducts = selectedCategory === 'All' ? products : products.filter((product) => product.category === selectedCategory); return ( <div> <h2>Daftar Produk</h2> <div> <button onClick={() => setSelectedCategory('All')}>Semua</button> <button onClick={() => setSelectedCategory('Olahraga')}>Olahraga</button> <button onClick={() => setSelectedCategory('Casual')}>Casual</button> <button onClick={() => setSelectedCategory('Formal')}>Formal</button> </div> {filteredProducts.length > 0 ? ( <ul> {filteredProducts.map((product) => ( <li key={product.id}> <h3>{product.name}</h3> <p>Harga: Rp {product.price}</p> {product.isAvailable ? ( <button>Tambah ke Keranjang</button> ) : ( <p style={{ color: 'red' }}>Stok Habis</p> )} </li> ))} </ul> ) : ( <p>Tidak ada produk untuk kategori {selectedCategory}</p> )} </div> ); }; export default ProductList; Jika kategori yang dipilih tidak memiliki produk, akan muncul pesan "Tidak ada produk untuk kategori [kategori]". Dengan menggunakan conditional rendering, Anda dapat menampilkan elemen atau konten berdasarkan kondisi tertentu. Dalam contoh ini, kita menampilkan pesan khusus untuk stok habis dan memfilter produk berdasarkan kategori yang dipilih. Ini adalah teknik yang sangat bermanfaat untuk membuat tampilan aplikasi lebih dinamis dan interaktif, sesuai dengan kebutuhan pengguna dan data yang ada. 3 Kesalahan Utama Saat Membangun Website Menggunakan Komponen di Next.js App Router Dalam membangun website menggunakan Next.js dan fitur app router, ada beberapa kesalahan umum yang sering dilakukan oleh pengembang. Kesalahan ini dapat menyebabkan aplikasi tidak berjalan secara efisien atau menimbulkan bug yang sulit dilacak. Berikut adalah tiga kesalahan utama beserta solusi dan contoh koding lengkap untuk menghindarinya. 1. Tidak Memisahkan Logika Bisnis dari Komponen UI Kesalahan pertama adalah mencampuradukkan logika bisnis dengan tampilan (UI) dalam satu komponen. Ini membuat komponen menjadi sulit di-maintain dan di-reuse, serta mempersulit debugging di masa depan. Sebaiknya, pisahkan logika bisnis dari komponen UI agar komponen tetap sederhana. Contoh kesalahan: import React, { useState, useEffect } from 'react'; const ProductList = () => { const [products, setProducts] = useState([]); const [isLoading, setIsLoading] = useState(true); useEffect(() => { // Fetch data langsung di dalam komponen UI fetch('/api/products') .then((res) => res.json()) .then((data) => { setProducts(data); setIsLoading(false); }); }, []); return ( <div> {isLoading ? <p>Loading...</p> : products.map((product) => <p key={product.id}>{product.name}</p>)} </div> ); }; export default ProductList; Solusi: Pindahkan logika fetch data ke dalam fungsi terpisah atau gunakan custom hook. import React, { useState, useEffect } from 'react'; // Custom hook untuk fetching data const useProducts = () => { const [products, setProducts] = useState([]); const [isLoading, setIsLoading] = useState(true); useEffect(() => { fetch('/api/products') .then((res) => res.json()) .then((data) => { setProducts(data); setIsLoading(false); }); }, []); return { products, isLoading }; }; const ProductList = () => { const { products, isLoading } = useProducts(); return ( <div> {isLoading ? <p>Loading...</p> : products.map((product) => <p key={product.id}>{product.name}</p>)} </div> ); }; export default ProductList; 2. Tidak Menggunakan Key yang Unik saat Mapping Elemen Kesalahan kedua adalah tidak memberikan key yang unik saat melakukan rendering list dengan map(). Ini sering menyebabkan peringatan di console, dan bisa mengakibatkan bug rendering yang tidak terduga. Contoh kesalahan: const ProductList = ({ products }) => { return ( <ul> {products.map((product) => ( <li>{product.name}</li> // Tidak menggunakan key ))} </ul> ); }; Solusi: Pastikan setiap elemen dalam list memiliki key yang unik, misalnya menggunakan id dari data produk. const ProductList = ({ products }) => { return ( <ul> {products.map((product) => ( <li key={product.id}>{product.name}</li> // Menggunakan key yang unik ))} </ul> ); }; 3. Melakukan Fetch Data di Setiap Render Tanpa Mekanisme Caching Kesalahan ketiga adalah melakukan fetch data berulang-ulang setiap kali komponen dirender tanpa caching atau mekanisme pembatasan. Ini akan mengurangi performa aplikasi, terutama jika fetch data dilakukan dari API eksternal. Contoh kesalahan: const ProductList = () => { const [products, setProducts] = useState([]); useEffect(() => { fetch('/api/products') // Fetch data setiap kali komponen dirender .then((res) => res.json()) .then((data) => setProducts(data)); }, []); // Tidak ada caching }; Solusi: Gunakan mekanisme caching seperti useSWR untuk menghindari fetch data berulang kali. import useSWR from 'swr'; const fetcher = (url) => fetch(url).then((res) => res.json()); const ProductList = () => { const { data: products, error } = useSWR('/api/products', fetcher); if (error) return <p>Error loading data</p>; if (!products) return <p>Loading...</p>; return ( <ul> {products.map((product) => ( <li key={product.id}>{product.name}</li> ))} </ul> ); }; export default ProductList; Dengan menggunakan useSWR, data hanya akan di-fetch sekali dan disimpan di cache, sehingga performa aplikasi tetap optimal. Penutup Dengan memahami dan menghindari kesalahan-kesalahan umum dalam membangun website menggunakan komponen di Next.js, kita bisa menciptakan aplikasi yang lebih efisien dan mudah di-maintain. Jika Anda ingin meningkatkan kemampuan coding lebih lanjut dan belajar secara mendalam, Anda bisa belajar bersama mentor expert BuildWithAngga. Selain mendapatkan akses selamanya, Anda juga bisa membangun portfolio berkualitas, konsultasi langsung dengan mentor, dan mendapatkan beragam benefit menarik lainnya yang akan membantu Anda menjadi web developer profesional. Mari bergabung dan raih kesuksesan di dunia web development bersama BuildWithAngga!

Next.js adalah framework yang sangat populer di kalangan developer karena memberikan kemudahan dalam membangun aplikasi web modern. Di dalam Next.js, terdapat dua versi routing utama yang dikenal sebagai App Router dan Pages Router. Perbedaan mendasar dari keduanya terletak pada cara mereka mengatur dan mengelola SEO tags seperti title, meta description, dan meta tags lainnya. Pada Pages Router, struktur routing lebih tradisional di mana setiap halaman web diwakili oleh sebuah file di dalam folder pages. SEO diatur melalui file Head yang diimport di setiap file komponen, atau menggunakan next/head. Sedangkan App Router lebih fleksibel dan memberikan kontrol lebih pada developer dalam mengatur SEO. App Router memungkinkan kamu untuk lebih mudah menggunakan fitur-fitur canggih dari React dan Next.js, termasuk optimisasi SEO yang lebih granular dan dinamis. Meskipun keduanya memiliki pendekatan yang berbeda dalam mengelola halaman dan SEO, tujuan akhirnya tetap sama, yaitu memberikan pengalaman yang lebih optimal bagi pengguna dan meningkatkan performa website di mesin pencari. Pentingnya SEO dalam Next.js untuk Meningkatkan Peringkat Website Salah satu keunggulan besar menggunakan Next.js adalah kemampuannya dalam mendukung Server-Side Rendering (SSR), yang sangat membantu dalam meningkatkan SEO (Search Engine Optimization). SEO sangat penting karena dapat membantu website kamu muncul lebih tinggi di hasil pencarian Google dan mesin pencari lainnya, yang pada gilirannya dapat mendatangkan lebih banyak customer atau pengunjung secara online. Dengan SSR, Next.js memungkinkan halaman web untuk dirender di server terlebih dahulu sebelum dikirim ke browser pengguna. Hal ini memastikan bahwa search engine bots dapat mengindeks halaman dengan lebih efektif karena konten sudah siap di server, bukan hanya berupa kode JavaScript yang harus diinterpretasi di browser. Selain itu, kamu bisa memastikan bahwa metadata penting seperti title, description, dan open graph tags sudah tersedia sejak awal, yang akan membantu meningkatkan nilai SEO secara keseluruhan. Jadi, bagi para developer yang ingin membangun website dengan performa SEO yang lebih baik, Next.js adalah pilihan yang sangat kuat karena framework ini memang didesain untuk memberikan performa yang optimal dan pengalaman yang baik bagi pengguna dan search engine bots. Latihan Mengatur SEO pada Proyek Website Jual Mobil Online Pada artikel ini, kita akan berlatih mengatur SEO untuk sebuah proyek website jual mobil online menggunakan Next.js. Ini adalah langkah penting untuk mempersiapkan diri menjadi seorang frontend developer yang matang. Mengatur SEO dengan baik adalah salah satu keterampilan yang sangat berharga dalam dunia web development, terutama karena SEO dapat membantu website kamu lebih mudah ditemukan oleh calon pembeli di mesin pencari seperti Google. Dengan memanfaatkan kemampuan Server-Side Rendering (SSR) di Next.js, kita bisa memastikan bahwa website jual mobil kita dioptimalkan untuk SEO, sehingga mampu mendatangkan lebih banyak traffic organik secara online. Latihan ini akan membekali kamu dengan keterampilan praktis yang bisa langsung diterapkan pada proyek-proyek profesional lainnya, terutama untuk website yang memerlukan pengaturan SEO yang kuat agar dapat bersaing di dunia digital. Cara Menginstall Proyek Next.js 14 App Router Terbaru Sebelum memulai, pastikan kamu sudah menginstal Node.js di komputer kamu. Jika belum, kamu bisa download dan menginstalnya dari Node.js website. Setelah itu, kita akan menggunakan npx untuk membuat proyek Next.js dengan App Router terbaru. Berikut langkah-langkah lengkapnya: Buka terminal atau command prompt di komputer kamu.Jalankan perintah berikut untuk membuat proyek Next.js dengan App Router terbaru: npx create-next-app@latest my-car-shop --use-app-router Setelah perintah ini dijalankan, kamu akan diminta untuk memasukkan beberapa informasi seperti: Nama proyek: Kamu bisa menekan Enter untuk menggunakan nama default atau mengetik nama lain.Apakah kamu ingin menggunakan TypeScript: Pilih 'Yes' atau 'No' tergantung preferensi kamu.Apakah ingin menggunakan ESLint: Pilih 'Yes' jika kamu ingin menambahkan linting pada proyek.Apakah ingin menggunakan Tailwind CSS: Pilih 'Yes' atau 'No' tergantung kebutuhan proyek.Apakah ingin menggunakan src directory: Pilih 'Yes' atau 'No' tergantung struktur folder yang kamu inginkan.Apakah ingin mengkonfigurasi test setup: Pilih 'Yes' jika kamu ingin menambahkan testing.Apakah ingin menggunakan import alias: Pilih 'Yes' jika kamu ingin mengatur alias pada import file. Setelah semua pilihan dijawab, proses instalasi akan berjalan dan proyek Next.js kamu akan siap.Setelah proyek berhasil dibuat, masuk ke folder proyek dengan perintah: cd my-car-shop Untuk menjalankan proyek di server lokal, gunakan perintah berikut: npm run dev Buka browser dan akses proyek kamu di http://localhost:3000. Dengan langkah-langkah ini, kamu sudah berhasil menginstal Next.js 14 dengan App Router terbaru dan siap untuk memulai pengembangan proyek website jual mobil online. Cara Membuat Halaman page.tsx untuk Daftar Mobil dan Detail Mobil dengan Slug di Next.js Setelah berhasil menginstal proyek Next.js 14 dengan App Router, kita akan membuat halaman daftar mobil dan detail mobil menggunakan dummy data. Langkah ini akan menunjukkan cara menggunakan slug untuk mengakses detail setiap mobil. 1. Membuat Halaman Daftar Mobil di Folder cars Pertama, buat folder cars di dalam folder app untuk menyimpan halaman daftar mobil. Di dalam folder ini, kita akan membuat file page.tsx yang akan menampilkan semua mobil dari dummy data. Buat file page.tsx di folder app/cars dan tambahkan kode berikut: // app/cars/page.tsx import Link from 'next/link'; const cars = [ { id: 1, name: 'Toyota Avanza', slug: 'toyota-avanza', price: 150000000 }, { id: 2, name: 'Honda Civic', slug: 'honda-civic', price: 300000000 }, { id: 3, name: 'Suzuki Swift', slug: 'suzuki-swift', price: 200000000 }, ]; const CarsPage = () => { return ( <div> <h1>Daftar Mobil Dijual</h1> <ul> {cars.map((car) => ( <li key={car.id}> <Link href={`/cars/${car.slug}`}> {car.name} - Rp {car.price.toLocaleString()} </Link> </li> ))} </ul> </div> ); }; export default CarsPage; Pada kode di atas, kita membuat array cars yang berisi beberapa dummy data mobil dengan id, name, slug, dan price. Kemudian, kita menggunakan map() untuk menampilkan daftar mobil dan membuat link untuk setiap mobil yang akan menuju ke halaman detail berdasarkan slug. 2. Membuat Halaman Detail Mobil dengan Slug Selanjutnya, kita akan membuat halaman detail mobil yang bisa diakses menggunakan slug. Buat folder [slug] di dalam folder cars, lalu buat file page.tsx di dalam folder tersebut. Berikut adalah kode untuk menampilkan detail mobil berdasarkan slug: // app/cars/[slug]/page.tsx import { useParams } from 'next/navigation'; const cars = [ { id: 1, name: 'Toyota Avanza', slug: 'toyota-avanza', price: 150000000, description: 'Toyota Avanza adalah mobil keluarga yang sangat populer di Indonesia.' }, { id: 2, name: 'Honda Civic', slug: 'honda-civic', price: 300000000, description: 'Honda Civic menawarkan desain sporty dan performa mesin yang tangguh.' }, { id: 3, name: 'Suzuki Swift', slug: 'suzuki-swift', price: 200000000, description: 'Suzuki Swift adalah hatchback dengan desain compact dan efisiensi bahan bakar yang baik.' }, ]; const CarDetailPage = () => { const params = useParams(); const car = cars.find((car) => car.slug === params.slug); if (!car) { return <div>Mobil tidak ditemukan</div>; } return ( <div> <h1>{car.name}</h1> <p>Harga: Rp {car.price.toLocaleString()}</p> <p>{car.description}</p> </div> ); }; export default CarDetailPage; Di halaman ini, kita menggunakan useParams dari next/navigation untuk mengambil slug dari URL dan mencocokkannya dengan dummy data mobil. Jika slug ditemukan, kita akan menampilkan detail mobil, termasuk nama, harga, dan deskripsi. Jika tidak ditemukan, kita akan menampilkan pesan "Mobil tidak ditemukan". Dengan langkah ini, kamu sudah berhasil membuat dua halaman: satu untuk menampilkan daftar mobil, dan satu lagi untuk menampilkan detail mobil berdasarkan slug. Mengimplementasikan generateMetadata untuk Meningkatkan SEO di Halaman Cars dan Detail Car Dalam Next.js, kita dapat menggunakan fungsi generateMetadata untuk meningkatkan SEO dengan menambahkan meta tags seperti title, description, dan keywords secara dinamis. Ini sangat membantu dalam memberikan informasi yang relevan kepada mesin pencari dan dapat meningkatkan peringkat website. 1. Mengimplementasikan generateMetadata di Halaman Cars Untuk meningkatkan SEO di halaman daftar mobil, kita bisa menambahkan metadata seperti title dan description. Berikut adalah cara mengimplementasikan generateMetadata di file page.tsx pada folder cars: // app/cars/page.tsx import Link from 'next/link'; const cars = [ { id: 1, name: 'Toyota Avanza', slug: 'toyota-avanza', price: 150000000 }, { id: 2, name: 'Honda Civic', slug: 'honda-civic', price: 300000000 }, { id: 3, name: 'Suzuki Swift', slug: 'suzuki-swift', price: 200000000 }, ]; // Fungsi generateMetadata untuk meningkatkan SEO export async function generateMetadata() { return { title: 'Daftar Mobil Dijual - Jual Mobil Online', description: 'Temukan berbagai mobil bekas dan baru yang dijual dengan harga terbaik di website kami.', }; } const CarsPage = () => { return ( <div> <h1>Daftar Mobil Dijual</h1> <ul> {cars.map((car) => ( <li key={car.id}> <Link href={`/cars/${car.slug}`}> {car.name} - Rp {car.price.toLocaleString()} </Link> </li> ))} </ul> </div> ); }; export default CarsPage; Pada kode di atas, kita menambahkan fungsi generateMetadata yang mengembalikan objek metadata. title diatur untuk menampilkan judul halaman yang relevan, sedangkan description berisi deskripsi singkat yang dapat membantu mesin pencari memahami konten halaman. 2. Mengimplementasikan generateMetadata di Halaman Detail Mobil dengan Slug Untuk halaman detail mobil, kita bisa mengatur metadata yang dinamis berdasarkan slug mobil. Dengan cara ini, setiap mobil akan memiliki SEO yang unik dan relevan. Berikut adalah cara menambahkan generateMetadata pada file page.tsx di dalam folder [slug]: // app/cars/[slug]/page.tsx import { useParams } from 'next/navigation'; const cars = [ { id: 1, name: 'Toyota Avanza', slug: 'toyota-avanza', price: 150000000, description: 'Toyota Avanza adalah mobil keluarga yang sangat populer di Indonesia.' }, { id: 2, name: 'Honda Civic', slug: 'honda-civic', price: 300000000, description: 'Honda Civic menawarkan desain sporty dan performa mesin yang tangguh.' }, { id: 3, name: 'Suzuki Swift', slug: 'suzuki-swift', price: 200000000, description: 'Suzuki Swift adalah hatchback dengan desain compact dan efisiensi bahan bakar yang baik.' }, ]; // Fungsi generateMetadata untuk setiap mobil berdasarkan slug export async function generateMetadata({ params }) { const car = cars.find((car) => car.slug === params.slug); if (car) { return { title: `${car.name} - Jual Mobil Online`, description: `Beli ${car.name} dengan harga Rp ${car.price.toLocaleString()} hanya di website kami. ${car.description}`, }; } return { title: 'Mobil Tidak Ditemukan', description: 'Mobil yang Anda cari tidak tersedia di website kami.', }; } const CarDetailPage = () => { const params = useParams(); const car = cars.find((car) => car.slug === params.slug); if (!car) { return <div>Mobil tidak ditemukan</div>; } return ( <div> <h1>{car.name}</h1> <p>Harga: Rp {car.price.toLocaleString()}</p> <p>{car.description}</p> </div> ); }; export default CarDetailPage; Di halaman detail mobil, kita menggunakan parameter slug untuk menemukan data mobil dari array cars. Fungsi generateMetadata mengembalikan metadata yang unik untuk setiap mobil, seperti title dan description, berdasarkan informasi dari dummy data. Jika mobil tidak ditemukan, metadata akan diatur untuk menunjukkan bahwa mobil tersebut tidak ada. Dengan cara ini, setiap halaman detail mobil memiliki metadata yang relevan untuk SEO, sehingga membantu mesin pencari memberikan informasi yang lebih akurat dan meningkatkan peluang website ditemukan oleh calon pembeli. Tips Meningkatkan SEO Organik pada Proyek Next.js SEO organik sangat penting untuk meningkatkan visibilitas website di mesin pencari seperti Google tanpa menggunakan iklan berbayar. Berikut adalah tiga tips praktis yang bisa kamu terapkan pada proyek Next.js untuk meningkatkan SEO organik, dilengkapi dengan contoh koding yang relevan. 1. Menggunakan generateMetadata untuk Meta Tags Dinamis Mengoptimalkan meta tags seperti title, description, dan keywords pada setiap halaman website adalah salah satu cara terbaik untuk meningkatkan SEO organik. Dengan Next.js, kamu bisa menggunakan fungsi generateMetadata untuk membuat meta tags yang dinamis berdasarkan konten halaman. Ini membantu mesin pencari memahami konten halaman dengan lebih baik. Contoh kode: // app/products/[slug]/page.tsx import { useParams } from 'next/navigation'; const products = [ { id: 1, name: 'Laptop Gaming', slug: 'laptop-gaming', price: 15000000, description: 'Laptop Gaming dengan performa tinggi untuk bermain game.' }, { id: 2, name: 'Smartphone 5G', slug: 'smartphone-5g', price: 8000000, description: 'Smartphone dengan teknologi 5G terbaru dan kamera canggih.' }, ]; export async function generateMetadata({ params }) { const product = products.find((p) => p.slug === params.slug); if (product) { return { title: `${product.name} - Produk Terbaik`, description: `${product.name} dengan harga Rp ${product.price.toLocaleString()}. ${product.description}`, }; } return { title: 'Produk Tidak Ditemukan', description: 'Produk yang Anda cari tidak tersedia.', }; } const ProductDetail = () => { const params = useParams(); const product = products.find((p) => p.slug === params.slug); if (!product) { return <div>Produk tidak ditemukan</div>; } return ( <div> <h1>{product.name}</h1> <p>Harga: Rp {product.price.toLocaleString()}</p> <p>{product.description}</p> </div> ); }; export default ProductDetail; Dengan generateMetadata, setiap halaman produk memiliki meta tags yang spesifik dan relevan, yang akan membantu meningkatkan SEO untuk halaman tersebut. 2. Mengoptimalkan Penggunaan Heading Tags Penggunaan heading tags seperti <h1>, <h2>, dan seterusnya sangat penting untuk membantu mesin pencari memahami struktur konten website. Pastikan setiap halaman memiliki hanya satu <h1> tag yang menggambarkan konten utama, dan gunakan heading lain untuk mendukung struktur konten. Contoh kode: // app/about/page.tsx const AboutPage = () => { return ( <div> <h1>Tentang Kami</h1> <p>Kami adalah perusahaan teknologi yang menyediakan produk-produk terbaik untuk kebutuhan Anda.</p> <h2>Misi Kami</h2> <p>Misi kami adalah memberikan produk berkualitas tinggi dengan layanan terbaik kepada pelanggan kami.</p> <h2>Visi Kami</h2> <p>Visi kami adalah menjadi pemimpin dalam inovasi teknologi dan solusi digital di pasar global.</p> </div> ); }; export default AboutPage; Dengan struktur heading yang jelas dan konsisten, konten website lebih mudah diindeks oleh mesin pencari, yang dapat meningkatkan SEO organik. 3. Menyediakan Sitemap untuk Mempermudah Indeksasi Sitemap adalah file XML yang memberikan informasi kepada mesin pencari tentang halaman-halaman penting di website. Dengan Next.js, kamu bisa membuat sitemap secara otomatis untuk membantu meningkatkan indeksasi konten oleh mesin pencari, yang pada akhirnya meningkatkan SEO organik. Contoh kode untuk membuat sitemap di Next.js: // pages/sitemap.xml.tsx import { GetServerSideProps } from 'next'; import { format } from 'date-fns'; const Sitemap = () => null; export const getServerSideProps: GetServerSideProps = async ({ res }) => { const baseUrl = '<https://yourwebsite.com>'; const today = format(new Date(), 'yyyy-MM-dd'); const staticPages = [ `${baseUrl}/`, `${baseUrl}/about`, `${baseUrl}/products`, ]; const sitemap = `<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="<http://www.sitemaps.org/schemas/sitemap/0.9>"> ${staticPages .map((url) => { return ` <url> <loc>${url}</loc> <lastmod>${today}</lastmod> </url> `; }) .join('')} </urlset>`; res.setHeader('Content-Type', 'text/xml'); res.write(sitemap); res.end(); return { props: {}, }; }; export default Sitemap; Dengan menyediakan sitemap, kamu memberi petunjuk kepada mesin pencari tentang halaman mana yang harus diindeks, yang dapat mempercepat proses indeksasi dan membantu SEO organik. Kesalahan Utama Ketika Memelihara SEO pada Proyek Next.js Memelihara SEO pada proyek Next.js membutuhkan perhatian khusus untuk memastikan bahwa mesin pencari dapat mengindeks dan menampilkan konten dengan baik. Namun, ada beberapa kesalahan umum yang sering dilakukan, yang dapat mengurangi efektivitas SEO. Berikut adalah tiga kesalahan utama yang harus dihindari, dilengkapi dengan contoh koding lengkap. 1. Tidak Menggunakan Meta Tags Dinamis Salah satu kesalahan terbesar adalah tidak memanfaatkan meta tags dinamis pada halaman yang berbeda. Meta tags seperti title, description, dan keywords sangat penting untuk SEO. Jika semua halaman menggunakan meta tags yang sama, maka mesin pencari tidak dapat memahami perbedaan konten antara satu halaman dengan yang lainnya. Contoh kesalahan: // app/products/page.tsx export default function ProductsPage() { return ( <div> <h1>Daftar Produk</h1> <p>Temukan berbagai produk di toko kami.</p> </div> ); } // Tidak ada meta tags dinamis untuk mengoptimalkan SEO di halaman ini. Contoh perbaikan: // app/products/page.tsx export async function generateMetadata() { return { title: 'Daftar Produk - Toko Online Terbaik', description: 'Jelajahi koleksi produk terbaru dan terbaik hanya di toko online kami.', }; } export default function ProductsPage() { return ( <div> <h1>Daftar Produk</h1> <p>Temukan berbagai produk di toko kami.</p> </div> ); } Dengan menggunakan generateMetadata, setiap halaman memiliki meta tags yang unik dan relevan, yang membantu mesin pencari mengindeks konten secara lebih baik. 2. Tidak Mengoptimalkan Struktur Heading Kesalahan lain yang sering dilakukan adalah menggunakan struktur heading (<h1>, <h2>, dll.) secara sembarangan. Setiap halaman harus memiliki satu <h1> tag yang menggambarkan konten utama, dan heading lainnya digunakan untuk mendukung struktur konten. Penggunaan heading yang berlebihan atau tidak konsisten dapat membingungkan mesin pencari. Contoh kesalahan: // app/about/page.tsx export default function AboutPage() { return ( <div> <h2>Tentang Kami</h2> <p>Kami menyediakan berbagai produk berkualitas tinggi.</p> <h2>Misi Kami</h2> <p>Memberikan layanan terbaik kepada pelanggan.</p> </div> ); } // Tidak ada penggunaan <h1>, dan <h2> digunakan lebih dari satu kali di satu level konten. Contoh perbaikan: // app/about/page.tsx export default function AboutPage() { return ( <div> <h1>Tentang Kami</h1> <p>Kami menyediakan berbagai produk berkualitas tinggi.</p> <h2>Misi Kami</h2> <p>Memberikan layanan terbaik kepada pelanggan.</p> </div> ); } Dengan menempatkan <h1> pada judul utama dan menggunakan <h2> secara tepat untuk subjudul, struktur halaman lebih mudah dipahami oleh mesin pencari. 3. Tidak Menyediakan Tautan Internal yang Relevan Kesalahan lain yang sering terjadi adalah mengabaikan penggunaan tautan internal. Tautan internal membantu mesin pencari untuk menjelajahi dan mengindeks seluruh halaman website dengan lebih baik. Menggunakan tautan internal yang relevan juga dapat meningkatkan pengalaman pengguna dengan memudahkan navigasi antarhalaman. Contoh kesalahan: // app/home/page.tsx export default function HomePage() { return ( <div> <h1>Selamat Datang di Toko Kami</h1> <p>Kami menyediakan berbagai macam produk berkualitas tinggi.</p> </div> ); } // Tidak ada tautan internal yang membantu pengguna menjelajahi halaman lain. Contoh perbaikan: // app/home/page.tsx import Link from 'next/link'; export default function HomePage() { return ( <div> <h1>Selamat Datang di Toko Kami</h1> <p>Kami menyediakan berbagai macam produk berkualitas tinggi.</p> <Link href="/products">Lihat Daftar Produk</Link> </div> ); } Dengan menambahkan tautan internal, mesin pencari lebih mudah menavigasi situs dan mengindeks halaman-halaman lain yang relevan. Tautan ini juga meningkatkan interaksi pengguna di website. Penutup Dengan memahami dan menerapkan cara-cara untuk meningkatkan SEO pada proyek Next.js, kamu sudah berada di jalur yang tepat untuk membangun website yang lebih mudah ditemukan di mesin pencari dan mendatangkan lebih banyak pengunjung secara organik. Namun, perjalanan belajar tidak berhenti di sini. Kamu bisa terus mengembangkan kemampuanmu dengan bergabung di BuildWithAngga. Di BuildWithAngga, kamu bisa belajar bersama mentor expert yang akan membantu kamu memahami lebih dalam tentang web development dan SEO. Selain itu, kamu akan mendapatkan banyak benefit, seperti akses selamanya ke materi pembelajaran, portfolio berkualitas yang siap memukau calon klien atau perusahaan, konsultasi langsung dengan mentor untuk mengatasi masalah teknis, serta benefit menarik lainnya yang akan mempercepat proses belajar kamu. Mari tingkatkan kemampuan coding dan wujudkan impianmu bersama BuildWithAngga!

Routing merupakan salah satu komponen penting dalam setiap projek website. Dengan routing yang baik, pengguna dapat mengakses halaman-halaman di dalam website dengan lebih mudah, memberikan pengalaman yang nyaman dan responsif. Routing yang tertata dengan baik juga membantu developer dalam mengelola navigasi antar halaman, sehingga setiap bagian dari website bisa diakses secara efisien. Pentingnya routing membuat developer harus memilih dan menerapkan metode routing yang sesuai dengan kebutuhan projek web development mereka. Next.js hadir sebagai salah satu framework JavaScript modern yang sangat populer dan mendukung konsep file-based routing. Ini berarti setiap file yang diletakkan di dalam folder tertentu secara otomatis menjadi rute yang bisa diakses pada URL. Dalam Next.js 14, ada dua konsep utama terkait routing yang perlu dipahami, yaitu App Router dan Pages Router. Kedua konsep ini memiliki tujuan yang sama, yaitu mengelola navigasi halaman, namun dengan cara kerja yang berbeda. Pada artikel ini, kita akan membahas secara singkat mengenai perbedaan kedua jenis router tersebut untuk membantu pemula memahami bagaimana mereka bekerja di dalam Next.js 14. Apa Itu App Router di Next.js? App Router di Next.js adalah pendekatan modern untuk pengelolaan routing yang diperkenalkan mulai dari Next.js 13 dan semakin dikembangkan di versi Next.js 14. Tidak seperti Pages Router yang menggunakan folder pages, App Router bekerja dengan folder app, di mana setiap file di dalamnya secara otomatis menjadi rute di aplikasi. Konsep ini menawarkan pendekatan yang lebih fleksibel dan modular dalam pengelolaan rute, serta mendukung fitur-fitur canggih seperti React Server Components dan nested routing. Berikut contoh bagaimana cara membuat beberapa rute dengan App Router: // app/page.tsx import React from 'react'; const HomePage = () => { return ( <div> <h1>Selamat Datang di Home Page</h1> <p>Ini adalah halaman utama menggunakan App Router di Next.js 14.</p> </div> ); } export default HomePage; Pada contoh di atas, file page.tsx yang berada di folder app secara otomatis menjadi halaman utama yang diakses melalui rute /. Ini menunjukkan betapa mudahnya membuat rute di App Router tanpa perlu konfigurasi yang rumit. Jika Anda ingin membuat halaman lain seperti halaman "Tentang", cukup tambahkan file baru: // app/about/page.tsx import React from 'react'; const AboutPage = () => { return ( <div> <h1>Halaman Tentang</h1> <p>Ini adalah halaman tentang menggunakan App Router di Next.js 14.</p> </div> ); } export default AboutPage; Dengan struktur ini, halaman About akan dapat diakses melalui /about tanpa tambahan konfigurasi apa pun. Anda juga bisa membuat subrute dengan struktur file yang lebih dalam. Misalnya, untuk halaman produk dengan subrute: // app/products/[id]/page.tsx import React from 'react'; const ProductDetail = ({ params }: { params: { id: string } }) => { return ( <div> <h1>Detail Produk {params.id}</h1> <p>Informasi produk dengan ID {params.id}.</p> </div> ); } export default ProductDetail; File di atas akan menghasilkan rute dinamis untuk halaman detail produk yang dapat diakses melalui /products/[id], di mana [id] adalah parameter dinamis. Misalnya, jika Anda ingin melihat produk dengan ID 123, Anda dapat mengakses /products/123. Beberapa keuntungan lain menggunakan App Router di Next.js 14 adalah: Modular dan Terorganisir: Struktur rute lebih rapi dengan memisahkan file berdasarkan fungsinya. Contohnya, logika untuk data fetching dapat dipisah ke dalam komponen server, sedangkan UI klien tetap di komponen klien.Optimisasi Performa: Dengan React Server Components, bagian tertentu dari halaman bisa dirender di server dan dikirim ke klien, mengurangi waktu loading di browser.Nested Routes: Mendukung pembuatan rute bertingkat (nested routes), yang sangat membantu ketika membuat struktur halaman yang kompleks seperti aplikasi e-commerce dengan halaman produk, ulasan, dan kategori. Dengan semua fitur yang ditawarkan, App Router cocok digunakan dalam proyek yang membutuhkan pengelolaan rute yang lebih kompleks dan performa tinggi. Perbandingan App Router vs Pages Router di Next.js 14 KriteriaApp RouterPages RouterFlexibilitySangat fleksibel, mendukung React Server Components dan nested routing. Misalnya, jika Anda memiliki halaman produk dengan subhalaman untuk ulasan dan detail produk, App Router memungkinkan Anda membuat struktur seperti /product/[id]/reviews dan /product/[id]/details dengan mudah.Fleksibilitas lebih terbatas, namun tetap mendukung kebutuhan routing sederhana seperti /about atau /contact. Misalnya, aplikasi portofolio atau landing page dapat dikelola dengan mudah menggunakan Pages Router.Folder StructureMenggunakan folder app, setiap file atau folder di dalamnya otomatis menjadi rute. Sebagai contoh, app/blog/page.tsx akan menjadi /blog di URL. Folder terstruktur dengan baik, memungkinkan pemisahan logika server dan klien secara terorganisir.Menggunakan folder pages, di mana setiap file di dalamnya langsung menjadi rute. Misalnya, file pages/about.js akan otomatis menjadi /about. Struktur ini lebih sederhana, memudahkan developer untuk melihat secara langsung rute yang tersedia dalam aplikasi.Use Case ScenarioCocok untuk aplikasi dengan rute kompleks, seperti aplikasi e-commerce atau sistem manajemen yang memiliki banyak halaman dinamis, termasuk integrasi SSR dan SSG untuk optimasi performa.Cocok untuk aplikasi kecil hingga menengah, seperti blog sederhana, portofolio, atau aplikasi satu halaman (SPA) yang tidak memerlukan struktur rute yang kompleks atau fitur SSR yang rumit. Dengan App Router, Anda mendapatkan kontrol yang lebih baik dalam hal pembagian komponen server dan klien, sedangkan Pages Router lebih cocok untuk aplikasi yang membutuhkan setup cepat dengan rute yang sederhana. Contoh Struktur Folder Lengkap: App Router vs Pages Router Berikut adalah contoh struktur folder lengkap untuk App Router dan Pages Router di Next.js agar lebih jelas bagaimana kedua pendekatan ini diimplementasikan dalam proyek. Struktur Folder: App Router Pada App Router, semua file rute diletakkan di dalam folder app. Setiap file atau folder di dalamnya secara otomatis menjadi rute sesuai dengan struktur folder tersebut. my-next-app/ ├── app/ │ ├── layout.tsx // Layout utama untuk semua halaman │ ├── page.tsx // Halaman utama (rute "/") │ ├── about/ │ │ └── page.tsx // Halaman tentang (rute "/about") │ ├── products/ │ │ ├── page.tsx // Halaman produk (rute "/products") │ │ └── [id]/ │ │ └── page.tsx // Halaman detail produk dengan ID dinamis (rute "/products/[id]") │ ├── blog/ │ │ ├── layout.tsx // Layout khusus untuk semua halaman blog │ │ ├── page.tsx // Halaman utama blog (rute "/blog") │ │ └── [slug]/ │ │ └── page.tsx // Halaman artikel blog dinamis (rute "/blog/[slug]") ├── public/ │ └── favicon.ico // Ikon situs ├── styles/ │ └── globals.css // CSS global └── next.config.js // Konfigurasi Next.js Pada struktur di atas: File layout.tsx digunakan untuk mendefinisikan layout yang bisa digunakan di seluruh halaman dalam app.Folder dinamis menggunakan tanda kurung seperti [id] dan [slug] untuk mendukung rute dinamis.Setiap halaman, seperti about/page.tsx, secara otomatis diakses melalui URL yang sesuai dengan struktur foldernya. Struktur Folder: Pages Router Untuk Pages Router, semua file rute diletakkan di dalam folder pages. Setiap file di dalam folder ini menjadi rute otomatis berdasarkan nama file atau folder tersebut. my-next-app/ ├── pages/ │ ├── index.js // Halaman utama (rute "/") │ ├── about.js // Halaman tentang (rute "/about") │ ├── products/ │ │ └── index.js // Halaman produk (rute "/products") │ ├── products/ │ │ └── [id].js // Halaman detail produk dengan ID dinamis (rute "/products/[id]") │ ├── blog/ │ │ ├── index.js // Halaman utama blog (rute "/blog") │ │ └── [slug].js // Halaman artikel blog dinamis (rute "/blog/[slug]") ├── public/ │ └── favicon.ico // Ikon situs ├── styles/ │ └── globals.css // CSS global └── next.config.js // Konfigurasi Next.js Pada struktur di atas: File index.js di dalam pages menjadi halaman utama yang dapat diakses melalui /.Rute dinamis ditangani dengan file [id].js atau [slug].js, mirip dengan App Router.Tidak ada layout terpisah seperti di App Router, sehingga struktur ini lebih sederhana dan langsung. Fitur Segments di App Router Next.js Segments dalam App Router di Next.js adalah bagian dari URL yang dipisahkan oleh garis miring /. Setiap segmen ini dapat berupa rute statis atau dinamis. Dalam App Router, Anda dapat memanfaatkan segmen untuk membagi dan mengatur rute menjadi lebih modular dan fleksibel, termasuk dukungan untuk rute dinamis, parameter opsional, dan pengelompokan. Berikut beberapa konsep segmen yang bisa diterapkan di App Router: Static Segment: Rute statis seperti /products atau /about.Dynamic Segment: Rute dengan parameter dinamis seperti /products/[id].Optional Segment: Segmen opsional yang mungkin ada atau tidak dalam URL.Parallel Routes: Menangani beberapa segmen yang dapat muncul secara paralel. Contoh Penerapan Segments di App Router Kita akan melihat contoh bagaimana segmen bekerja di App Router dengan mengimplementasikan rute untuk produk dengan ID dinamis dan kategori opsional. Struktur Folder: app/ ├── products/ │ ├── [id]/ │ │ ├── page.tsx // Halaman detail produk │ │ └── [category]/ │ └── page.tsx // Halaman produk dengan kategori opsional Rute Dinamis (Dynamic Segment) untuk Produk Berdasarkan ID: // app/products/[id]/page.tsx import React from 'react'; const ProductDetail = ({ params }: { params: { id: string } }) => { return ( <div> <h1>Detail Produk {params.id}</h1> <p>Informasi lengkap tentang produk dengan ID {params.id}.</p> </div> ); } export default ProductDetail; Pada contoh ini, segmen [id] digunakan untuk menangani rute dinamis. Ketika pengguna mengakses /products/123, halaman ini akan menampilkan informasi produk dengan ID 123. Segmen dinamis [id] memungkinkan rute ini menangani berbagai nilai ID tanpa membuat rute statis untuk setiap produk. Segmen Opsional (Optional Segment) untuk Kategori: // app/products/[id]/[category]/page.tsx import React from 'react'; const ProductCategory = ({ params }: { params: { id: string; category?: string } }) => { return ( <div> <h1>Produk {params.id}</h1> {params.category ? ( <p>Kategori: {params.category}</p> ) : ( <p>Produk ini tidak memiliki kategori khusus.</p> )} </div> ); } export default ProductCategory; Di sini, kita menambahkan segmen [category] di dalam rute [id] untuk menangani kategori produk yang mungkin opsional. Ketika pengguna mengakses /products/123/electronics, kategori electronics akan ditampilkan. Namun, jika hanya mengakses /products/123, maka produk akan tetap ditampilkan tanpa kategori, dan pesan default akan diberikan. Kesimpulan Static Segment digunakan untuk rute yang selalu sama, seperti /products atau /about.Dynamic Segment memungkinkan Anda menangani berbagai nilai, seperti ID produk atau nama kategori, tanpa membuat rute statis untuk setiap variasi.Optional Segment digunakan untuk menangani bagian URL yang mungkin ada atau tidak, sehingga Anda bisa membuat rute yang lebih fleksibel. Dengan fitur segments di App Router, Anda dapat membangun rute yang lebih dinamis dan modular, mengurangi kompleksitas dalam menangani URL yang bervariasi dalam aplikasi Anda. Apa Itu Dynamic Routes? Dynamic routes adalah rute yang memungkinkan URL untuk menangani parameter dinamis. Contohnya, dalam sebuah aplikasi e-commerce, halaman detail produk mungkin perlu menangani URL seperti /products/123, di mana 123 adalah ID dari produk tersebut. Dengan dynamic routes, Anda dapat membuat satu rute yang menangani berbagai nilai dinamis, seperti ID atau slug produk, tanpa perlu membuat rute terpisah untuk setiap produk. Dynamic routes sangat berguna ketika Anda memiliki data yang bervariasi, seperti postingan blog, produk, atau pengguna, yang diakses melalui URL dinamis. Dynamic Routes di App Router Dalam App Router di Next.js, dynamic routes diimplementasikan dengan membuat folder yang menggunakan tanda kurung ([ ]) di sekitar nama parameter dinamis. Misalnya, jika Anda ingin membuat rute dinamis untuk detail produk berdasarkan ID, Anda bisa membuat folder [id]. Berikut adalah contoh implementasi dynamic routes di App Router: // app/products/[id]/page.tsx import React from 'react'; const ProductDetail = ({ params }: { params: { id: string } }) => { return ( <div> <h1>Detail Produk {params.id}</h1> <p>Ini adalah informasi produk dengan ID {params.id}.</p> </div> ); } export default ProductDetail; Pada contoh di atas: Folder products berisi folder dinamis [id].File page.tsx di dalam folder [id] akan menangani URL seperti /products/123, di mana 123 adalah nilai dinamis untuk ID produk.Parameter dinamis id diakses melalui properti params, yang secara otomatis diteruskan ke komponen oleh Next.js. Anda dapat menambahkan rute dinamis tambahan dengan struktur folder yang lebih dalam, seperti /products/[id]/reviews, menggunakan folder dinamis lainnya seperti [id] di dalam products. Dynamic Routes di Pages Router Dalam Pages Router, dynamic routes juga diimplementasikan dengan membuat file menggunakan tanda kurung ([ ]). Namun, daripada menggunakan folder, Anda akan membuat file dengan nama parameter dinamis di dalam folder pages. Berikut adalah contoh implementasi dynamic routes di Pages Router: // pages/products/[id].js import React from 'react'; import { useRouter } from 'next/router'; const ProductDetail = () => { const router = useRouter(); const { id } = router.query; return ( <div> <h1>Detail Produk {id}</h1> <p>Ini adalah informasi produk dengan ID {id}.</p> </div> ); } export default ProductDetail; Pada contoh di atas: File [id].js di dalam folder products menangani rute dinamis untuk produk berdasarkan ID, seperti /products/123.Untuk mendapatkan nilai dinamis dari URL, digunakan hook useRouter dari Next.js. router.query.id memberikan akses ke parameter id dari URL. Dynamic routes di Pages Router bekerja mirip dengan App Router, tetapi perbedaannya terletak pada struktur folder dan cara pengambilan parameter dari URL (menggunakan useRouter() di Pages Router). Apa Itu Nested Routing? Nested routing adalah konsep di mana satu rute dapat memiliki rute anak atau subrute yang terkait. Ini berarti bahwa di dalam satu halaman atau komponen, Anda bisa memiliki beberapa bagian atau halaman lain yang diakses sebagai subrute. Nested routing sangat bermanfaat untuk aplikasi yang memiliki struktur hierarkis atau rute yang lebih kompleks, seperti aplikasi e-commerce dengan halaman produk yang memiliki tab untuk ulasan, detail, dan spesifikasi produk. Nested Routing di App Router Dalam App Router di Next.js, nested routing diimplementasikan dengan menggunakan folder bertingkat di dalam folder app. Struktur folder ini mencerminkan bagaimana rute dan subrute akan muncul di URL. Setiap folder mewakili bagian dari rute, sehingga Anda bisa dengan mudah membuat rute bertingkat. Berikut contoh implementasi nested routing di App Router: // app/products/[id]/layout.tsx import React from 'react'; const ProductLayout = ({ children }: { children: React.ReactNode }) => { return ( <div> <h1>Halaman Produk</h1> <div>{children}</div> {/* Subrute akan di-render di sini */} </div> ); } export default ProductLayout; // app/products/[id]/page.tsx import React from 'react'; const ProductDetail = ({ params }: { params: { id: string } }) => { return ( <div> <h2>Detail Produk {params.id}</h2> <p>Informasi detail tentang produk dengan ID {params.id}.</p> </div> ); } export default ProductDetail; // app/products/[id]/reviews/page.tsx import React from 'react'; const ProductReviews = ({ params }: { params: { id: string } }) => { return ( <div> <h2>Ulasan Produk {params.id}</h2> <p>Berikut adalah ulasan untuk produk dengan ID {params.id}.</p> </div> ); } export default ProductReviews; Pada struktur ini: Folder products/[id] memiliki file layout.tsx yang bertindak sebagai layout untuk semua halaman terkait produk. Komponen children di layout ini akan menampilkan halaman yang lebih spesifik seperti detail atau ulasan produk.File page.tsx di dalam folder [id] menangani rute utama produk, misalnya /products/123.Folder reviews di dalam [id] membuat rute tambahan, sehingga rute /products/123/reviews menampilkan halaman ulasan produk. Komponen ini di-render di dalam children pada ProductLayout. Dengan nested routing, Anda bisa mengatur struktur halaman yang lebih kompleks, seperti /products/123, /products/123/reviews, atau /products/123/specifications. Nested Routing di Pages Router Dalam Pages Router, nested routing juga bisa diterapkan dengan struktur folder bertingkat. Meskipun Pages Router tidak memiliki konsep layout bawaan seperti App Router, Anda bisa menggunakan komponen React biasa untuk menangani layout dan navigasi antar subhalaman. Berikut adalah contoh implementasi nested routing di Pages Router: // pages/products/[id].js import React from 'react'; import Link from 'next/link'; const ProductDetail = ({ id }) => { return ( <div> <h2>Detail Produk {id}</h2> <p>Informasi tentang produk dengan ID {id}.</p> <nav> <Link href={`/products/${id}/reviews`}>Lihat Ulasan</Link> </nav> </div> ); } export async function getServerSideProps(context) { const { id } = context.params; return { props: { id }, }; } export default ProductDetail; // pages/products/[id]/reviews.js import React from 'react'; const ProductReviews = ({ id }) => { return ( <div> <h2>Ulasan Produk {id}</h2> <p>Berikut adalah ulasan untuk produk dengan ID {id}.</p> </div> ); } export async function getServerSideProps(context) { const { id } = context.params; return { props: { id }, }; } export default ProductReviews; Pada struktur ini: File [id].js di dalam folder products menangani halaman detail produk pada rute /products/[id].Folder products/[id] berisi file reviews.js, yang menjadi subrute untuk menampilkan ulasan produk dengan rute /products/[id]/reviews.Navigasi antar subrute dilakukan melalui komponen Link di halaman utama produk. Perbedaan utamanya adalah dalam Pages Router, layout atau tampilan halaman biasanya dibuat di dalam setiap file, sedangkan di App Router, layout bisa dipisah dengan lebih modular menggunakan file layout.tsx. Kesimpulan App Router mendukung nested routing secara lebih modular dengan layout.tsx yang memungkinkan subrute di-render dalam komponen layout yang sama, sehingga lebih cocok untuk aplikasi dengan struktur rute yang kompleks.Pages Router menggunakan struktur folder yang serupa untuk nested routing, tetapi tidak memiliki fitur layout bawaan, sehingga perlu menggunakan komponen React biasa untuk mengelola tampilan antar halaman. Latihan Menerapkan App Router pada Proyek Simple E-commerce: CRUD Products dan Transaction Pada latihan ini, kita akan mencoba menerapkan App Router di Next.js untuk membangun proyek e-commerce sederhana dengan fitur CRUD untuk produk dan transaksi. Dengan menggunakan App Router, kita dapat memanfaatkan routing yang fleksibel dan modular, yang sangat cocok untuk aplikasi seperti e-commerce. Proyek ini akan terdiri dari dua bagian utama: manajemen produk (CRUD) dan transaksi. Membuat CRUD Products Untuk memulai, kita akan membuat rute untuk menampilkan daftar produk, menambahkan produk baru, mengedit produk, dan menghapus produk. Setiap rute ini akan dikelola oleh App Router di dalam folder app. Struktur Folder: app/ ├── products/ │ ├── page.tsx // Menampilkan daftar produk │ ├── create/ │ │ └── page.tsx // Menambahkan produk baru │ └── [id]/ │ ├── page.tsx // Menampilkan detail produk │ └── edit/ │ └── page.tsx // Mengedit produk Menampilkan Daftar Produk: // app/products/page.tsx import React from 'react'; const ProductsPage = () => { const products = [ { id: 1, name: 'Produk A', price: 10000 }, { id: 2, name: 'Produk B', price: 20000 }, ]; return ( <div> <h1>Daftar Produk</h1> <ul> {products.map((product) => ( <li key={product.id}> {product.name} - Rp {product.price} <a href={`/products/${product.id}`}>Detail</a> <a href={`/products/${product.id}/edit`}>Edit</a> </li> ))} </ul> <a href="/products/create">Tambah Produk Baru</a> </div> ); }; export default ProductsPage; Di halaman ini, kita menampilkan daftar produk beserta tautan untuk melihat detail produk atau mengedit produk. Menambahkan Produk Baru: // app/products/create/page.tsx import React, { useState } from 'react'; const CreateProductPage = () => { const [name, setName] = useState(''); const [price, setPrice] = useState(''); const handleSubmit = (e) => { e.preventDefault(); console.log({ name, price }); // Di sini bisa ditambahkan logika untuk menyimpan data }; return ( <div> <h1>Tambah Produk Baru</h1> <form onSubmit={handleSubmit}> <input type="text" placeholder="Nama Produk" value={name} onChange={(e) => setName(e.target.value)} /> <input type="number" placeholder="Harga Produk" value={price} onChange={(e) => setPrice(e.target.value)} /> <button type="submit">Simpan</button> </form> </div> ); }; export default CreateProductPage; Form ini memungkinkan pengguna untuk menambahkan produk baru ke dalam daftar. Anda bisa memperluas logika dengan menambahkan API untuk menyimpan data ke database. Mengedit Produk: // app/products/[id]/edit/page.tsx import React, { useState } from 'react'; const EditProductPage = ({ params }: { params: { id: string } }) => { const [name, setName] = useState('Produk A'); // Nilai awal bisa diambil dari API const [price, setPrice] = useState(10000); // Nilai awal bisa diambil dari API const handleSubmit = (e) => { e.preventDefault(); console.log({ id: params.id, name, price }); // Di sini bisa ditambahkan logika untuk mengupdate data }; return ( <div> <h1>Edit Produk {params.id}</h1> <form onSubmit={handleSubmit}> <input type="text" value={name} onChange={(e) => setName(e.target.value)} /> <input type="number" value={price} onChange={(e) => setPrice(e.target.value)} /> <button type="submit">Simpan Perubahan</button> </form> </div> ); }; export default EditProductPage; Halaman ini memungkinkan pengguna untuk mengedit produk berdasarkan ID produk. Anda bisa menggunakan API untuk mengambil dan mengupdate data produk. Membuat CRUD Transactions Selanjutnya, kita akan menambahkan rute untuk transaksi yang mengikuti pola serupa seperti manajemen produk. Struktur Folder: app/ ├── transactions/ │ ├── page.tsx // Menampilkan daftar transaksi │ ├── create/ │ │ └── page.tsx // Menambahkan transaksi baru │ └── [id]/ │ ├── page.tsx // Menampilkan detail transaksi │ └── edit/ │ └── page.tsx // Mengedit transaksi Menampilkan Daftar Transaksi: // app/transactions/page.tsx import React from 'react'; const TransactionsPage = () => { const transactions = [ { id: 1, product: 'Produk A', total: 2, amount: 20000 }, { id: 2, product: 'Produk B', total: 1, amount: 20000 }, ]; return ( <div> <h1>Daftar Transaksi</h1> <ul> {transactions.map((transaction) => ( <li key={transaction.id}> {transaction.product} - {transaction.total} item - Rp {transaction.amount} <a href={`/transactions/${transaction.id}`}>Detail</a> <a href={`/transactions/${transaction.id}/edit`}>Edit</a> </li> ))} </ul> <a href="/transactions/create">Tambah Transaksi Baru</a> </div> ); }; export default TransactionsPage; Halaman ini menampilkan daftar transaksi, dan menyediakan tautan untuk melihat detail transaksi atau mengeditnya. Menambahkan Transaksi Baru: // app/transactions/create/page.tsx import React, { useState } from 'react'; const CreateTransactionPage = () => { const [product, setProduct] = useState(''); const [total, setTotal] = useState(''); const [amount, setAmount] = useState(''); const handleSubmit = (e) => { e.preventDefault(); console.log({ product, total, amount }); // Di sini bisa ditambahkan logika untuk menyimpan data transaksi }; return ( <div> <h1>Tambah Transaksi Baru</h1> <form onSubmit={handleSubmit}> <input type="text" placeholder="Produk" value={product} onChange={(e) => setProduct(e.target.value)} /> <input type="number" placeholder="Jumlah" value={total} onChange={(e) => setTotal(e.target.value)} /> <input type="number" placeholder="Total Harga" value={amount} onChange={(e) => setAmount(e.target.value)} /> <button type="submit">Simpan</button> </form> </div> ); }; export default CreateTransactionPage; Form ini memungkinkan pengguna untuk menambahkan transaksi baru dengan memasukkan produk, jumlah, dan harga total. Dengan menggunakan App Router, Anda dapat mengelola rute secara modular, memisahkan setiap fitur (produk dan transaksi) menjadi halaman dan subrute yang terstruktur dengan baik. Contoh Kesalahan Saat Mengerjakan Routing pada Proyek Next.js Berikut adalah tiga contoh kesalahan umum yang sering terjadi ketika mengerjakan routing pada proyek Next.js, beserta contoh koding lengkapnya. Kesalahan 1: Tidak Mengatur Rute Dinamis dengan Benar Salah satu kesalahan umum adalah tidak menggunakan tanda kurung untuk parameter dinamis dalam rute. Misalnya, saat Anda ingin membuat rute dinamis untuk produk berdasarkan ID, tetapi Anda menggunakan nama file biasa, bukannya tanda kurung ([id]). Kesalahan: // app/products/id/page.tsx (Tidak menggunakan tanda kurung [id]) import React from 'react'; const ProductDetail = () => { return ( <div> <h1>Detail Produk</h1> <p>Ini adalah halaman produk tanpa parameter dinamis.</p> </div> ); } export default ProductDetail; Pada contoh ini, file id/page.tsx tidak akan menangani parameter dinamis seperti /products/123 karena Next.js menganggap id sebagai rute statis. Untuk mengatasi masalah ini, Anda harus menggunakan tanda kurung untuk membuat rute dinamis yang benar. Perbaikan: // app/products/[id]/page.tsx (Menggunakan tanda kurung [id] untuk parameter dinamis) import React from 'react'; const ProductDetail = ({ params }: { params: { id: string } }) => { return ( <div> <h1>Detail Produk {params.id}</h1> <p>Informasi produk dengan ID {params.id}.</p> </div> ); } export default ProductDetail; Kesalahan 2: Tidak Menggunakan Link dengan Benar Kesalahan lain yang sering terjadi adalah menggunakan tag <a> langsung tanpa menggunakan komponen <Link> dari Next.js. Ini bisa menyebabkan halaman direload sepenuhnya ketika berpindah halaman, padahal Next.js mendukung navigasi antar halaman secara client-side. Kesalahan: // pages/products/index.js import React from 'react'; const ProductsPage = () => { return ( <div> <h1>Daftar Produk</h1> <a href="/products/123">Lihat Detail Produk</a> {/* Ini akan menyebabkan full reload */} </div> ); } export default ProductsPage; Pada contoh ini, penggunaan <a href="/products/123"> akan menyebabkan halaman direload penuh, yang mengabaikan optimasi client-side routing dari Next.js. Perbaikan: // pages/products/index.js import React from 'react'; import Link from 'next/link'; const ProductsPage = () => { return ( <div> <h1>Daftar Produk</h1> <Link href="/products/123"> <a>Lihat Detail Produk</a> {/* Menggunakan Link untuk client-side navigation */} </Link> </div> ); } export default ProductsPage; Dengan menggunakan <Link>, Next.js akan melakukan navigasi antar halaman tanpa reload penuh, yang jauh lebih cepat dan lebih efisien. Kesalahan 3: Tidak Menyertakan Default Page di Nested Routes Ketika menggunakan nested routes, kesalahan umum lainnya adalah tidak menyertakan file page.tsx atau index.js pada rute utama, sehingga menyebabkan error saat mengakses rute induk. Kesalahan: // app/products/[id]/reviews/page.tsx (Hanya ada subrute, tapi tidak ada rute induk) import React from 'react'; const ReviewsPage = ({ params }: { params: { id: string } }) => { return ( <div> <h1>Ulasan untuk Produk {params.id}</h1> </div> ); } export default ReviewsPage; Pada contoh ini, rute /products/123/reviews akan berfungsi dengan baik, tetapi jika Anda mencoba mengakses /products/123, Anda akan mendapatkan error karena tidak ada file page.tsx di folder [id]. Perbaikan: // app/products/[id]/page.tsx (Menambahkan halaman default untuk rute induk) import React from 'react'; const ProductDetail = ({ params }: { params: { id: string } }) => { return ( <div> <h1>Detail Produk {params.id}</h1> <p>Informasi produk dengan ID {params.id}.</p> </div> ); } export default ProductDetail; Dengan menambahkan halaman default di rute induk (/products/[id]/page.tsx), Anda dapat memastikan bahwa rute /products/123 dan subrute /products/123/reviews keduanya berfungsi dengan baik. Penutup Membangun proyek dengan Next.js, terutama dalam hal routing, membutuhkan pemahaman yang baik agar aplikasi berjalan dengan efisien dan mudah dikelola. Dengan menghindari kesalahan umum dan memahami konsep seperti dynamic routes serta nested routing, Anda dapat mengembangkan aplikasi yang lebih terstruktur dan performa tinggi. Bagi Anda yang ingin memperdalam ilmu web development, termasuk dalam pengembangan aplikasi dengan Next.js, Laravel, atau framework lainnya, Anda bisa belajar bersama mentor expert di Buildwithangga. Dengan bergabung, Anda akan mendapatkan berbagai benefit menarik seperti akses selamanya ke materi pembelajaran, portofolio berkualitas yang bisa ditampilkan kepada klien atau perekrut, konsultasi langsung dengan mentor untuk mendapatkan bimbingan dan saran, serta banyak lagi manfaat lainnya yang akan membantu Anda menjadi developer yang lebih handal. Ayo, tingkatkan skill Anda dan bangun karier yang lebih baik bersama Buildwithangga!

Next.js adalah salah satu framework populer yang banyak digunakan oleh developer untuk membangun website modern, baik frontend maupun backend. Dengan Next.js, developer dapat mengelola berbagai fitur yang mendukung pembuatan website dengan performa tinggi dan pengalaman pengguna yang baik. Framework ini memudahkan developer dalam mengelola routing, server-side rendering, dan API, membuatnya menjadi pilihan utama dalam dunia web development. Menggunakan Next.js tidak hanya memberikan kelebihan pada sisi kecepatan dan kemudahan integrasi dengan tools lainnya, tapi juga menawarkan fleksibilitas bagi developer untuk menyesuaikan projek sesuai kebutuhan bisnis dan teknologi yang diinginkan. Mengapa TypeScript Cocok untuk Projek Next.js? Memilih TypeScript sebagai bahasa yang digunakan di dalam projek Next.js adalah langkah yang sangat tepat, terutama jika tujuan jangka panjang adalah menciptakan kode yang lebih aman dan mudah dikelola. TypeScript menawarkan sistem pengetikan yang lebih ketat dibandingkan JavaScript murni, sehingga meminimalkan kemungkinan terjadinya error pada saat runtime. Hal ini penting, terutama ketika bekerja dalam tim besar atau pada projek yang kompleks. Selain itu, TypeScript memudahkan developer untuk menulis kode yang lebih terstruktur dan konsisten. Dengan adanya type checking, kesalahan dalam passing data atau penggunaan fungsi dapat terdeteksi lebih awal saat proses development. Ini dapat meningkatkan produktivitas serta mengurangi waktu debugging yang diperlukan. Tata Cara Membuat Projek Next.js Terbaru Untuk memulai projek Next.js terbaru, kamu bisa menggunakan perintah sederhana dengan menggunakan terminal. Pastikan kamu sudah menginstal Node.js terlebih dahulu agar bisa menggunakan Next.js. Berikut adalah langkah-langkah untuk membuat projek Next.js menggunakan perintah di terminal: Buka terminal dan jalankan perintah berikut untuk menginstal Next.js secara global: npx create-next-app@latest my-nextjs-project Setelah proses instalasi selesai, masuk ke direktori projek yang telah dibuat: cd my-nextjs-project Kemudian, jalankan server development untuk melihat hasil dari projek Next.js: npm run dev Kamu bisa membuka browser dan mengunjungi http://localhost:3000 untuk melihat tampilan awal dari projek Next.js yang baru saja dibuat. Dengan ini, projek Next.js sudah siap untuk dikembangkan lebih lanjut. Mengenal Beberapa Tipe TypeScript: Primitive, Array, Object, Union, dan Lainnya TypeScript menyediakan berbagai jenis tipe data (types) yang membantu developer menulis kode yang lebih aman dan jelas. Beberapa tipe TypeScript yang sering digunakan adalah primitive types, array, object, dan union. Berikut penjelasannya beserta contoh kode. Primitive Types Primitive types mencakup tipe data dasar seperti string, number, boolean, dan lainnya. Ini adalah tipe data yang paling sederhana dan sering digunakan dalam pemrograman. Contoh kode: let name: string = "John Doe"; let age: number = 30; let isDeveloper: boolean = true; Array Array adalah tipe data yang dapat menyimpan banyak nilai dalam satu variabel. TypeScript memungkinkan kita untuk menentukan tipe data dari elemen-elemen di dalam array. Contoh kode: let numbers: number[] = [1, 2, 3, 4, 5]; let names: string[] = ["Alice", "Bob", "Charlie"]; Object Object digunakan untuk menyimpan data dalam bentuk pasangan key-value. Dengan TypeScript, kita bisa mendefinisikan struktur objek agar lebih jelas. Contoh kode: let person: { name: string; age: number; isDeveloper: boolean } = { name: "Jane Doe", age: 28, isDeveloper: true }; Union Union type memungkinkan sebuah variabel memiliki lebih dari satu tipe data. Ini sangat berguna ketika variabel bisa berisi beberapa jenis nilai yang berbeda. Contoh kode: let id: number | string; id = 101; // valid id = "A101"; // valid Optional Types Optional types digunakan ketika sebuah properti atau parameter bersifat opsional, artinya tidak selalu ada. Contoh kode: let user: { name: string; age?: number } = { name: "Tom" }; // age bersifat opsional Dengan berbagai tipe TypeScript ini, developer dapat membuat kode yang lebih aman, mudah dipahami, dan mudah di-maintain, terutama dalam projek Next.js yang cenderung memiliki banyak tipe data kompleks. Tata Cara Membuat Types untuk Data Products, Testimonials, Transactions, Categories Dalam Next.js yang menggunakan TypeScript, mendefinisikan types untuk berbagai data seperti produk, testimoni, transaksi, dan kategori membantu dalam menjaga struktur data yang konsisten. TypeScript memberikan kejelasan tentang bentuk data, sehingga dapat mengurangi potensi error dan meningkatkan keterbacaan kode. Berikut adalah cara membuat types untuk data tersebut. Contoh kode untuk type Products: type Product = { id: number; name: string; price: number; stock: number; description: string; categoryId: number; isFeatured: boolean; }; Type Product mencakup properti seperti id, name, price, stock, description, categoryId, dan isFeatured. Type ini mendefinisikan produk dengan lengkap, termasuk harganya (price), stok yang tersedia (stock), deskripsi produk (description), dan apakah produk ini ditampilkan sebagai produk unggulan (isFeatured). Contoh kode untuk type Testimonials: type Testimonial = { id: number; name: string; feedback: string; productId: number; rating: number; }; Type Testimonial mengelola data ulasan dari pengguna, termasuk nama pengguna (name), ulasan (feedback), serta ID produk (productId) dan rating (rating). Contoh kode untuk type Transactions: type Transaction = { id: number; productId: number; userId: number; quantity: number; totalAmount: number; transactionDate: string; }; Type Transaction menggambarkan transaksi yang terjadi di aplikasi, termasuk ID produk (productId), ID pengguna (userId), jumlah produk yang dibeli (quantity), total harga (totalAmount), dan tanggal transaksi (transactionDate). Contoh kode untuk type Categories: type Category = { id: number; name: string; totalProducts: number; isPopular: boolean; }; Type Category mendefinisikan kategori produk dengan atribut seperti id, name, jumlah produk dalam kategori (totalProducts), dan apakah kategori ini populer (isPopular). Dengan type di atas, kamu bisa memastikan bahwa data yang digunakan dalam aplikasi memiliki struktur yang jelas dan seragam, sehingga memudahkan pengelolaan dan debugging. Tata Cara Mengimplementasikan Types pada Dummy Data Setelah membuat type untuk data products, testimonials, transactions, dan categories, langkah selanjutnya adalah mengimplementasikan types ini pada dummy data. Dengan menggunakan TypeScript, kamu bisa membuat dummy data yang sudah sesuai dengan types yang telah didefinisikan, sehingga validasi data lebih ketat dan kode lebih aman. Contoh Dummy Data untuk Products: const products: Product[] = [ { id: 1, name: "Ebook A", price: 100000, stock: 20, description: "Ebook A tentang pengembangan web modern", categoryId: 1, isFeatured: true }, { id: 2, name: "Ebook B", price: 150000, stock: 10, description: "Ebook B membahas teknik advanced web development", categoryId: 2, isFeatured: false } ]; Pada contoh di atas, kita membuat dummy data produk dengan type Product yang sudah dibuat sebelumnya. Setiap produk memiliki ID, nama, harga, stok, deskripsi, ID kategori, dan status apakah produk tersebut unggulan atau tidak (isFeatured). Contoh Dummy Data untuk Categories: const categories: Category[] = [ { id: 1, name: "Web Development", totalProducts: 5, isPopular: true }, { id: 2, name: "Design", totalProducts: 8, isPopular: false } ]; Dummy data kategori juga didefinisikan menggunakan type Category, sehingga data kategori memiliki informasi seperti ID, nama kategori, jumlah produk dalam kategori tersebut (totalProducts), dan apakah kategori tersebut populer atau tidak. Mapping Dummy Data di Halaman Home Next.js Setelah dummy data dibuat, langkah selanjutnya adalah memetakan data tersebut pada halaman Home di Next.js. Tujuan dari mapping ini adalah untuk menampilkan produk berdasarkan kategori yang dipilih. Berikut adalah langkah-langkah dan contoh implementasinya. Menampilkan Kategori dengan Filter Produk Kita akan menggunakan state untuk menyimpan kategori yang sedang dipilih dan menggunakan filter untuk menampilkan produk yang sesuai dengan kategori yang dipilih.Menggunakan useState untuk Menyimpan Kategori yang Aktif Untuk mengatur kategori yang aktif, kita akan menggunakan hook useState. State ini akan digunakan untuk menyimpan ID kategori yang sedang dipilih oleh pengguna.Melakukan Mapping dan Filtering Produk Pada tahap ini, kita akan memetakan kategori dalam bentuk tombol dan melakukan filtering produk berdasarkan kategori yang dipilih. Jika tidak ada kategori yang dipilih, semua produk akan ditampilkan. Contoh Implementasi di Halaman Home: import { useState } from 'react'; const Home = () => { const [activeCategory, setActiveCategory] = useState<number | null>(null); return ( <div> <h1>Daftar Produk</h1> {/* Mapping Kategori */} <div> {categories.map((category) => ( <button key={category.id} onClick={() => setActiveCategory(category.id)} style={{ margin: '10px', padding: '5px 15px', background: category.isPopular ? 'green' : 'blue', color: 'white' }} > {category.name} </button> ))} </div> {/* Filtering dan Mapping Produk */} <div> {products .filter(product => !activeCategory || product.categoryId === activeCategory) .map(product => ( <div key={product.id} style={{ border: '1px solid #ccc', padding: '10px', margin: '10px' }}> <h2>{product.name}</h2> <p>{product.description}</p> <p>Harga: {product.price}</p> <p>Stok: {product.stock}</p> {product.isFeatured && <span>Produk Unggulan</span>} </div> ))} </div> </div> ); }; export default Home; Penjelasan Implementasi Pada contoh di atas, terdapat beberapa poin penting terkait implementasi: State Active Category: Menggunakan useState untuk menyimpan kategori yang sedang aktif. Saat pengguna mengklik tombol kategori, state akan di-update dengan ID kategori tersebut.Mapping Kategori: Menggunakan map untuk menampilkan semua kategori sebagai tombol. Masing-masing tombol kategori memiliki fungsi onClick untuk mengubah kategori yang aktif.Filtering Produk: Produk yang ditampilkan di halaman difilter berdasarkan kategori yang aktif. Jika tidak ada kategori yang dipilih (activeCategory === null), maka semua produk akan ditampilkan. Jika ada kategori yang dipilih, produk yang ditampilkan hanya yang memiliki categoryId sesuai dengan ID kategori yang aktif.Mapping Produk: Setelah difilter, produk yang sesuai dengan kategori akan dimapping dan ditampilkan dengan informasi seperti nama produk, deskripsi, harga, stok, dan tanda jika produk tersebut adalah produk unggulan. Dengan implementasi ini, pengguna dapat memilih kategori untuk melihat produk-produk yang relevan dengan kategori tersebut. Selain itu, tipe data yang digunakan (TypeScript types) memberikan struktur yang jelas, sehingga proses development lebih terorganisir dan minim error. Menggunakan TypeScript di dalam Next.js juga meningkatkan keterbacaan dan pengelolaan kode, terutama untuk projek yang besar atau memiliki banyak data yang perlu ditangani. Dengan dummy data dan proses mapping ini, kamu sudah berhasil menerapkan TypeScript dalam pengelolaan produk dan kategori di aplikasi Next.js. 5 Kesalahan Menggunakan TypeScript pada Projek Next.js Walaupun TypeScript sangat membantu dalam memastikan kode lebih aman dan terstruktur, seringkali developer membuat beberapa kesalahan saat menggunakannya di dalam projek Next.js. Berikut adalah beberapa kesalahan umum dan cara menghindarinya dengan contoh koding yang lengkap. 1. Mengabaikan Penulisan Type Secara Eksplisit Kesalahan pertama yang sering terjadi adalah developer tidak mendefinisikan type secara eksplisit, mengandalkan inferensi dari TypeScript. Walaupun TypeScript dapat menginfer type secara otomatis, namun menulis type secara eksplisit membantu dalam memahami kode dengan lebih jelas. Contoh kesalahan: const product = { name: "Ebook A", price: 100000, }; Solusi yang benar: type Product = { name: string; price: number; }; const product: Product = { name: "Ebook A", price: 100000, }; Menuliskan type secara eksplisit pada product memastikan struktur data yang lebih jelas dan mudah dipahami. 2. Tidak Menggunakan Union Types Secara Efisien Union types memungkinkan sebuah variabel untuk memiliki lebih dari satu type, namun seringkali developer tidak memanfaatkannya dengan baik, sehingga menyebabkan kode menjadi terlalu kaku. Contoh kesalahan: let id: number; id = 123; // valid id = "ABC"; // error Solusi yang benar: let id: number | string; id = 123; // valid id = "ABC"; // valid Dengan menggunakan union types, variabel id dapat menampung nilai baik berupa number maupun string. 3. Tidak Menggunakan Optional Properties Kesalahan umum lainnya adalah tidak memanfaatkan properti opsional pada object. Hal ini menyebabkan kode menjadi lebih rumit karena developer perlu selalu mengisi semua properti object, meskipun tidak semuanya wajib. Contoh kesalahan: type User = { name: string; email: string; age: number; }; const user: User = { name: "John Doe", email: "[email protected]", age: 30, }; Solusi yang benar: type User = { name: string; email: string; age?: number; // properti opsional }; const user: User = { name: "John Doe", email: "[email protected]", }; Dengan menambahkan tanda ? pada properti age, properti tersebut menjadi opsional, sehingga tidak wajib diisi. 4. Tidak Menggunakan any secara Bijaksana Terkadang, developer menggunakan type any secara berlebihan untuk menangani berbagai jenis data tanpa melakukan validasi. Penggunaan any yang tidak bijaksana bisa menghilangkan manfaat utama TypeScript, yaitu keamanan type. Contoh kesalahan: let data: any; data = "Hello"; data = 123; data = { name: "Ebook A" }; Solusi yang benar: let data: string | number | { name: string }; data = "Hello"; // valid data = 123; // valid data = { name: "Ebook A" }; // valid Dengan mendefinisikan union type, kamu bisa menangani berbagai jenis data tanpa menghilangkan validasi tipe. 5. Tidak Menggunakan Type Assertion dengan Tepat Type assertion digunakan ketika kita yakin bahwa suatu nilai memiliki type tertentu. Namun, kesalahan yang sering terjadi adalah menggunakan type assertion dengan tidak tepat, sehingga justru menyebabkan error di runtime. Contoh kesalahan: const input = document.getElementById("user-input") as HTMLInputElement; input.value = "Hello"; // asumsi bahwa elemen ini selalu ada Solusi yang benar: const input = document.getElementById("user-input"); if (input instanceof HTMLInputElement) { input.value = "Hello"; // pastikan elemen ada dan tipe-nya benar } Dengan memeriksa terlebih dahulu apakah elemen yang dimaksud benar-benar HTMLInputElement, kamu dapat menghindari potensi error di runtime. Menggunakan TypeScript dengan bijaksana akan sangat membantu dalam menjaga keamanan dan kejelasan kode, terutama dalam proyek Next.js yang kompleks. Menghindari kesalahan-kesalahan di atas dapat meningkatkan kualitas proyekmu secara signifikan. Penutup Menggunakan TypeScript dalam proyek Next.js memang bisa memberikan banyak manfaat, terutama dalam menjaga kualitas dan keamanan kode. Dengan menghindari kesalahan umum yang sering dilakukan, kamu bisa mengembangkan aplikasi web yang lebih terstruktur dan minim error. Jika kamu ingin memperdalam pemahamanmu mengenai TypeScript, Next.js, atau topik web development lainnya, kamu bisa belajar bersama mentor expert di BuildWithAngga. Di sana, kamu akan mendapatkan berbagai benefit, seperti akses selamanya ke semua materi, bimbingan untuk membangun portfolio berkualitas, kesempatan untuk konsultasi langsung dengan mentor, serta banyak benefit menarik lainnya yang akan membantu kamu mempersiapkan diri untuk karir di industri teknologi. Jadi, tunggu apalagi? Tingkatkan skill kamu dan wujudkan mimpi menjadi developer handal bersama BuildWithAngga!

Pada artikel ini, kita akan belajar membuat website sederhana untuk jualan template CV menggunakan Next.js versi 14, khususnya dengan fitur app router. Bayangkan kamu adalah seorang pengusaha yang menjual berbagai template CV untuk membantu orang-orang melamar pekerjaan dengan desain yang menarik. Website ini akan menampilkan katalog template CV yang dapat diunduh oleh pengguna, namun kita akan bekerja dengan dummy data terlebih dahulu untuk memudahkan proses pengembangan. Website yang akan kita buat ini adalah langkah awal bagi para developer pemula yang ingin memahami alur kerja Next.js dengan struktur data yang baik. Dalam proyek ini, kita akan fokus pada bagaimana mengatur data template CV, menampilkannya dengan baik, dan mengelola navigasi menggunakan app router dari Next.js. Bayangkan struktur web ini seperti toko kecil yang menjual berbagai barang, dalam hal ini template CV. Setiap template memiliki informasi seperti nama, deskripsi, harga, dan kategori. Nah, dengan Next.js app router, kita bisa dengan mudah membuat halaman-halaman yang menampilkan daftar template, detail template, dan bahkan halaman checkout (meskipun untuk latihan kali ini, kita tidak akan menyertakan fungsionalitas transaksi sebenarnya). Cara Membuat Next.js Project Baru dengan App Router Untuk memulai membuat website jual template CV sederhana, hal pertama yang harus kita lakukan adalah membuat Next.js project baru. Dalam tutorial ini, kita akan menggunakan Next.js 14 yang sudah dilengkapi dengan fitur app router. Berikut adalah langkah-langkah untuk membuat proyek baru beserta contoh koding lengkapnya. Pertama, kamu perlu memastikan bahwa Node.js sudah terinstal di komputermu. Setelah itu, kamu bisa membuka terminal atau command prompt dan jalankan perintah berikut untuk menginstal Next.js secara global: npx create-next-app@latest my-cv-template-store Perintah ini akan membuat folder proyek baru bernama my-cv-template-store dengan Next.js 14. Setelah proses instalasi selesai, masuk ke folder proyek tersebut dengan menjalankan: cd my-cv-template-store Untuk memastikan bahwa proyek sudah menggunakan app router, pastikan bahwa struktur folder yang dibuat otomatis oleh Next.js berisi folder app di dalam root proyek. Folder inilah yang berfungsi sebagai pengatur rute halaman-halaman dalam aplikasi. Selanjutnya, jalankan server pengembangan untuk melihat hasil proyek awal: npm run dev Jika kamu membuka browser dan masuk ke http://localhost:3000, kamu akan melihat halaman awal default dari Next.js. Penjelasan Struktur Folder dan File pada Next.js App Router Project Setelah kita berhasil membuat Next.js project dengan app router, sekarang mari kita bahas struktur folder dan file yang dihasilkan. Folder app: Folder ini adalah inti dari aplikasi yang menggunakan app router. Semua file dan folder di dalamnya akan menjadi halaman-halaman website berdasarkan struktur folder tersebut. Misalnya, jika ada folder bernama app/templates, maka halaman yang diakses melalui http://localhost:3000/templates akan memuat konten dari folder tersebut.File layout.js: File ini adalah template utama yang akan membungkus semua halaman dalam aplikasi. Kamu bisa menganggapnya seperti kerangka dasar dari setiap halaman, seperti header dan footer yang muncul di semua halaman.File page.js: File ini berfungsi untuk menampilkan konten pada halaman tertentu. Jika kamu membuat file page.js di dalam folder app, maka file ini akan ditampilkan di halaman utama http://localhost:3000/. Setiap folder dalam app bisa memiliki file page.js yang bertanggung jawab atas konten spesifik di rutenya masing-masing.Folder public: Di sinilah kamu bisa menyimpan file-file statis seperti gambar, ikon, atau berkas lainnya yang dapat diakses langsung oleh browser tanpa harus melalui proses render server.Folder styles: Folder ini berisi file CSS yang mengatur tampilan antarmuka aplikasi. Kamu bisa mengatur gaya global di sini atau mengimpor gaya ke dalam komponen tertentu.File next.config.js: File konfigurasi untuk Next.js. Di sini kamu bisa mengatur berbagai konfigurasi seperti optimisasi gambar, jalur URL kustom, dan lainnya sesuai kebutuhan proyekmu. Cara Membuat File Data Dummy untuk Kategori di Folder data Untuk mengatur kategori template CV di proyek kita, kita bisa membuat file data dummy yang berisi 5 kategori beserta informasi seperti nama kategori, ikon, dan slug. Data ini nantinya bisa digunakan untuk ditampilkan di halaman web kita. Pertama, buatlah folder baru bernama data di dalam direktori proyek Next.js kamu. Folder ini akan digunakan untuk menyimpan file data dummy. Setelah folder data dibuat, tambahkan file categories.js di dalamnya. Isi file categories.js dengan data dummy dalam format JavaScript object seperti berikut: const categories = [ { id: 1, name: "Professional", icon: "💼", slug: "professional", }, { id: 2, name: "Creative", icon: "🎨", slug: "creative", }, { id: 3, name: "Modern", icon: "📊", slug: "modern", }, { id: 4, name: "Simple", icon: "✏️", slug: "simple", }, { id: 5, name: "Classic", icon: "🖋️", slug: "classic", }, ]; export default categories; Cara Membuat File Data Dummy untuk Penulis di Folder data Untuk menambahkan informasi tentang penulis template CV di proyek Next.js kita, kita bisa membuat file data dummy berisi informasi tentang 5 penulis. Setiap penulis akan memiliki nama, foto, pekerjaan, dan slug untuk URL. Langkah pertama adalah membuat file di folder data yang sudah dibuat sebelumnya. Buat file baru bernama authors.js di dalam folder data. File ini akan menyimpan data penulis dalam bentuk array objek. Berikut adalah contoh lengkap kodenya: const authors = [ { id: 1, name: "Alice Johnson", photo: "/images/alice.jpg", occupation: "Graphic Designer", slug: "alice-johnson", }, { id: 2, name: "Bob Smith", photo: "/images/bob.jpg", occupation: "Content Writer", slug: "bob-smith", }, { id: 3, name: "Charlie Davis", photo: "/images/charlie.jpg", occupation: "UX/UI Designer", slug: "charlie-davis", }, { id: 4, name: "Dana Lee", photo: "/images/dana.jpg", occupation: "Marketing Specialist", slug: "dana-lee", }, { id: 5, name: "Evan Miller", photo: "/images/evan.jpg", occupation: "Web Developer", slug: "evan-miller", }, ]; export default authors; Cara Membuat File Data Dummy untuk Template CV di Folder data Untuk menambahkan informasi tentang template CV yang akan dijual di website kita, kita bisa membuat file data dummy yang berisi informasi tentang template CV, seperti nama, thumbnail, deskripsi, id penulis, id kategori, slug, harga, dan rating. Data ini akan digunakan untuk menampilkan template CV di halaman web kita. Buat file baru bernama templates.js di dalam folder data. Berikut adalah contoh lengkap kodingnya: const templates = [ { id: 1, name: "Modern CV Template", thumbnail: "/images/modern-cv.jpg", about: "Desain CV modern yang cocok untuk berbagai profesi.", author_id: 1, category_id: 3, slug: "modern-cv-template", price: 15, rating: 4.8, }, { id: 2, name: "Creative CV Template", thumbnail: "/images/creative-cv.jpg", about: "Template CV dengan desain kreatif untuk pekerjaan di bidang seni.", author_id: 2, category_id: 2, slug: "creative-cv-template", price: 20, rating: 4.5, }, { id: 3, name: "Professional CV Template", thumbnail: "/images/professional-cv.jpg", about: "Desain CV profesional yang ideal untuk melamar posisi formal.", author_id: 3, category_id: 1, slug: "professional-cv-template", price: 25, rating: 4.9, }, { id: 4, name: "Simple CV Template", thumbnail: "/images/simple-cv.jpg", about: "Desain CV sederhana dan minimalis.", author_id: 4, category_id: 4, slug: "simple-cv-template", price: 10, rating: 4.6, }, { id: 5, name: "Classic CV Template", thumbnail: "/images/classic-cv.jpg", about: "Template CV dengan desain klasik yang tetap relevan.", author_id: 5, category_id: 5, slug: "classic-cv-template", price: 18, rating: 4.7, }, ]; export default templates; Penjelasan setiap properti dalam objek templates: name: Nama dari template CV, seperti "Modern CV Template" atau "Creative CV Template".thumbnail: Lokasi gambar thumbnail yang mewakili tampilan dari template CV, misalnya /images/modern-cv.jpg.about: Deskripsi singkat mengenai template CV tersebut, misalnya apa keunggulannya atau siapa yang cocok menggunakannya.author_id: ID yang menghubungkan template ini dengan penulisnya, diambil dari data penulis yang sudah dibuat di file authors.js.category_id: ID yang menghubungkan template ini dengan kategori, diambil dari data kategori yang sudah dibuat di file categories.js.slug: String yang URL-friendly untuk digunakan sebagai bagian dari rute halaman.price: Harga dari template CV tersebut, dalam format angka.rating: Rating dari template berdasarkan ulasan pengguna, juga dalam format angka. File ini bisa di-import ke komponen yang menampilkan daftar template CV di halaman utama atau halaman detail. Dengan menggunakan data dummy, kita dapat dengan mudah mengelola tampilan konten sebelum data asli tersedia. Cara Membuat File Types untuk Data Dummy Untuk menjaga konsistensi struktur data dalam aplikasi Next.js yang kita buat, terutama ketika menggunakan TypeScript, kita perlu mendefinisikan tipe data untuk setiap data dummy yang telah kita buat. Dengan membuat file types, kita bisa mengatur tipe data yang digunakan oleh template CV, penulis, dan kategori. Ini akan memudahkan pengembangan dan mencegah kesalahan penggunaan data. Buatlah file baru bernama types.ts di dalam folder data atau folder lain yang kamu gunakan untuk tipe data. Berikut adalah contoh lengkap kodingnya untuk seluruh data dummy yang telah kita buat sebelumnya. export interface Category { id: number; name: string; icon: string; slug: string; } export interface Author { id: number; name: string; photo: string; occupation: string; slug: string; } export interface TemplateCV { id: number; name: string; thumbnail: string; about: string; author_id: number; category_id: number; slug: string; price: number; rating: number; } Penjelasan untuk setiap tipe data di atas: Category: Mendefinisikan struktur data untuk kategori template CV, termasuk properti id (nomor unik), name (nama kategori), icon (ikon yang mewakili kategori), dan slug (teks URL-friendly).Author: Mendefinisikan struktur data untuk penulis template CV, dengan properti id (nomor unik), name (nama penulis), photo (URL foto penulis), occupation (pekerjaan penulis), dan slug (teks URL-friendly).TemplateCV: Mendefinisikan struktur data untuk template CV, dengan properti seperti id (nomor unik), name (nama template), thumbnail (gambar representasi template), about (deskripsi template), author_id (ID penulis terkait), category_id (ID kategori terkait), slug (teks URL-friendly), price (harga template), dan rating (rating dari pengguna). Dengan mendefinisikan tipe-tipe ini, kamu bisa memastikan bahwa data yang digunakan dalam komponen-komponen Next.js akan sesuai dengan struktur yang diharapkan. TypeScript akan membantu memberikan peringatan ketika ada ketidaksesuaian data, sehingga aplikasi menjadi lebih aman dan mudah dipelihara. Cara Mapping Data dan Membuat Tabs Sederhana di Komponen Home Untuk menampilkan data templateCV, category, dan author di komponen Home, kita bisa melakukan mapping data dari file dummy yang sudah dibuat. Selain itu, kita akan menggunakan state di React untuk membuat tabs sederhana yang memungkinkan pengguna memilih template berdasarkan kategori atau penulis. Pertama, pastikan kamu sudah mengimpor data dari file dummy ke dalam komponen Home. Berikut adalah contoh lengkap kodingnya: "use client" import { useState } from "react"; import categories from "../data/categories"; import authors from "../data/authors"; import templates from "../data/templates"; const Home = () => { const [activeTab, setActiveTab] = useState("category"); const filterByCategory = (categoryId: number) => { return templates.filter((template) => template.category_id === categoryId); }; const filterByAuthor = (authorId: number) => { return templates.filter((template) => template.author_id === authorId); }; return ( <div> {/* Tabs */} <div className="tabs"> <button onClick={() => setActiveTab("category")}>By Category</button> <button onClick={() => setActiveTab("author")}>By Author</button> </div> {/* Content based on active tab */} {activeTab === "category" ? ( <div> <h3>Templates by Category</h3> {categories.map((category) => ( <div key={category.id}> <h4>{category.name}</h4> <div className="template-list"> {filterByCategory(category.id).map((template) => ( <div key={template.id} className="template-item"> <img src={template.thumbnail} alt={template.name} /> <h5>{template.name}</h5> <p>{template.about}</p> <p>Price: ${template.price}</p> <p>Rating: {template.rating}</p> </div> ))} </div> </div> ))} </div> ) : ( <div> <h3>Templates by Author</h3> {authors.map((author) => ( <div key={author.id}> <h4>{author.name} - {author.occupation}</h4> <div className="template-list"> {filterByAuthor(author.id).map((template) => ( <div key={template.id} className="template-item"> <img src={template.thumbnail} alt={template.name} /> <h5>{template.name}</h5> <p>{template.about}</p> <p>Price: ${template.price}</p> <p>Rating: {template.rating}</p> </div> ))} </div> </div> ))} </div> )} </div> ); }; export default Home; Penjelasan koding: useState: Kita menggunakan useState untuk menyimpan status tab aktif. Ada dua tab: By Category dan By Author. State activeTab akan menentukan data mana yang ditampilkan, apakah berdasarkan kategori atau penulis.filterByCategory dan filterByAuthor: Dua fungsi ini digunakan untuk menyaring templateCV berdasarkan category_id atau author_id, sesuai tab yang aktif.Mapping Data: Kita melakukan mapping terhadap data categories dan authors, kemudian untuk setiap kategori atau penulis, kita menampilkan template-template yang sesuai dengan menggunakan fungsi penyaringan tadi.Tabs: Ada dua tombol yang mengatur tab aktif. Saat pengguna mengklik tombol "By Category", tab akan berubah dan menampilkan template berdasarkan kategori. Demikian juga dengan "By Author". Cara Membuat Komponen Category, Author, dan TemplateCV Untuk membuat struktur kode yang lebih terorganisir di dalam aplikasi Next.js 14, kita bisa memecah tampilan data menjadi beberapa komponen terpisah: Category, Author, dan TemplateCV. Ini akan memudahkan dalam pengelolaan dan pemeliharaan kode. Langkah 1: Membuat Komponen Category Buat file komponen Category.js di folder components. Komponen ini akan bertanggung jawab untuk menampilkan data kategori: // components/Category.js const Category = ({ category, templates }) => { return ( <div> <h4>{category.name}</h4> <div className="template-list"> {templates.map((template) => ( <div key={template.id} className="template-item"> <img src={template.thumbnail} alt={template.name} /> <h5>{template.name}</h5> <p>{template.about}</p> <p>Price: ${template.price}</p> <p>Rating: {template.rating}</p> </div> ))} </div> </div> ); }; export default Category; Langkah 2: Membuat Komponen Author Buat file komponen Author.js di folder components. Komponen ini akan menampilkan daftar template yang ditulis oleh penulis tertentu: // components/Author.js const Author = ({ author, templates }) => { return ( <div> <h4>{author.name} - {author.occupation}</h4> <div className="template-list"> {templates.map((template) => ( <div key={template.id} className="template-item"> <img src={template.thumbnail} alt={template.name} /> <h5>{template.name}</h5> <p>{template.about}</p> <p>Price: ${template.price}</p> <p>Rating: {template.rating}</p> </div> ))} </div> </div> ); }; export default Author; Langkah 3: Membuat Komponen TemplateCV Buat file komponen TemplateCV.js di folder components. Komponen ini akan menangani tampilan untuk satu template CV. Meskipun kita sudah menampilkannya di dalam komponen Category dan Author, kita bisa membuat komponen ini terpisah jika nantinya perlu digunakan secara independen. // components/TemplateCV.js const TemplateCV = ({ template }) => { return ( <div className="template-item"> <img src={template.thumbnail} alt={template.name} /> <h5>{template.name}</h5> <p>{template.about}</p> <p>Price: ${template.price}</p> <p>Rating: {template.rating}</p> </div> ); }; export default TemplateCV; Langkah 4: Mapping dan Menggunakan Komponen-Komponen Tersebut di Komponen Home Sekarang kita akan mengimpor komponen Category dan Author ke dalam komponen Home, lalu melakukan mapping data menggunakan komponen-komponen tersebut. "use client"; import { useState } from "react"; import categories from "../data/categories"; import authors from "../data/authors"; import templates from "../data/templates"; import Category from "../components/Category"; import Author from "../components/Author"; export default function Home() { const [activeTab, setActiveTab] = useState("category"); const filterByCategory = (categoryId) => { return templates.filter((template) => template.category_id === categoryId); }; const filterByAuthor = (authorId) => { return templates.filter((template) => template.author_id === authorId); }; return ( <div> {/* Tabs */} <div className="tabs"> <button onClick={() => setActiveTab("category")}>By Category</button> <button onClick={() => setActiveTab("author")}>By Author</button> </div> {/* Content based on active tab */} {activeTab === "category" ? ( <div> <h3>Templates by Category</h3> {categories.map((category) => ( <Category key={category.id} category={category} templates={filterByCategory(category.id)} /> ))} </div> ) : ( <div> <h3>Templates by Author</h3> {authors.map((author) => ( <Author key={author.id} author={author} templates={filterByAuthor(author.id)} /> ))} </div> )} </div> ); } Penjelasan: Category Component: Komponen Category menerima properti category dan templates. Data ini ditampilkan berdasarkan kategori tertentu, dan template-template yang sesuai ditampilkan menggunakan mapping.Author Component: Komponen Author mirip dengan Category, tetapi menampilkan template berdasarkan penulis yang bersangkutan.TemplateCV Component: Komponen ini bertindak sebagai unit dasar untuk menampilkan satu template CV. Ini dipanggil di dalam komponen Category dan Author melalui mapping.State Management di Home: useState digunakan untuk mengelola tab aktif (category atau author), dan filterByCategory serta filterByAuthor digunakan untuk menyaring data template berdasarkan kategori atau penulis. Kesimpulan yang Telah Dipelajari: Modularisasi Komponen: Dalam pengembangan dengan Next.js, membagi tampilan dan logika ke dalam beberapa komponen seperti Category, Author, dan TemplateCV membuat kode lebih terstruktur, mudah dipelihara, dan fleksibel. Modularisasi ini membantu dalam menangani data secara efisien dengan cara yang terorganisir.Penggunaan "use client": Untuk menggunakan fitur interaktif di Next.js seperti useState, komponen harus ditandai dengan "use client". Ini memastikan bahwa komponen tersebut dijalankan di sisi client, memungkinkan pengelolaan state dan interaksi langsung dengan pengguna, yang tidak bisa dilakukan di server components secara default.Mapping Data untuk UI Dinamis: Memanfaatkan data dari file dummy dan melakukan mapping dengan komponen individual adalah cara yang efektif untuk merender data secara dinamis di halaman web. Ini memberikan fleksibilitas untuk menampilkan konten berdasarkan kategori, penulis, atau properti lain sesuai dengan kebutuhan aplikasi. Saran untuk Materi Lain yang Perlu Dipelajari: Server-Side Rendering (SSR) dan Static Site Generation (SSG): Pelajari lebih dalam tentang bagaimana Next.js menggunakan SSR dan SSG untuk meningkatkan performa aplikasi, terutama dalam hal merender data secara efisien.API Routes di Next.js: Belajar tentang bagaimana membangun API di dalam proyek Next.js untuk mengelola data secara dinamis dari backend atau sumber eksternal.State Management Lebih Lanjut: Mempelajari state management lebih dalam, seperti menggunakan Context API atau Redux, bisa membantu dalam menangani data global dalam aplikasi yang lebih kompleks. Penutup Dengan mempelajari konsep-konsep di atas, kamu sudah memiliki pondasi yang baik untuk membangun aplikasi web modern menggunakan Next.js. Namun, perjalanan belajar tidak berhenti di sini. Untuk menguasai lebih dalam dan mendapatkan pengalaman nyata dalam proyek, kamu bisa belajar bersama mentor expert di BuildWithAngga. Di BuildWithAngga, kamu akan mendapatkan akses selamanya ke semua materi pembelajaran, bisa membangun portfolio berkualitas yang siap digunakan untuk melamar pekerjaan, dan juga mendapatkan kesempatan untuk konsultasi langsung dengan mentor yang berpengalaman. Selain itu, ada banyak benefit menarik lainnya yang akan membantumu mempercepat perjalanan karier sebagai developer. Ayo, terus kembangkan skill-mu dan bergabunglah bersama komunitas belajar yang mendukung di BuildWithAngga!

Pada tutorial ini, kita akan belajar dasar-dasar Next.js dengan menggunakan fitur app router yang baru. Kita akan membuat proyek web sederhana yang berfungsi sebagai toko ebook online menggunakan dummy data. Proyek ini cocok bagi pemula yang ingin latihan Next.js tanpa harus memikirkan integrasi dengan database atau API yang rumit. Fokus kita adalah pada bagaimana app router bekerja dalam Next.js, serta bagaimana kita bisa mengelola dan menampilkan data secara efisien. Bayangkan aplikasi kita sebagai sebuah toko buku online, di mana pengguna dapat menjelajah berbagai kategori ebook, melihat detail ebook, dan beralih antar kategori dengan mudah. Toko ini hanya menggunakan dummy data, yang artinya data yang kita gunakan hanya untuk keperluan latihan, bukan data nyata. App router dalam Next.js bekerja mirip dengan peta untuk sebuah toko. Di toko fisik, peta ini akan membantu pelanggan menemukan bagian tertentu, seperti bagian buku fiksi, buku non-fiksi, atau buku sains. Dalam proyek ini, app router akan membantu kita mengatur dan mengelola routing antar halaman, misalnya halaman home, detail ebook, atau halaman kategori. Dengan pemahaman dasar tentang app router, kamu akan bisa membangun aplikasi yang lebih kompleks di masa depan, seperti website e-commerce atau portal berita. Latihan ini adalah langkah awal yang bagus untuk siapa saja yang ingin memahami Next.js dan cara kerjanya dalam membangun aplikasi web yang cepat dan efisien. Kamu bisa mengikuti tutorial ini dan memahami konsep dasarnya sebelum melanjutkan ke fitur Next.js yang lebih canggih. Sekarang, mari kita mulai perjalanan kita dengan membangun proyek sederhana ini! Cara Install Next.js Secara Global Sebelum kita memulai proyek Next.js menggunakan app router, langkah pertama yang harus dilakukan adalah menginstal Next.js secara global di komputer kita. Instalasi ini akan memudahkan kita dalam membuat proyek baru dan menjalankan server pengembangan dengan cepat. Untuk menginstal Next.js secara global, pastikan kamu sudah menginstal Node.js di komputermu. Kamu bisa mengecek apakah Node.js sudah terpasang dengan menjalankan perintah berikut di terminal: node -v Jika Node.js sudah terpasang, langkah selanjutnya adalah menginstal Next.js. Buka terminal atau command prompt dan jalankan perintah berikut: npm install -g create-next-app Perintah ini akan menginstal create-next-app secara global, yang merupakan tool resmi dari Next.js untuk membuat proyek Next.js dengan cepat. Dengan menggunakan create-next-app, kita tidak perlu repot mengatur konfigurasi awal secara manual. Proses instalasi ini hanya perlu dilakukan satu kali, dan setelah itu kamu bisa membuat proyek Next.js kapan pun dengan mudah. Cara Membuat Proyek Next.js Baru dengan App Router Setelah berhasil menginstal Next.js secara global, langkah berikutnya adalah membuat proyek Next.js baru dengan menggunakan app router. Kita bisa membuat proyek ini dengan sangat cepat menggunakan perintah create-next-app yang sudah kita instal sebelumnya. Buka terminal dan jalankan perintah berikut untuk membuat proyek baru: npx create-next-app@latest my-ebook-store Setelah perintah di atas dijalankan, kamu akan diminta untuk menjawab beberapa pertanyaan, seperti apakah kamu ingin menggunakan TypeScript, ESLint, atau Tailwind CSS. Kamu bisa menjawab sesuai kebutuhan proyekmu. Jika kamu hanya ingin mencoba fitur dasar Next.js, cukup pilih opsi No untuk fitur tambahan. Berikut contoh dialog yang muncul di terminal: ✔ Would you like to use TypeScript with this project? … No ✔ Would you like to use ESLint with this project? … No ✔ Would you like to use Tailwind CSS with this project? … No ✔ Would you like to use `src/` directory with this project? … Yes ✔ Would you like to use App Router? (recommended) … Yes ✔ Would you like to customize the default import alias? … No Setelah proses ini selesai, masuk ke direktori proyek yang baru dibuat dengan perintah berikut: cd my-ebook-store Lalu, jalankan server pengembangan untuk memulai proyek Next.js: npm run dev Kamu akan melihat pesan di terminal yang mengindikasikan bahwa server berjalan di http://localhost:3000. Buka browser dan akses URL tersebut untuk melihat proyek Next.js yang baru saja kamu buat. Sekarang, proyek Next.js dengan app router sudah siap, dan kamu bisa mulai mengembangkan toko ebook online kamu! Cara Membuat File Types untuk Data Ebook dan Ebook Categories Dalam proyek Next.js, kita bisa menggunakan TypeScript untuk mendefinisikan tipe data yang digunakan dalam aplikasi. Hal ini sangat berguna karena dapat membantu kita menghindari kesalahan ketika mengelola data dan memastikan bahwa data yang kita gunakan sesuai dengan struktur yang diharapkan. Untuk mendefinisikan types untuk data ebook dan ebook categories, langkah pertama adalah membuat file baru yang khusus untuk menyimpan tipe data ini. Biasanya, file tersebut dibuat dengan nama types.ts atau types.d.ts di dalam folder proyek. Misalkan kita akan membuat dua tipe data: satu untuk ebook dan satu lagi untuk ebook categories. Berikut ini adalah cara membuat file types: Buat file types.ts di dalam direktori proyek kamu, misalnya di folder src.Di dalam file types.ts, kita akan mendefinisikan tipe data untuk ebook dan ebook categories. Contoh kode lengkap untuk tipe data ebook: export interface Ebook { id: number; title: string; about: string; description: string; author: string; price: number; stock: number; } Contoh kode lengkap untuk tipe data ebook categories: export interface EbookCategory { id: number; name: string; icon: string; totalEbooks: number; isPopular: boolean; } Di sini, kita menggunakan interface untuk mendefinisikan struktur dari data ebook dan ebook categories. Setiap ebook akan memiliki properti seperti id, title, about, description, author, price, dan stock. Sedangkan untuk ebook categories, kita mendefinisikan properti seperti id, name, icon, totalEbooks, dan isPopular. Dengan mendefinisikan tipe data seperti ini, kamu bisa memastikan bahwa ketika data ebook dan kategori ebook digunakan di seluruh aplikasi, mereka akan selalu memiliki struktur yang sama dan mematuhi tipe data yang sudah didefinisikan. Sebagai contoh, ketika kamu ingin membuat sebuah komponen yang menampilkan daftar ebook, kamu bisa memastikan bahwa data yang diterima oleh komponen tersebut sesuai dengan interface yang sudah dibuat. Jika ada kesalahan, TypeScript akan memberi peringatan sejak dini, sehingga kamu bisa memperbaikinya sebelum masalah muncul. Cara Membuat File Dummy Data Terpisah untuk Data Ebook yang Dibungkus dengan Data EbookCategory Dalam kasus ini, kita akan membuat struktur data dummy di mana setiap category memiliki beberapa ebook terkait di dalamnya. Misalnya, satu category bisa memiliki 4 ebook. Untuk mencapai ini, kita akan membuat sebuah file dummy data di mana setiap kategori berisi array dari ebook yang termasuk dalam kategori tersebut. Berikut cara membuatnya dan contoh koding lengkap: Buat file ebookCategoriesWithBooks.ts di dalam folder data atau src/data.Di dalam file ini, kita akan mendefinisikan data ebook categories yang setiap kategorinya berisi data ebooks terkait. Contoh kode untuk file ebookCategoriesWithBooks.ts: import { Ebook, EbookCategory } from '../types'; interface EbookCategoryWithBooks extends EbookCategory { ebooks: Ebook[]; } export const ebookCategoriesWithBooks: EbookCategoryWithBooks[] = [ { id: 1, name: "Programming", icon: "🖥️", totalEbooks: 50, isPopular: true, ebooks: [ { id: 1, title: "Learn JavaScript", about: "A comprehensive guide to JavaScript", description: "This book covers all the essential concepts of JavaScript in a simple and clear way.", author: "John Doe", price: 19.99, stock: 10, }, { id: 2, title: "Mastering React", about: "Advanced techniques in React", description: "Take your React skills to the next level with this deep dive into advanced topics.", author: "Jane Smith", price: 24.99, stock: 5, }, { id: 3, title: "Node.js for Beginners", about: "A complete beginner's guide to Node.js", description: "Learn the basics of Node.js and server-side JavaScript development.", author: "Alex Brown", price: 15.99, stock: 8, }, { id: 4, title: "TypeScript Essentials", about: "Master TypeScript from scratch", description: "Learn how TypeScript can improve your JavaScript projects.", author: "Emily White", price: 18.99, stock: 12, } ] }, { id: 2, name: "Design", icon: "🎨", totalEbooks: 30, isPopular: false, ebooks: [ { id: 5, title: "Introduction to UX Design", about: "Learn the basics of user experience design", description: "A guide to understanding the principles of UX design.", author: "Chris Green", price: 22.99, stock: 9, }, { id: 6, title: "Mastering Photoshop", about: "Advanced techniques for Photoshop", description: "Enhance your design skills with advanced Photoshop techniques.", author: "Sophie Blue", price: 25.99, stock: 7, }, { id: 7, title: "UI Design Fundamentals", about: "Build intuitive user interfaces", description: "Understand the key principles of UI design.", author: "Liam Grey", price: 20.99, stock: 6, }, { id: 8, title: "Sketch for Beginners", about: "Learn how to use Sketch for UI/UX design", description: "A beginner's guide to designing with Sketch.", author: "Laura Black", price: 17.99, stock: 4, } ] }, { id: 3, name: "Business", icon: "💼", totalEbooks: 20, isPopular: true, ebooks: [ { id: 9, title: "Entrepreneurship 101", about: "Starting your own business from scratch", description: "A guide for aspiring entrepreneurs to kickstart their business.", author: "Michael Gold", price: 19.99, stock: 11, }, { id: 10, title: "Marketing Strategies", about: "Learn key marketing strategies", description: "Understand how to create and implement effective marketing strategies.", author: "Karen Silver", price: 21.99, stock: 5, }, { id: 11, title: "Financial Management", about: "Manage your business finances effectively", description: "Learn how to keep your business financially healthy.", author: "Tom Red", price: 23.99, stock: 8, }, { id: 12, title: "Business Growth Hacking", about: "Grow your business rapidly", description: "Strategies to accelerate the growth of your business.", author: "Rachel Blue", price: 27.99, stock: 6, } ] } ]; Di sini, kita membuat interface baru bernama EbookCategoryWithBooks yang mewarisi properti dari EbookCategory dan menambahkan properti ebooks, yaitu array berisi data ebook yang terkait dengan kategori tersebut. Setiap objek EbookCategoryWithBooks sekarang memiliki properti seperti id, name, icon, totalEbooks, isPopular, serta array ebooks yang berisi daftar ebook untuk kategori tersebut. Dengan struktur ini, kita bisa dengan mudah menampilkan kategori dan ebook terkait di aplikasi. Dengan membungkus data ebook di dalam ebook category, kita bisa mensimulasikan hubungan satu ke banyak antara kategori dan ebook di aplikasi yang lebih kompleks. Data dummy ini bisa kamu gunakan untuk menampilkan daftar ebook per kategori di halaman aplikasi Next.js kamu. Cara Mapping Data dan Membuat Tabs Sederhana di Komponen Home Setelah kita memiliki data dummy ebook dan category, langkah berikutnya adalah menampilkan data tersebut di komponen Home. Kita juga akan membuat tabs sederhana untuk menampilkan data ebook berdasarkan kategorinya dengan menggunakan useState di React. Berikut ini adalah cara melakukan mapping data ebook per kategori dan membuat tabs sederhana untuk memilih kategori di komponen Home: Pertama, impor data ebookCategoriesWithBooks dari file data yang telah kita buat ke dalam komponen Home.Gunakan useState untuk mengatur state aktif dari kategori yang dipilih, sehingga kita bisa menampilkan ebook yang sesuai dengan kategori tersebut.Lakukan mapping untuk membuat tab berdasarkan kategori yang ada, dan gunakan data tersebut untuk menampilkan daftar ebook. Berikut adalah contoh kode lengkap untuk komponen Home: import { useState } from 'react'; import { ebookCategoriesWithBooks } from '../data/ebookCategoriesWithBooks'; const Home = () => { // State untuk kategori yang aktif const [activeCategoryId, setActiveCategoryId] = useState<number>(ebookCategoriesWithBooks[0].id); // Filter ebooks berdasarkan kategori yang dipilih const activeCategory = ebookCategoriesWithBooks.find(category => category.id === activeCategoryId); return ( <div> {/* Tabs untuk memilih kategori */} <div className="tabs"> {ebookCategoriesWithBooks.map((category) => ( <button key={category.id} className={`tab ${category.id === activeCategoryId ? 'active' : ''}`} onClick={() => setActiveCategoryId(category.id)} > {category.name} </button> ))} </div> {/* Menampilkan data ebook berdasarkan kategori yang dipilih */} <div className="ebooks-list"> {activeCategory && activeCategory.ebooks.length > 0 ? ( activeCategory.ebooks.map((ebook) => ( <div key={ebook.id} className="ebook-item"> <h3>{ebook.title}</h3> <p>{ebook.about}</p> <p><strong>Author:</strong> {ebook.author}</p> <p><strong>Price:</strong> ${ebook.price}</p> <p><strong>Stock:</strong> {ebook.stock}</p> </div> )) ) : ( <p>No ebooks available in this category.</p> )} </div> </div> ); }; export default Home; Penjelasan Kode: useState digunakan untuk menyimpan activeCategoryId, yaitu ID dari kategori yang sedang dipilih. Secara default, ID kategori pertama dari ebookCategoriesWithBooks akan menjadi kategori yang aktif.Pada bagian tabs, kita melakukan mapping terhadap ebookCategoriesWithBooks untuk membuat tombol tab. Setiap tombol tab akan mengubah activeCategoryId ketika diklik, dan tombol yang aktif diberi kelas active.Setelah kategori dipilih, kita menggunakan find untuk mendapatkan kategori yang sesuai dengan activeCategoryId. Kemudian, kita melakukan mapping terhadap ebooks yang ada di kategori tersebut dan menampilkannya di layar.Jika tidak ada ebook di kategori yang dipilih, kita menampilkan pesan No ebooks available in this category. Dengan cara ini, kita dapat menampilkan daftar ebook berdasarkan kategori yang dipilih oleh pengguna, serta memungkinkan pengguna untuk berpindah kategori menggunakan tabs. Saran untuk Materi Lain yang Perlu Dipelajari Dynamic Routing di Next.js Setelah memahami app router, kamu bisa mempelajari bagaimana melakukan dynamic routing di Next.js, terutama untuk aplikasi yang membutuhkan navigasi berbasis parameter seperti halaman detail produk.API Integration Mempelajari cara mengintegrasikan Next.js dengan API (baik RESTful maupun GraphQL) sangat penting untuk membangun aplikasi yang lebih kompleks dan dinamis, termasuk mengambil data dari server.Server-Side Rendering (SSR) dan Static Site Generation (SSG) Pelajari kapan dan bagaimana menggunakan SSR dan SSG di Next.js untuk meningkatkan performa aplikasi serta memberikan pengalaman pengguna yang lebih baik.Optimisasi dan SEO di Next.js Mengoptimalkan SEO dan performa adalah langkah penting untuk aplikasi web yang sukses. Mempelajari teknik optimisasi di Next.js seperti menggunakan getStaticProps dan getServerSideProps akan sangat membantu.Pengelolaan State yang Lebih Kompleks Setelah menguasai useState, kamu bisa mempelajari pengelolaan state yang lebih kompleks menggunakan useReducer atau bahkan state management libraries seperti Redux untuk aplikasi yang skalanya lebih besar. Penutup Dalam perjalanan belajar Next.js, sangat penting untuk terus berlatih dan memperdalam pemahaman kita tentang berbagai fitur yang ada. Dengan mengikuti tutorial ini, kamu telah mempelajari dasar-dasar Next.js menggunakan app router, cara mengelola data dengan TypeScript, hingga membuat tabs sederhana untuk menampilkan data berdasarkan kategori. Jika kamu ingin meningkatkan kemampuanmu lebih jauh, kamu bisa belajar bersama para mentor expert di BuildWithAngga. Kamu akan mendapatkan berbagai benefit menarik seperti akses materi selamanya, kesempatan untuk membangun portfolio berkualitas, serta konsultasi langsung dengan mentor yang siap membantu menjawab pertanyaan dan membimbingmu. Tak hanya itu, ada juga berbagai keuntungan lain yang akan membuat perjalanan belajarmu semakin menyenangkan dan terarah. Yuk, bergabung sekarang dan wujudkan impianmu menjadi developer profesional dengan dukungan penuh dari BuildWithAngga!