Temukan kekuatan Mongoose dan bagaimana Anda dapat menggunakannya untuk mengelola data untuk aplikasi web sederhana.

Next.js adalah framework JavaScript full-stack serbaguna yang dibangun di atas React, mendukung fitur utamanya seperti JSX, komponen, dan hook. Beberapa fitur inti Next.js termasuk perutean berbasis file, CSS dalam JS, dan rendering sisi server.

Salah satu kemampuan signifikan dari Next.js adalah kemampuannya untuk berintegrasi mulus dengan berbagai teknologi backend seperti Mongoose, memungkinkan Anda mengelola data dengan mudah secara efisien.

Dengan Mongoose, Anda dapat dengan mudah menentukan REST API dari aplikasi Next.js untuk menyimpan dan mengambil data dari database MongoDB.

Next.js: Full-Stack JavaScript Framework

Tidak seperti React, Next.js dianggap sebagai full-stack web framework karena menyediakan solusi lengkap untuk membangun aplikasi web yang dirender di sisi server.

Ini karena ia menawarkan fitur yang memungkinkan untuk bekerja pada front-end dan back-end aplikasi dari satu direktori proyek. Anda tidak perlu menyiapkan folder proyek back-end terpisah untuk menerapkan fungsionalitas sisi server, terutama untuk aplikasi skala kecil.

instagram viewer

Namun, sebanyak Next.js menangani beberapa fungsi back-end, untuk membangun aplikasi full-stack skala besar, Anda mungkin ingin menggabungkannya dengan kerangka kerja backend khusus seperti Express.

Beberapa fitur inti yang memberi Next.js kemampuan full-stack meliputi:

  • Render sisi server: Next.js menyediakan dukungan bawaan untuk kemampuan rendering sisi server. Artinya, setelah klien mengirim permintaan HTTP ke server, server memproses permintaan dan merespons dengan konten HTML yang diperlukan untuk setiap halaman yang akan ditampilkan di browser.
  • Perutean: Next.js menggunakan sistem perutean berbasis halaman untuk menentukan dan mengelola berbagai rute, menangani input pengguna, dan membuat halaman dinamis tanpa harus bergantung pada pustaka pihak ketiga. Selain itu, mudah untuk ditingkatkan karena, menambahkan rute baru semudah menambahkan halaman baru seperti about.js, ke direktori halaman.
  • Titik akhir API: Next.js menyediakan dukungan bawaan untuk kemampuan sisi server yang digunakan untuk membuat titik akhir API yang mengelola permintaan HTTP dan mengembalikan data. Ini memudahkan untuk membangun fungsionalitas back-end tanpa harus menyiapkan server terpisah menggunakan kerangka kerja backend khusus seperti Express. Namun, penting untuk dicatat bahwa Next.js pada dasarnya adalah kerangka web front-end.

Siapkan Database MongoDB

Untuk memulai, mengatur database MongoDB. Alternatifnya, Anda dapat dengan cepat menjalankan database MongoDB mengonfigurasi cluster MongoDB di cloud secara gratis. Setelah database Anda aktif dan berjalan, salin string URI koneksi database.

Anda dapat menemukan kode proyek ini di sini repositori GitHub.

Siapkan Proyek Next.js

Buat direktori untuk proyek baru dan CD ke dalamnya:

mkdir nextjs-proyek
proyek cd nextjs

Kemudian instal Next.js:

npx buat-aplikasi-berikutnya nextjs-mongodb

Setelah proses instalasi selesai, instal Mongoose sebagai dependensi.

npm instal luwak

Terakhir, di direktori root proyek Anda, buat file .env baru untuk menyimpan string koneksi database Anda.

NEXT_PUBLIC_MONGO_URI = "string koneksi URI basis data"

Konfigurasi Koneksi Database

Dalam src direktori, buat folder baru dan beri nama utilitas. Di dalam folder ini, buat file baru bernama dbConfig.js dan tambahkan kode berikut ke dalamnya:

impor luwak dari'luwak';
const connectMongo = asinkron () => mongoose.connect (process.env. NEXT_PUBLIC_MONGO_URI);
eksporbawaan connectMongo;

Tentukan Model Data

Model data menentukan struktur data yang akan disimpan, termasuk jenis data dan hubungan antar data.

MongoDB menyimpan data dalam dokumen mirip JSON karena merupakan a basis data NoSQL. Mongoose menyediakan cara untuk menentukan bagaimana data dari klien Next.js harus disimpan dan diakses dari database.

Di direktori src, buat folder dan nama baru di models. Di dalam folder ini, buat file baru bernama modelpengguna.js, dan tambahkan kode di bawah ini:

impor { Skema, model, model } dari'luwak';
const userSchema = baru Skema({
 nama: Rangkaian,
 surel: {
 jenis: Rangkaian,
 diperlukan: BENAR,
 unik: BENAR,
 },
});


const Pengguna = model. Pengguna || model('Pengguna', skema pengguna);
eksporbawaan Pengguna;

Buat Titik Akhir API

Tidak seperti framework front-end lainnya, Next.js menyediakan dukungan bawaan untuk manajemen API. Ini menyederhanakan proses pembuatan API karena Anda dapat menentukannya secara langsung di proyek Next.js alih-alih menyiapkan server terpisah.

Setelah Anda menentukan rute API di dalam direktori pages/api, Next.js menghasilkan titik akhir API untuk setiap file di direktori ini. Misalnya, jika Anda membuat userV1/user.js, Next.js akan membuat titik akhir yang dapat diakses di http://localhost: 3000/api/penggunaV1/pengguna.

Di dalam halaman/api, buat folder baru dan beri nama userV1. Di dalam folder ini, buat file baru bernama pengguna.js, dan tambahkan kode di bawah ini:

impor connectMongo dari'../../../utils/dbConfig';
impor Pengguna dari'../../../model/modelpengguna';
/**
 * @param {impor('Berikutnya').NextApiRequest} req
 * @param {impor('Berikutnya').NextApiResponse} res
 */
eksporbawaanasinkronfungsiuserAPI(req, res) {
mencoba {
menghibur.catatan('TERHUBUNG KE MONGO');
menunggu connectMongo();
menghibur.catatan('TERHUBUNG KE MONGO');
jika (req.method 'POS') {
menghibur.catatan('MEMBUAT DOKUMEN');
const pengguna yang dibuat = menunggu Pengguna.buat (req.body);
menghibur.catatan('DOKUMEN YANG DIBUAT');
 res.json({ createUser });
 } kalau tidakjika (req.method 'MENDAPATKAN') {
menghibur.catatan('MENGGUNAKAN DOKUMEN');
const fetchedUsers = menunggu Pengguna.temukan({});
menghibur.catatan('DOKUMEN YANG DIKEMBALIKAN');
 res.json({ fetchedUsers });
 } kalau tidak {
melemparkanbaruKesalahan(`Metode HTTP tidak didukung: ${req.method}`);
 }
 } menangkap (kesalahan) {
menghibur.log (kesalahan);
 res.json({ kesalahan });
 }
}

Kode ini mengimplementasikan titik akhir API untuk menyimpan dan mengambil data pengguna dari database MongoDB. Ini mendefinisikan a userAPI fungsi yang mengambil dua parameter: persyaratan Dan res. Ini masing-masing mewakili permintaan HTTP masuk dan respons HTTP keluar.

Di dalam fungsi, kode terhubung ke database MongoDB dan memeriksa metode HTTP dari permintaan yang masuk.

Jika metodenya adalah permintaan POST, kode membuat dokumen pengguna baru di database menggunakan membuat metode. Sebaliknya jika a MENDAPATKAN permintaan, kode mengambil semua dokumen pengguna dari database.

Mengkonsumsi Titik Akhir API

Tambahkan kode di bawah ini ke halaman/index.js mengajukan:

  • Buat permintaan POST ke titik akhir API untuk menyimpan data di database.
    impor gaya dari'@/styles/Home.module.css';
    impor { status penggunaan } dari'reaksi';
    eksporbawaanfungsiRumah() {
    const [nama, setName] = useState('');
    const [email, setEmail] = useState('');
    const [usersResults, setUsersResults] = useState([]);
    

    const buat Pengguna = asinkron () => {
    mencoba {
    const pengguna yang dibuat = menunggu mengambil('/api/penggunaV1/pengguna', {
     metode: 'POS',
     tajuk: {
    'Jenis konten': 'aplikasi/json',
     },
     tubuh: JSON.stringifikasi({
     nama,
     surel,
     }),
     }).Kemudian((res) => res.json());
    menghibur.catatan('DOKUMEN YANG DIBUAT');
    

     namaset('');
     setEmail('');
    menghibur.log (Pengguna yang dibuat);
     } menangkap (kesalahan) {
    menghibur.log (kesalahan);
     }
     };
  • Tentukan fungsi untuk mengambil data pengguna dengan membuat permintaan HTTP ke titik akhir GET.
    const tampilanPengguna = asinkron () => {
    mencoba {
    menghibur.catatan('MENGGUNAKAN DOKUMEN');
    const fetchedUsers = menunggu mengambil('/api/penggunaV1/pengguna').Kemudian((res) =>
     res.json()
     );
    menghibur.catatan('DOKUMEN YANG DIKEMBALIKAN');

     setUsersResults (fetchedUsers);
    menghibur.log (hasilpengguna)

     } menangkap (kesalahan) {
    menghibur.log (kesalahan);
     }
     };
  • Terakhir, render elemen formulir dengan kolom input teks dan kirim serta tampilkan tombol data pengguna.
    kembali (
     <>

Terakhir, lanjutkan dan nyalakan server pengembangan untuk memperbarui perubahan dan arahkan ke http://localhost: 3000 di peramban Anda.

npm menjalankan dev

Menggunakan Next.js di Aplikasi

Next.js adalah opsi fantastis untuk membuat aplikasi web keren, baik Anda sedang mengerjakan proyek sampingan atau solusi web berskala besar. Ini menawarkan berbagai fitur dan kemampuan yang merampingkan proses pembuatan produk yang berkinerja dan terukur.

Meskipun ini terutama merupakan kerangka kerja sisi klien yang kuat, Anda juga dapat memanfaatkan kemampuan sisi servernya untuk menjalankan layanan backend dengan cepat.