Manajemen Data Next.js: Menyimpan dan Mengambil Data MongoDB Menggunakan Mongoose
Table of content:
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.
Baca Juga:
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.
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, siapkan database MongoDB. Alternatifnya, Anda dapat dengan cepat menjalankan database MongoDB dengan mengonfigurasi klaster MongoDB di cloud secara gratis. Setelah database Anda aktif dan berjalan, salin string URI koneksi database.
Menyiapkan Proyek Next.js
Buat direktori untuk proyek baru dan CD ke dalamnya:
mkdir nextjs-project
cd nextjs-project Kemudian instal Next.js:
npx create-next-app nextjs-mongodb Setelah proses instalasi selesai, instal Mongoose sebagai dependensi.
npm install mongoose Terakhir, di direktori root proyek Anda, buat file .env baru untuk menyimpan string koneksi database Anda.
NEXT_PUBLIC_MONGO_URI = "database URI connection string" 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:
import mongoose from 'mongoose';const connectMongo = async () => mongoose.connect(process.env.NEXT_PUBLIC_MONGO_URI);
export default 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 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:
import { Schema, model, models } from 'mongoose';const userSchema = new Schema({
name: String,
email: {
type: String,
required: true,
unique: true,
},
});
const User = models.User || model('User', userSchema);
export default User;
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 endpoint yang dapat diakses di http://localhost:3000/api/userV1/user.
Di dalam halaman/api, buat folder baru dan beri nama userV1. Di dalam folder ini, buat file baru bernama pengguna.jsdan tambahkan kode di bawah ini:
import connectMongo from '../../../utils/dbConfig';
import User from '../../../models/userModel';
* @param {import('next').NextApiRequest} req
* @param {import('next').NextApiResponse} res
*/
export default async function userAPI(req, res) {
try {
console.log('CONNECTING TO MONGO');
await connectMongo();
console.log('CONNECTED TO MONGO');
if (req.method === 'POST') {
console.log('CREATING DOCUMENT');
const createdUser = await User.create(req.body);
console.log('CREATED DOCUMENT');
res.json({ createdUser });
} else if (req.method === 'GET') {
console.log('FETCHING DOCUMENTS');
const fetchedUsers = await User.find({});
console.log('FETCHED DOCUMENTS');
res.json({ fetchedUsers });
} else {
throw new Error(`Unsupported HTTP method: ${req.method}`);
}
} catch (error) {
console.log(error);
res.json({ error });
}
}
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.
import styles from '@/styles/Home.module.css';
import { useState } from 'react';export default function Home() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [usersResults, setUsersResults] = useState([]);const createUser = async () => {
try {
const createdUser = await fetch('/api/userV1/user', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name,
email,
}),
}).then((res) => res.json());
console.log('CREATED DOCUMENT');setName('');
setEmail('');console.log(createdUser);
} catch (error) {
console.log(error);
}
}; - Tentukan fungsi untuk mengambil data pengguna dengan membuat permintaan HTTP ke titik akhir GET.
const displayUsers = async () => {
try {
console.log('FETCHING DOCUMENTS');
const fetchedUsers = await fetch('/api/userV1/user').then((res) =>
res.json()
);
console.log('FETCHED DOCUMENTS');
setUsersResults(fetchedUsers);
console.log(usersResults)
} catch (error) {
console.log(error);
}
}; - Terakhir, render elemen formulir dengan kolom input teks dan kirim serta tampilkan tombol data pengguna.
return (
<>
<main className={styles.main}>
<div className={styles.description}>
<div className={styles.form}>
<label>
Name:
<input type="text" value={name} onChange={(e) => { setName(e.target.value)}} />
</label>
<label>
Email:
<input type="email" value={email} onChange={(e) => { setEmail(e.target.value) }} />
</label>
<button onClick={createUser}>Submit data</button>
</div><div>
<button onClick={displayUsers}> Display user Data</button>
<div className={styles.description}>
{usersResults.fetchedUsers && usersResults.fetchedUsers.length > 0 && (
<ul>
{usersResults.fetchedUsers.map((user) => (
<li key={user._id}>
<p>{user.name}</p>
<p>({user.email})</p>
</li>
))}
</ul>
)}
</div>
</div>
</div>
</main>
</>
);
}
Terakhir, lanjutkan dan nyalakan server pengembangan untuk memperbarui perubahan dan arahkan ke http://localhost:3000 di peramban Anda.
npm run 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.
Artikel Terkait
