How to Build a Basic CRUD App with Next.js?

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 autentikasi pengguna yang aman dan manajemen data yang efisien poin penting membangun aplikasi crud lengkap dengan next js dan back4app belajar merancang skema backend yang fleksibel sesuai dengan kebutuhan data anda menggunakan 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 https //www back4app com/docs/get started/new parse app lingkungan pengembangan next js gunakan buat aplikasi next https //nextjs org/docs/api reference/create next app 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 https //nextjs org/docs untuk gambaran umum jika diperlukan langkah 1 – menyiapkan proyek anda inisialisasi proyek baru back4app 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 npx create next app\@latest basic crud app nextjs beralih ke direktori proyek anda 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 timestamp 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 stempel waktu 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 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” 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 npm install parse inisialisasi parse di aplikasi next js anda buat file (misalnya, lib/parseconfig 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; integrasikan parse di halaman next js sebagai contoh, buat halaman untuk mengambil dan menampilkan item // 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 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 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 – mengimplementasikan 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 // 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 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 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 // 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 git init tambahkan semua file git add kirim perubahan anda git commit m "initial commit of next js crud application" buat repositori github misalnya, beri nama basic crud app nextjs dorong kode anda 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 # 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 https //www back4app com/docs 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!