How to Build a Backend for NextJS?

pendahuluan dalam tutorial ini, anda akan belajar bagaimana membangun backend lengkap untuk aplikasi nextjs menggunakan back4app kami akan membahas integrasi fitur fitur penting back4app—seperti manajemen database, fungsi cloud code, api rest dan graphql, otentikasi pengguna, dan kueri waktu nyata (kueri langsung)—untuk membuat backend yang aman, skalabel, dan kuat yang berkomunikasi dengan mulus dengan frontend nextjs anda anda juga akan melihat bagaimana pengaturan cepat back4app dan lingkungan yang intuitif dapat secara drastis mengurangi waktu dan usaha dibandingkan dengan mengonfigurasi server dan database secara manual sepanjang jalan, anda akan mendapatkan pengalaman langsung dengan fungsionalitas kunci, termasuk fitur keamanan canggih, penjadwalan tugas dengan pekerjaan cloud, dan pengaturan webhook untuk integrasi eksternal pada akhir tutorial ini, anda akan siap untuk meningkatkan pengaturan dasar ini menjadi aplikasi siap produksi atau dengan mudah menggabungkan logika kustom dan api pihak ketiga sesuai kebutuhan prasyarat untuk menyelesaikan tutorial ini, anda akan membutuhkan akun back4app dan proyek back4app baru memulai dengan back4app https //www back4app com/docs/get started/new parse app jika anda tidak memiliki akun, anda dapat membuatnya secara gratis ikuti panduan di atas untuk menyiapkan proyek anda lingkungan pengembangan nextjs dasar anda dapat menyiapkannya menggunakan buat aplikasi next https //nextjs org/docs/api reference/create next app atau alat serupa pastikan anda telah menginstal node js di mesin anda node js (versi 14 atau lebih tinggi) terinstal anda akan memerlukan node js untuk menginstal paket npm dan menjalankan server pengembangan lokal menginstal node js https //nodejs org/en/download/ keterampilan dalam javascript dan konsep dasar nextjs dokumentasi resmi nextjs https //nextjs org/docs pastikan anda memiliki semua prasyarat ini sebelum anda mulai memiliki proyek back4app anda yang sudah disiapkan dan lingkungan nextjs lokal anda yang siap akan membantu anda mengikuti dengan lebih mudah langkah 1 – menyiapkan proyek back4app buat proyek baru langkah pertama dalam membangun backend nextjs anda di back4app adalah membuat proyek baru jika anda belum membuatnya, ikuti langkah langkah ini masuk ke akun back4app anda klik tombol “aplikasi baru” di dasbor back4app anda beri nama aplikasi anda (misalnya, “nextjs backend tutorial”) setelah proyek dibuat, anda akan melihatnya terdaftar di dasbor back4app anda proyek ini akan menjadi dasar untuk semua konfigurasi backend yang dibahas dalam tutorial ini sambungkan parse sdk back4app bergantung pada parse platform untuk mengelola data anda, menyediakan fitur waktu nyata, menangani otentikasi pengguna, dan lainnya menghubungkan aplikasi nextjs anda ke back4app melibatkan pemasangan paket parse npm dan menginisialisasinya dengan kredensial dari dasbor back4app anda ambil kunci parse anda di dasbor back4app anda, navigasikan ke bagian “pengaturan aplikasi” atau “keamanan & kunci” untuk menemukan id aplikasi dan kunci javascript anda juga akan menemukan url server parse (sering dalam format https //parseapi back4app com ) pasang parse sdk di proyek nextjs anda npm install parse jika anda menggunakan yarn, anda dapat menginstalnya dengan yarn add parse inisialisasi parse di aplikasi nextjs anda dalam proyek nextjs, anda dapat membuat file utilitas (misalnya, parseconfig js ) di folder seperti lib lib/parseconfig js // lib/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; file ini memastikan bahwa setiap kali anda mengimpor parse di halaman nextjs atau rute api anda, itu sudah dikonfigurasi sebelumnya untuk terhubung ke instance back4app spesifik anda dengan menyelesaikan langkah ini, anda telah membangun koneksi yang aman antara front end nextjs anda dan backend back4app semua permintaan dan transaksi data dialirkan dengan aman melalui sdk ini, mengurangi kompleksitas panggilan rest atau graphql manual (meskipun anda masih dapat menggunakannya jika diperlukan) langkah 2 – menyiapkan database menyimpan dan mengambil data dengan proyek back4app anda yang sudah disiapkan dan sdk parse terintegrasi ke dalam aplikasi nextjs anda, anda sekarang dapat mulai menyimpan dan mengambil data cara termudah untuk membuat catatan adalah dengan menggunakan kelas parse object // example create a todo item import parse from ' /lib/parseconfig'; async function createtodoitem(title, iscompleted) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); todo set('iscompleted', iscompleted); try { const savedtodo = await todo save(); console log('todo saved successfully ', savedtodo); return savedtodo; } catch (error) { console error('error saving todo ', error); } } // example query all todo items async function fetchtodos() { const todo = parse object extend('todo'); const query = new parse query(todo); try { const results = await query find(); console log('fetched todo items ', results); return results; } catch (error) { console error('error fetching todos ', error); } } sebagai alternatif, anda dapat menggunakan endpoint rest api back4app curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo back4app juga menyediakan antarmuka graphql mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } berbagai opsi ini memungkinkan anda untuk mengintegrasikan operasi data dengan cara yang paling sesuai dengan proses pengembangan anda—baik itu melalui parse sdk, rest, atau graphql desain skema dan tipe data secara default, parse memungkinkan pembuatan skema secara langsung , tetapi anda juga dapat mendefinisikan kelas dan tipe data anda di dasbor back4app untuk kontrol yang lebih navigasikan ke bagian “database” di dasbor back4app anda buat kelas baru (misalnya, “todo”) dan tambahkan kolom yang relevan, seperti title (string) dan iscompleted (boolean) back4app juga mendukung berbagai tipe data string , number , boolean , object , date , file , pointer , array , relation , geopoint , dan polygon anda dapat memilih tipe yang sesuai untuk setiap field jika anda mau, anda juga dapat membiarkan parse secara otomatis membuat kolom ini saat anda pertama kali menyimpan objek dari aplikasi nextjs anda back4app menawarkan agen ai yang dapat membantu anda merancang model data anda buka ai agent dari dasbor aplikasi anda atau di menu jelaskan model data anda dalam bahasa sederhana (misalnya, “tolong, buat aplikasi todo baru di back4app dengan skema kelas yang lengkap ”) biarkan ai agent membuat skema untuk anda menggunakan ai agent dapat menghemat waktu anda saat mengatur arsitektur data anda dan memastikan konsistensi di seluruh aplikasi anda data relasional jika anda memiliki data relasional—katakanlah, sebuah kategori objek yang menunjuk ke beberapa todo item—anda dapat menggunakan pointers atau relations di parse misalnya, menambahkan pointer ke sebuah kategori // linking a task to a category with a pointer async function createtaskforcategory(categoryobjectid, title) { const todo = new parse object('todo'); // construct a pointer to the category const categorypointer = new parse object('category'); categorypointer id = categoryobjectid; // set fields todo set('title', title); todo set('category', categorypointer); try { return await todo save(); } catch (err) { console error('error creating task with category relationship ', err); } } saat anda melakukan query, anda juga dapat menyertakan data pointer const query = new parse query('todo'); query include('category'); const todoswithcategory = await query find(); panggilan include('category') ini mengambil detail kategori bersamaan dengan setiap todo, membuat data relasional anda dapat diakses dengan mudah query langsung untuk pembaruan waktu nyata, back4app menyediakan query langsung di aplikasi nextjs anda, anda dapat berlangganan untuk perubahan di kelas tertentu aktifkan kuery langsung di dasbor back4app anda di bawah pengaturan server pastikan “kuery langsung” diaktifkan inisialisasi langganan kuery langsung dalam kode anda lib/parseconfig js // lib/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; // live query's subdomain parse livequeryserverurl = 'wss\ //your subdomain here b4a io'; export default parse; import parse from ' /lib/parseconfig'; async function subscribetotodos(callback) { const query = new parse query('todo'); const subscription = await query subscribe(); subscription on('create', (newtodo) => { console log('new todo created ', newtodo); callback('create', newtodo); }); subscription on('update', (updatedtodo) => { console log('todo updated ', updatedtodo); callback('update', updatedtodo); }); subscription on('delete', (deletedtodo) => { console log('todo deleted ', deletedtodo); callback('delete', deletedtodo); }); return subscription; } dengan berlangganan, anda menerima notifikasi waktu nyata setiap kali todo baru dibuat, diperbarui, atau dihapus fitur ini sangat berharga untuk aplikasi kolaboratif atau dinamis di mana banyak pengguna perlu melihat data terbaru tanpa menyegarkan halaman langkah 3 – menerapkan keamanan dengan acl dan clp mekanisme keamanan back4app back4app menganggap serius keamanan dengan menyediakan access control lists (acls) dan class level permissions (clps) fitur fitur ini memungkinkan anda membatasi siapa yang dapat membaca atau menulis data berdasarkan objek atau kelas, memastikan hanya pengguna yang berwenang yang dapat memodifikasi data anda access control lists (acls) sebuah acl diterapkan pada objek individu untuk menentukan pengguna, peran, atau publik mana yang dapat melakukan operasi baca/tulis misalnya async function createprivatetodo(title, owneruser) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); // create an acl granting read/write access only to the owner const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); todo setacl(acl); try { return await todo save(); } catch (err) { console error('error saving private todo ', err); } } async function createprivatetodo(title, owneruser) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); // create an acl granting read/write access only to the owner const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); todo setacl(acl); try { return await todo save(); } catch (err) { console error('error saving private todo ', err); } } async function createprivatetodo(title, owneruser) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); // create an acl granting read/write access only to the owner const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); todo setacl(acl); try { return await todo save(); } catch (err) { console error('error saving private todo ', err); } } ketika anda menyimpan objek, ia memiliki acl yang mencegah siapa pun kecuali pengguna yang ditentukan untuk membacanya atau memodifikasinya izin tingkat kelas (clp) clp mengatur izin default seluruh kelas, seperti apakah kelas tersebut dapat dibaca atau ditulis secara publik, atau jika hanya peran tertentu yang dapat mengaksesnya pergi ke dasbor back4app anda , pilih aplikasi anda, dan buka database bagian pilih sebuah kelas (misalnya, “todo”) buka izin tingkat kelas tab konfigurasikan default anda, seperti “memerlukan autentikasi” untuk baca atau tulis, atau “tidak ada akses” untuk publik izin ini menetapkan dasar, sementara acl menyempurnakan izin untuk objek individu model keamanan yang kuat biasanya menggabungkan baik clp (pembatasan luas) dan acl (pembatasan per objek yang lebih halus) untuk informasi lebih lanjut, kunjungi pedoman keamanan aplikasi langkah 4 – menulis dan menerapkan fungsi cloud cloud code adalah fitur dari lingkungan parse server yang memungkinkan anda menjalankan kode javascript kustom di sisi server—tanpa perlu mengelola server atau infrastruktur anda dengan menulis cloud code, anda dapat memperluas backend back4app anda dengan logika bisnis tambahan, validasi, pemicu, dan integrasi yang berjalan dengan aman dan efisien di parse server bagaimana cara kerjanya ketika anda menulis cloud code, anda biasanya menempatkan fungsi javascript, pemicu, dan modul npm yang diperlukan dalam sebuah main js (atau app js ) file file ini kemudian diterapkan ke proyek back4app anda, dan dieksekusi dalam lingkungan parse server karena fungsi dan pemicu ini berjalan di server, anda dapat mempercayainya untuk menangani logika rahasia, memproses data sensitif, atau melakukan panggilan api yang hanya untuk backend—proses yang mungkin tidak ingin anda ekspos langsung ke klien semua kode cloud untuk aplikasi back4app anda berjalan di dalam parse server yang dikelola oleh back4app, jadi anda tidak perlu khawatir tentang pemeliharaan server, penskalaan, atau penyediaan setiap kali anda memperbarui dan menerapkan file main js anda, parse server yang berjalan akan diperbarui dengan kode terbaru anda struktur file main js sebuah main js yang khas mungkin berisi pernyataan require untuk modul yang diperlukan (paket npm, modul node bawaan, atau file kode cloud lainnya) definisi fungsi cloud menggunakan parse cloud define() pemicu seperti parse cloud beforesave() , parse cloud aftersave() , dll modul npm yang anda instal (jika diperlukan) misalnya, anda mungkin menginstal paket seperti axios untuk melakukan permintaan http anda kemudian dapat require (atau import) di bagian atas file anda // main js // 1 import necessary modules and other cloud code files const axios = require('axios'); const report = require(' /reports'); // 2 define a custom cloud function parse cloud define('fetchexternaldata', async (request) => { const url = request params url; if (!url) { throw new error('url parameter is required'); } const response = await axios get(url); return response data; }); // 3 example of a beforesave trigger parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw new error('todo must have a title'); } }); dengan kemampuan untuk menginstal dan menggunakan modul npm, kode cloud menjadi sangat fleksibel, memungkinkan anda untuk mengintegrasikan dengan api eksternal, melakukan transformasi data, atau mengeksekusi logika sisi server yang kompleks kasus penggunaan tipikal logika bisnis misalnya, anda dapat menghitung skor pengguna dalam permainan dengan mengagregasi beberapa properti objek, dan kemudian menyimpan data tersebut secara otomatis validasi data pastikan bahwa bidang tertentu ada atau bahwa pengguna memiliki izin yang benar sebelum menyimpan atau menghapus catatan pemicu lakukan tindakan ketika data berubah (misalnya, kirim notifikasi ketika pengguna memperbarui profil mereka) integrasi terhubung dengan api atau layanan pihak ketiga misalnya, anda dapat mengintegrasikan dengan gateway pembayaran, notifikasi slack, atau platform pemasaran email langsung dari cloud code penegakan keamanan tambahkan lapisan keamanan tambahan dengan memvalidasi dan membersihkan parameter input dalam fungsi cloud code anda misalnya, anda dapat memastikan bahwa data yang masuk sesuai dengan format tertentu, menolak input yang tidak valid atau berbahaya, dan menegakkan aturan akses berdasarkan peran atau izin pengguna sebelum melakukan operasi sensitif terapkan fungsi anda berikut adalah fungsi cloud code sederhana yang menghitung panjang string teks yang dikirim dari klien main js // main js parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); mengdeploy melalui back4app cli 1 instal cli untuk linux/macos curl https //raw\ githubusercontent com/back4app/parse cli/back4app/installer sh | sudo /bin/bash untuk windows unduh b4a exe file dari halaman rilis https //github com/back4app/parse cli/releases 2 konfigurasi kunci akun anda b4a configure accountkey 3 deploy kode cloud anda b4a deploy mengdeploy melalui dashboard di dashboard aplikasi anda, pergi ke cloud code > functions salin/tempel fungsi ke dalam main js editor klik deploy memanggil fungsi anda dari lingkungan nextjs menggunakan parse sdk (misalnya, dalam rute api atau halaman) import parse from ' / /lib/parseconfig'; export default async function handler(req, res) { if (req method === 'post') { try { const text = req body text || ''; const result = await parse cloud run('calculatetextlength', { text }); return res status(200) json(result); } catch (err) { console error('error calling cloud function ', err); return res status(500) json({ error 'something went wrong' }); } } else { return res status(405) json({ error 'method not allowed' }); } } anda juga dapat memanggilnya melalui rest curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"text" "hello back4app"}' \\ https //parseapi back4app com/functions/calculatetextlength atau melalui graphql mutation { calculatetextlength(input { text "hello graphql" }) { result } } fleksibilitas ini memungkinkan anda untuk mengintegrasikan logika kustom anda ke dalam frontend nextjs anda atau klien lain yang mendukung rest atau graphql langkah 5 – mengonfigurasi autentikasi pengguna autentikasi pengguna di back4app back4app memanfaatkan kelas parse user sebagai dasar untuk otentikasi secara default, parse menangani hashing kata sandi, token sesi, dan penyimpanan yang aman ini berarti anda tidak perlu mengatur alur keamanan yang kompleks secara manual mengatur otentikasi pengguna di nextjs, anda dapat membuat pengguna baru dengan import parse from ' / /lib/parseconfig'; export async function signupuser(username, password, email) { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user signed up successfully!'); return user; } catch (error) { console error('error signing up user ', error); throw error; } } export async function loginuser(username, password) { try { const user = await parse user login(username, password); console log('user logged in ', user); return user; } catch (error) { console error('error logging in user ', error); throw error; } } melalui rest, login mungkin terlihat seperti curl x get \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ g \\ \ data urlencode 'username=alice' \\ \ data urlencode 'password=secret123' \\ https //parseapi back4app com/login manajemen sesi setelah login berhasil, parse membuat sebuah token sesi yang disimpan dalam objek pengguna anda dapat mengambil pengguna yang saat ini masuk di nextjs (misalnya, dalam rute api) seperti ini const currentuser = parse user current(); if (currentuser) { console log('currently logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } parse secara otomatis menangani sesi berbasis token di latar belakang, tetapi anda juga dapat mengelola atau mencabutnya secara manual ini berguna ketika anda perlu keluar await parse user logout(); integrasi login sosial back4app dan parse dapat terintegrasi dengan penyedia oauth populer, seperti google atau facebook , dengan menginstal paket tambahan atau menggunakan adaptor yang ada misalnya, anda dapat mengatur login facebook dengan mengonfigurasi facebook app id anda dan menggunakan parse facebookutils login() instruksi rinci bervariasi, jadi silakan merujuk ke dokumentasi login sosial https //www back4app com/docs/platform/sign in with apple const facebooklogin = async () => { try { const user = await parse facebookutils login('email'); console log(user existed() ? 'user logged in' 'user signed up and logged in'); } catch (error) { console error('error logging in with facebook ', error); } }; verifikasi email dan reset kata sandi untuk mengaktifkan verifikasi email dan reset kata sandi navigasikan ke pengaturan email di dasbor back4app anda aktifkan verifikasi email untuk memastikan pengguna baru memverifikasi kepemilikan alamat email mereka konfigurasikan alamat pengirim , template email, dan domain kustom anda jika diinginkan fitur fitur ini meningkatkan keamanan akun dan pengalaman pengguna dengan memvalidasi kepemilikan email pengguna dan menyediakan metode pemulihan kata sandi yang aman langkah 6 – menangani penyimpanan file mengunggah dan mengambil file parse menyertakan kelas parse file untuk menangani unggahan file, yang disimpan dengan aman oleh back4app import parse from ' / /lib/parseconfig'; async function uploadimage(file) { // file could come from a \<input type="file" > in a nextjs page const name = file name; const parsefile = new parse file(name, file); try { const savedfile = await parsefile save(); console log('file saved ', savedfile url()); return savedfile url(); } catch (err) { console error('error uploading file ', err); throw err; } } untuk melampirkan file ke objek dalam database, anda dapat melakukan async function createphotoobject(file) { const photo = parse object extend('photo'); const photo = new photo(); const parsefile = new parse file(file name, file); photo set('imagefile', parsefile); return await photo save(); } mengambil url file sangatlah mudah const imagefile = photo get('imagefile'); const imageurl = imagefile url(); anda dapat menampilkan imageurl ini di komponen nextjs anda dengan mengaturnya sebagai src dari tag \<img> keamanan file parse server menyediakan konfigurasi yang fleksibel untuk mengelola keamanan unggahan file contoh berikut menunjukkan bagaimana anda dapat mengatur izin untuk mengontrol siapa yang dapat mengunggah file ke server { "fileupload" { "enableforpublic" true, "enableforanonymoususer" true, "enableforauthenticateduser" true } } enableforpublic ketika diatur ke true, memungkinkan siapa saja, terlepas dari status otentikasi, untuk mengunggah file enableforanonymoususer mengontrol apakah pengguna anonim (yang belum mendaftar) dapat mengunggah file ketika diaktifkan, pengguna sementara atau tamu dapat mengunggah file enableforauthenticateduser menentukan apakah hanya pengguna yang terautentikasi yang dapat mengunggah file ini ideal untuk memastikan bahwa hanya pengguna yang tepercaya yang memiliki akses ke fungsi ini langkah 7 – penjadwalan tugas dengan cloud jobs cloud jobs pekerjaan cloud di back4app memungkinkan anda untuk menjadwalkan dan menjalankan tugas rutin di backend anda—seperti membersihkan data lama atau mengirim email ringkasan harian pekerjaan cloud yang tipikal mungkin terlihat seperti ini // main js parse cloud job('cleanupoldtodos', async (request) => { // this runs in the background, not triggered by a direct user request const todo = parse object extend('todo'); const query = new parse query(todo); // for example, remove todos older than 30 days const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); terapkan kode cloud anda dengan pekerjaan baru (melalui cli atau dasbor) pergi ke dasbor back4app > pengaturan aplikasi > pengaturan server > pekerjaan latar belakang jadwalkan pekerjaan untuk dijalankan setiap hari atau pada interval lain yang sesuai dengan kebutuhan anda pekerjaan cloud memungkinkan anda untuk mengotomatiskan pemeliharaan latar belakang atau proses berkala lainnya—tanpa memerlukan intervensi manual langkah 8 – mengintegrasikan webhook webhooks memungkinkan aplikasi back4app anda untuk mengirim permintaan http ke layanan eksternal setiap kali peristiwa tertentu terjadi ini sangat kuat untuk mengintegrasikan dengan sistem pihak ketiga seperti gerbang pembayaran (misalnya, stripe), alat pemasaran email, atau platform analitik navigasikan ke konfigurasi webhooks di dasbor back4app anda > lainnya > webhooks dan kemudian klik pada tambah webhook siapkan endpoint (misalnya, https //your external service com/webhook endpoint ) konfigurasi pemicu untuk menentukan peristiwa mana di kelas back4app anda atau fungsi cloud code yang akan memicu webhook sebagai contoh, jika anda ingin memberi tahu saluran slack setiap kali todo baru dibuat buat aplikasi slack yang menerima webhook masuk salin url webhook slack di dasbor back4app anda, atur endpoint ke url slack tersebut untuk peristiwa “rekaman baru di kelas todo ” anda juga dapat menambahkan header http atau payload kustom jika diperlukan anda juga dapat mendefinisikan webhook di cloud code dengan membuat permintaan http kustom dalam pemicu seperti beforesave, aftersave langkah 9 – menjelajahi panel admin back4app aplikasi back4app admin app adalah antarmuka manajemen berbasis web yang dirancang untuk pengguna non teknis untuk melakukan operasi crud dan menangani tugas data rutin tanpa menulis kode ini menyediakan antarmuka berbasis model , ramah pengguna yang menyederhanakan administrasi database, manajemen data kustom, dan operasi tingkat perusahaan mengaktifkan aplikasi admin aktifkan dengan pergi ke app dashboard > more > admin app dan mengklik tombol “aktifkan aplikasi admin” buat pengguna admin pertama (username/password), yang secara otomatis menghasilkan peran baru (b4aadminuser) dan kelas (b4asetting, b4amenuitem, dan b4acustomfield) dalam skema aplikasi anda pilih subdomain untuk mengakses antarmuka admin dan selesaikan pengaturannya masuk menggunakan kredensial admin yang anda buat untuk mengakses dasbor aplikasi admin baru anda setelah diaktifkan, aplikasi admin back4app memudahkan untuk melihat, mengedit, atau menghapus catatan dari database anda—tanpa memerlukan penggunaan langsung dari dasbor parse atau kode backend dengan kontrol akses yang dapat dikonfigurasi, anda dapat dengan aman membagikan antarmuka ini dengan anggota tim atau klien yang membutuhkan cara yang jelas dan mudah untuk mengelola data kesimpulan dengan mengikuti tutorial komprehensif ini, anda telah membuat backend yang aman untuk aplikasi nextjs di back4app mengonfigurasi database dengan skema kelas, tipe data, dan hubungan mengintegrasikan kueri waktu nyata (kueri langsung) untuk pembaruan data segera menerapkan langkah langkah keamanan menggunakan acl dan clp untuk melindungi dan mengelola akses data menerapkan cloud code fungsi untuk menjalankan logika bisnis kustom di sisi server mengatur otentikasi pengguna dengan dukungan untuk verifikasi email dan pengaturan ulang kata sandi mengelola unggahan file dan pengambilan, dengan kontrol keamanan file opsional menjadwalkan pekerjaan cloud untuk tugas latar belakang otomatis menggunakan webhook untuk mengintegrasikan dengan layanan eksternal menjelajahi panel admin back4app untuk manajemen data dengan front end nextjs yang solid dan backend back4app yang kuat, anda sekarang siap untuk mengembangkan aplikasi yang kaya fitur, dapat diskalakan, dan aman teruslah menjelajahi fungsionalitas yang lebih canggih, integrasikan logika bisnis anda, dan manfaatkan kekuatan back4app untuk menghemat waktu anda dalam administrasi server dan database selamat coding! langkah selanjutnya bangun aplikasi nextjs yang siap produksi dengan memperluas backend ini untuk menangani model data yang lebih kompleks, strategi caching, dan optimisasi kinerja integrasikan fitur fitur canggih seperti alur otentikasi khusus, kontrol akses berbasis peran, atau api eksternal (seperti gerbang pembayaran) periksa dokumentasi resmi back4app untuk penjelasan lebih dalam tentang keamanan canggih, penyetelan kinerja, dan analisis log jelajahi tutorial lainnya tentang aplikasi obrolan waktu nyata, dasbor iot, atau layanan berbasis lokasi anda dapat menggabungkan teknik yang dipelajari di sini dengan api pihak ketiga untuk membuat aplikasi kompleks di dunia nyata