Tutorial Next JS 14 Pemula: Bikin Web Jual Ebook Sederhana

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:

1. Buat file types.ts di dalam direktori proyek kamu, misalnya di folder src.
2. 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:

1. Buat file ebookCategoriesWithBooks.ts di dalam folder data atau src/data.
2. 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:

1. Pertama, impor data ebookCategoriesWithBooks dari file data yang telah kita buat ke dalam komponen Home.
2. Gunakan useState untuk mengatur state aktif dari kategori yang dipilih, sehingga kita bisa menampilkan ebook yang sesuai dengan kategori tersebut.
3. 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

1. 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.
2. 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.
3. 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.
4. 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.
5. 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!