Quickstarters
Bagaimana Membangun Aplikasi CRUD Dasar dengan Next.js?

50min
Pendahuluan
Dalam panduan ini, kami akan membahas cara membangun aplikasi CRUD lengkap (buat, baca, perbarui, hapus) menggunakan Next.js untuk frontend Anda, dipasangkan dengan Back4app sebagai solusi backend Anda.
Anda akan menyiapkan proyek bernama Basic-CRUD-App-NextJS, merancang skema database dinamis, dan mengintegrasikan fungsionalitas CRUD yang kuat ke dalam aplikasi Next.js Anda.
Kami akan membahas segala hal mulai dari mengonfigurasi proyek Back4app Anda dan merancang koleksi hingga menghubungkan antarmuka Next.js Anda menggunakan Parse SDK atau metode REST/GraphQL.
Pada akhir, Anda akan memiliki aplikasi web siap produksi dengan otentikasi pengguna yang aman dan manajemen data yang efisien.
Poin Penting
Membangun aplikasi CRUD penuh dengan Next.js dan Back4app.
Belajar merancang skema backend yang fleksibel yang disesuaikan dengan kebutuhan data Anda.
Memanfaatkan antarmuka Admin yang intuitif, seret dan lepas untuk manajemen data.
Menemukan praktik terbaik untuk penyebaran, termasuk kontainerisasi Docker dan integrasi GitHub.
﻿
Prasyarat
Sebelum Anda mulai, pastikan Anda memiliki:
Akun Back4app dengan proyek baru yang disiapkan.
Untuk panduan, lihat Memulai dengan Back4app.
Lingkungan pengembangan Next.js.
Gunakan Buat Aplikasi Next atau alat serupa. Pastikan Node.js (versi 14 atau lebih baru) terinstal.
Pemahaman dasar tentang JavaScript, Next.js, dan integrasi API.
Kunjungi dokumentasi Next.js untuk gambaran umum jika diperlukan.
﻿
Langkah 1 – Menyiapkan Proyek Anda
Inisialisasi Proyek Back4app Baru
Masuk ke akun Back4app Anda.
Klik tombol “Aplikasi Baru” di dasbor Anda.
Masukkan nama proyek: Basic-CRUD-App-NextJS dan ikuti petunjuk.
Buat Proyek Baru
﻿
Proyek baru Anda muncul di dasbor, berfungsi sebagai inti untuk backend Anda.
Buat Aplikasi Next.js Anda
Buka terminal Anda dan jalankan:
Bash
npx create-next-app@latest basic-crud-app-nextjs
npx create-next-app@latest basic-crud-app-nextjs
﻿
Beralih ke direktori proyek Anda:
Bash
cd basic-crud-app-nextjs
cd basic-crud-app-nextjs
﻿
Perintah ini menyiapkan kerangka proyek Next.js yang siap untuk disesuaikan.
﻿
Langkah 2 – Membuat Skema Database Anda
Menyusun Model Data Anda
Untuk aplikasi CRUD ini, Anda akan membuat koleksi yang penting. Di bawah ini adalah dua koleksi utama dengan rincian bidang yang memungkinkan fungsionalitas inti.
1. Koleksi Item
Koleksi ini menyimpan rincian tentang setiap item.
Bidang
Tipe Data
Deskripsi
_id
ObjectId
Pengidentifikasi unik yang dihasilkan secara otomatis.
judul
String
Nama atau judul item.
deskripsi
String
Ringkasan singkat tentang item tersebut.
dibuat_pada
Tanggal
Stempel waktu ketika item dibuat.
diperbarui_pada
Tanggal
Timestamp untuk pembaruan terbaru.
2. Koleksi Pengguna
Koleksi ini menangani profil pengguna dan data autentikasi.
Bidang
Tipe Data
Deskripsi
_id
ObjectId
Pengidentifikasi unik yang dihasilkan secara otomatis.
nama pengguna
String
Nama pengguna yang unik untuk pengguna.
email
String
Alamat email yang unik.
hash_kata_sandi
String
Kata sandi yang di-hash dengan aman untuk otentikasi pengguna.
dibuat_pada
Tanggal
Stempel waktu ketika akun dibuat.
diperbarui_pada
Tanggal
Timestamp untuk pembaruan akun terakhir.
Anda dapat secara manual mendefinisikan koleksi ini di dasbor Back4app dengan membuat kelas baru untuk setiap koleksi dan menambahkan kolom yang relevan.
Buat Kelas Baru
﻿
Buat kolom dengan memilih tipe data yang sesuai, memberi nama kolom, dan mengatur default atau persyaratan.
Buat Kolom
﻿
﻿
Menggunakan Asisten AI Back4app untuk Pengaturan Skema
Asisten AI Back4app menyederhanakan pembuatan skema basis data. Deskripsikan koleksi dan kolom yang Anda inginkan, dan biarkan asisten secara otomatis menghasilkan strukturnya.
Langkah-langkah untuk Menggunakan Asisten AI:
Buka Asisten AI:
Temukan di menu dasbor Back4app Anda.
Deskripsikan Model Data Anda:
Tempelkan prompt rinci yang menjelaskan koleksi dan persyaratan kolom Anda.
Tinjau dan Terapkan:
Periksa skema yang dihasilkan dan terapkan dalam proyek Anda.
Contoh Prompt
Text
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
Metode ini tidak hanya menghemat waktu tetapi juga memastikan skema Anda konsisten dan dioptimalkan.
﻿
Langkah 3 – Mengaktifkan Antarmuka Admin & Fitur CRUD
Menjelajahi Antarmuka Admin
Antarmuka Admin Back4app menawarkan solusi tanpa kode untuk mengelola data backend Anda. Dengan sistem drag-and-drop yang intuitif, Anda dapat dengan mudah melakukan operasi CRUD.
Mengaktifkan Antarmuka Admin
Navigasikan ke bagian “Lainnya” di dasbor Back4app Anda.
Klik pada “Aplikasi Admin” lalu pilih “Aktifkan Aplikasi Admin.”
Konfigurasikan kredensial admin Anda dengan mengatur pengguna admin pertama Anda. Ini juga menetapkan peran seperti B4aAdminUser dan koleksi sistem yang diperlukan.
Aktifkan Aplikasi Admin
﻿
Setelah aktivasi, masuk ke Antarmuka Admin untuk mulai mengelola data Anda.
Dasbor Aplikasi Admin
﻿
Melaksanakan Operasi CRUD melalui Antarmuka Admin
Di dalam Antarmuka Admin Anda dapat:
Buat Rekaman: Gunakan tombol “Tambah Rekaman” di dalam koleksi (misalnya, Item) untuk memasukkan data baru.
Lihat atau Perbarui Rekaman: Klik pada sebuah rekaman untuk memeriksa atau memodifikasi bidangnya.
Hapus Rekaman: Gunakan opsi hapus untuk menghapus entri yang sudah tidak relevan.
Antarmuka yang disederhanakan ini membuat pengelolaan data menjadi mudah dan efisien.
﻿
Langkah 4 – Menghubungkan Next.js ke Back4app
Dengan backend Anda sudah disiapkan, langkah selanjutnya adalah menghubungkan aplikasi Next.js Anda.
Opsi A: Menggunakan Parse SDK
Instal Parse SDK:
Bash
npm install parse
npm install parse
﻿
Inisialisasi Parse di Aplikasi Next.js Anda:
Buat file (misalnya, lib/parseConfig.js):
JS
// lib/parseConfig.js
import Parse from 'parse';

// Replace with your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// lib/parseConfig.js
import Parse from 'parse';

// Replace with your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
Integrasikan Parse di Halaman Next.js:
Sebagai contoh, buat halaman untuk mengambil dan menampilkan item.
JS
// pages/index.js
import { useEffect, useState } from 'react';
import Parse from '../lib/parseConfig';

export default function Home() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const loadItems = async () => {
      const Items = Parse.Object.extend('Items');
      const query = new Parse.Query(Items);
      try {
        const results = await query.find();
        setItems(results);
      } catch (error) {
        console.error('Error retrieving items:', error);
      }
    };
    loadItems();
  }, []);

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Item List</h1>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            <strong>{item.get('title')}</strong> - {item.get('description')}
          </li>
        ))}
      </ul>
    </div>
  );
}
// pages/index.js
import { useEffect, useState } from 'react';
import Parse from '../lib/parseConfig';

export default function Home() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const loadItems = async () => {
      const Items = Parse.Object.extend('Items');
      const query = new Parse.Query(Items);
      try {
        const results = await query.find();
        setItems(results);
      } catch (error) {
        console.error('Error retrieving items:', error);
      }
    };
    loadItems();
  }, []);

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Item List</h1>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            <strong>{item.get('title')}</strong> - {item.get('description')}
          </li>
        ))}
      </ul>
    </div>
  );
}
﻿
Opsi B: Menggunakan REST atau GraphQL
Jika Anda lebih suka tidak menggunakan Parse SDK, Anda dapat mengelola operasi CRUD dengan REST atau GraphQL. Misalnya, untuk mengambil item melalui REST:
JS
const fetchItems = async () => {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Items fetched:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
};

fetchItems();
const fetchItems = async () => {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Items fetched:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
};

fetchItems();
﻿
Integrasikan panggilan API ini ke dalam komponen Next.js Anda sesuai kebutuhan.
﻿
Langkah 5 – Mengamankan Backend Anda
Mengimplementasikan Daftar Kontrol Akses (ACL)
Amankan data Anda dengan menetapkan ACL ke objek. Misalnya, untuk membuat item yang hanya dapat diakses oleh pemiliknya:
JS
async function addPrivateItem(itemDetails, owner) {
  const Items = Parse.Object.extend('Items');
  const newItem = new Items();
  newItem.set('title', itemDetails.title);
  newItem.set('description', itemDetails.description);

  // Configure ACL: owner-only read and write
  const acl = new Parse.ACL(owner);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  newItem.setACL(acl);

  try {
    const savedItem = await newItem.save();
    console.log('Private item added:', savedItem);
  } catch (error) {
    console.error('Error adding item:', error);
  }
}
async function addPrivateItem(itemDetails, owner) {
  const Items = Parse.Object.extend('Items');
  const newItem = new Items();
  newItem.set('title', itemDetails.title);
  newItem.set('description', itemDetails.description);

  // Configure ACL: owner-only read and write
  const acl = new Parse.ACL(owner);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  newItem.setACL(acl);

  try {
    const savedItem = await newItem.save();
    console.log('Private item added:', savedItem);
  } catch (error) {
    console.error('Error adding item:', error);
  }
}
﻿
Mengonfigurasi Izin Tingkat Kelas (CLPs)
Di dalam dasbor Back4app, sesuaikan CLPs untuk setiap koleksi untuk membatasi akses data hanya untuk pengguna yang berwenang.
﻿
Langkah 6 – Menerapkan Autentikasi Pengguna
Menyiapkan Akun Pengguna
Back4app memanfaatkan kelas Pengguna bawaan Parse untuk autentikasi. Di aplikasi Next.js Anda, kelola pendaftaran dan login seperti yang ditunjukkan di bawah ini:
JS
// pages/signup.js
import { useState } from 'react';
import Parse from '../lib/parseConfig';

export default function SignUp() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');

  const registerUser = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', username);
    user.set('password', password);
    user.set('email', email);

    try {
      await user.signUp();
      alert('Registration successful!');
    } catch (error) {
      alert('Registration failed: ' + error.message);
    }
  };

  return (
    <form onSubmit={registerUser}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">Register</button>
    </form>
  );
}
// pages/signup.js
import { useState } from 'react';
import Parse from '../lib/parseConfig';

export default function SignUp() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');

  const registerUser = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', username);
    user.set('password', password);
    user.set('email', email);

    try {
      await user.signUp();
      alert('Registration successful!');
    } catch (error) {
      alert('Registration failed: ' + error.message);
    }
  };

  return (
    <form onSubmit={registerUser}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">Register</button>
    </form>
  );
}
﻿
Pendekatan serupa dapat digunakan untuk manajemen login dan sesi. Anda juga dapat mengaktifkan fitur tambahan seperti login sosial, verifikasi email, dan pemulihan kata sandi melalui dasbor Back4app.
﻿
Langkah 7 – Menerapkan Frontend Next.js Anda
Opsi penerapan Back4app memungkinkan Anda untuk menghosting aplikasi Next.js Anda dengan mudah, baik melalui integrasi GitHub atau kontainer Docker.
7.1 Membangun Versi Produksi Anda
Buka direktori proyek Anda di terminal.
Jalankan perintah build:
Bash
npm run build
npm run build
﻿
Ini menghasilkan folder .next yang berisi file statis dan server-rendered yang dioptimalkan.
﻿
7.2 Mengorganisir dan Mengunggah Kode Anda
Repositori Anda harus berisi semua file sumber untuk aplikasi Next.js Anda. Struktur yang umum mungkin adalah:
Text
basic-crud-app-nextjs/
├── node_modules/
├── pages/
│   ├── index.js
│   └── signup.js
├── lib/
│   └── parseConfig.js
├── public/
│   └── favicon.ico
├── package.json
└── README.md
basic-crud-app-nextjs/
├── node_modules/
├── pages/
│   ├── index.js
│   └── signup.js
├── lib/
│   └── parseConfig.js
├── public/
│   └── favicon.ico
├── package.json
└── README.md
﻿
Contoh: lib/parseConfig.js
JS
// lib/parseConfig.js
import Parse from 'parse';

// Insert your Back4app credentials here
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// lib/parseConfig.js
import Parse from 'parse';

// Insert your Back4app credentials here
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
Contoh: pages/index.js
(Lihat potongan kode yang disediakan di Langkah 4)
Mengirim Kode Anda ke GitHub
Inisialisasi repositori Git:
Bash
git init
git init
﻿
Tambahkan semua file:
Bash
git add .
git add .
﻿
Kompilasi perubahan Anda:
Bash
git commit -m "Initial commit of Next.js CRUD application"
git commit -m "Initial commit of Next.js CRUD application"
﻿
Buat repositori GitHub:
Misalnya, beri nama basic-crud-app-nextjs.
Dorong kode Anda:
Bash
git remote add origin https://github.com/your-username/basic-crud-app-nextjs.git
git push -u origin main
git remote add origin https://github.com/your-username/basic-crud-app-nextjs.git
git push -u origin main
﻿
﻿
7.3 Mengintegrasikan dengan Web Deployment Back4app
Akses Web Deployment:
Masuk ke dasbor Back4app Anda, navigasikan ke proyek Anda, dan pilih fitur Web Deployment.
Hubungkan akun GitHub Anda:
Ikuti petunjuk untuk menghubungkan repositori Anda.
Pilih Repositori dan Cabang Anda:
Pilih repositori (misalnya, basic-crud-app-nextjs) dan cabang (misalnya, main) yang berisi kode Anda.
﻿
7.4 Mengonfigurasi Pengaturan Deployment
Perintah Build:
Jika repositori Anda tidak menyertakan folder .next yang sudah dibangun, tentukan perintah (misalnya, npm run build).
Direktori Output:
Atur direktori output ke .next sehingga Back4app tahu di mana file-file yang telah dikompilasi berada.
Variabel Lingkungan:
Tambahkan variabel lingkungan yang diperlukan, seperti kunci API.
﻿
7.5 Mengemas Aplikasi Next.js Anda dengan Docker
Jika Anda lebih suka Docker untuk penyebaran, sertakan sebuah Dockerfile di repositori Anda:
Dockerfile
# Use an official Node runtime as the base image
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy the source code
COPY . .

# Build the Next.js application
RUN npm run build

# Use Nginx to serve the built app
FROM nginx:stable-alpine
COPY --from=build /app/.next /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use an official Node runtime as the base image
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy the source code
COPY . .

# Build the Next.js application
RUN npm run build

# Use Nginx to serve the built app
FROM nginx:stable-alpine
COPY --from=build /app/.next /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
Pilih opsi penyebaran Docker di Back4app untuk mengemas dan menyebarkan aplikasi Anda.
﻿
7.6 Meluncurkan Aplikasi Anda
Sebarkan Aplikasi Anda:
Klik tombol Sebarkan di Back4app.
Pantau Proses Pembangunan:
Back4app akan mengambil kode Anda, menjalankan perintah build, dan menyebarkan aplikasi Anda.
Akses Aplikasi Langsung Anda:
Setelah penyebaran selesai, URL akan disediakan di mana aplikasi Next.js Anda dihosting.
﻿
7.7 Memverifikasi Penyebaran Anda
Kunjungi URL yang Diberikan:
Buka URL di browser Anda.
Uji Fungsionalitas:
Pastikan bahwa halaman Anda dimuat dengan benar dan semua operasi CRUD berfungsi.
Perbaiki jika Diperlukan:
Gunakan alat pengembang browser dan log Back4app untuk mendiagnosis masalah.
﻿
Langkah 8 – Kesimpulan dan Langkah Selanjutnya
Selamat! Anda telah berhasil membangun aplikasi CRUD yang kuat dengan Next.js dan Back4app. Anda telah mengonfigurasi proyek Anda, merancang koleksi yang disesuaikan, dan menghubungkan frontend Next.js Anda dengan backend yang aman.
Langkah Selanjutnya:
Tingkatkan Frontend Anda:
Perluas aplikasi Next.js Anda dengan fitur-fitur canggih seperti tampilan rinci, fungsionalitas pencarian, atau pembaruan waktu nyata.
Tingkatkan Backend Anda:
Jelajahi Cloud Functions, integrasi pihak ketiga, atau kontrol akses tambahan.
Terus Belajar:
Kunjungi dokumentasi Back4app dan sumber daya Next.js untuk optimasi dan kustomisasi lebih lanjut.
Dengan mengikuti tutorial ini, Anda sekarang memiliki keterampilan untuk membuat aplikasi CRUD yang dapat diskalakan dan aman menggunakan Next.js dan Back4app. Selamat coding!
Bidang	Tipe Data	Deskripsi
_id	ObjectId	Pengidentifikasi unik yang dihasilkan secara otomatis.
judul	String	Nama atau judul item.
deskripsi	String	Ringkasan singkat tentang item tersebut.
dibuat_pada	Tanggal	Stempel waktu ketika item dibuat.
diperbarui_pada	Tanggal	Timestamp untuk pembaruan terbaru.
Bidang	Tipe Data	Deskripsi
_id	ObjectId	Pengidentifikasi unik yang dihasilkan secara otomatis.
nama pengguna	String	Nama pengguna yang unik untuk pengguna.
email	String	Alamat email yang unik.
hash_kata_sandi	String	Kata sandi yang di-hash dengan aman untuk otentikasi pengguna.
dibuat_pada	Tanggal	Stempel waktu ketika akun dibuat.
diperbarui_pada	Tanggal	Timestamp untuk pembaruan akun terakhir.
Diperbarui 13 Feb 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Cara Membangun Aplikasi CRUD Dasar dengan PHP?
BERIKUTNYA
Bagaimana Membangun Aplikasi CRUD Dasar dengan Angular?