Lewatlah sudah hari-hari ketika Anda harus membuat backend terpisah untuk situs web Anda. Dengan perutean API berbasis file Next.js, Anda dapat membuat hidup Anda lebih mudah dengan menulis API Anda di dalam proyek Next.js.
Next.js adalah meta-framework React dengan fitur yang menyederhanakan proses pembuatan aplikasi web siap produksi. Anda akan melihat cara membuat REST API di Next.js dan menggunakan data dari API tersebut di halaman Next.js.
Buat Proyek Next.js Menggunakan create-next-app
Anda dapat membuat proyek Next.js baru menggunakan alat CLI create-next-app. Ini menginstal paket dan file yang diperlukan untuk membantu Anda memulai membangun aplikasi Next.js.
Jalankan perintah ini di terminal untuk membuat folder Next.js baru bernama api-routes. Anda mungkin menerima prompt untuk menginstal aplikasi-buat-berikutnya.
npx membuat-Berikutnya-app api-rute
Saat perintah selesai, buka folder api-routes untuk mulai membuat rute API.
Perutean API di Next.js
Rute API berjalan di server dan memiliki banyak kegunaan seperti menyimpan data pengguna ke database atau mengambil data dari API tanpa menaikkan
Kesalahan kebijakan CORS.Di Next.js, Anda harus membuat rute API di dalam folder /pages/api. Next.js menghasilkan titik akhir API untuk setiap file di folder ini. Jika Anda menambahkan user.js ke /pages/api, Next.js akan membuat titik akhir di http://localhost: 3000/api/pengguna.
Rute API Next.js dasar memiliki sintaks berikut.
eksporbawaanfungsipawang(req, res) {
res.status (200).json({ nama: 'John Doe' })
}
Anda harus mengekspor fungsi penangan agar berfungsi.
Membuat Rute API
Buat file baru bernama todo.js di /pages/api folder untuk menambahkan rute API untuk item todo.
Mengejek Database Todo
Untuk mendapatkan todo, Anda harus membuat titik akhir GET. Untuk kesederhanaan. Tutorial ini menggunakan larik item todo alih-alih database, tetapi jangan ragu untuk menggunakan database seperti MongoDB atau MySQL.
Buat item todo di todo.js di folder root aplikasi Anda lalu tambahkan data berikut.
eksporconst todos = [
{
id: 1,
melakukan: "Lakukan sesuatu yang baik untuk seseorang yang saya sayangi",
lengkap: BENAR,
userId: 26,
},
{
id: 2,
melakukan: "Hafalkan lima puluh negara bagian dan ibu kotanya",
lengkap: PALSU,
userId: 48,
},
// todo lainnya
];
Item todo ini berasal dari situs web DummyJSON, a API REST untuk data tiruan. Anda dapat menemukan data yang tepat dari ini titik akhir todos DummyJSON.
Selanjutnya, buat rute API di /pages/api/todos.js dan tambahkan fungsi handler.
impor { semua } dari "../../melakukan";eksporfungsipawang(req, res) {
const { metode } = req;
mengalihkan (metode) {
kasus "MENDAPATKAN":
res.status(200).json(todos);
merusak;
kasus "POS":
const { todo, selesai } = req.body;
todos.dorongan({
pengenal: todos.panjang + 1,
melakukan,
lengkap,
});
res.status(200).json(todos);
merusak;
bawaan:
res.setHeader("Mengizinkan", ["MENDAPATKAN", "POS"]);
res.status(405).akhir(`Metode ${metode} Tidak Diizinkan`);
merusak;
}
}
Rute ini menangani titik akhir GET dan POST. Ini mengembalikan semua todo untuk permintaan GET dan menambahkan item todo ke database todo untuk permintaan POST. Untuk metode lain, pawang mengembalikan kesalahan.
Mengkonsumsi Rute API di Frontend
Anda telah membuat titik akhir API yang mengembalikan objek JSON yang berisi larik todo.
Untuk menggunakan API, buat fungsi bernama fetchTodos yang mengambil data dari titik akhir API. Fungsi ini menggunakan metode pengambilan tetapi Anda juga bisa gunakan Axios untuk membuat permintaan API. Kemudian panggil fungsi ini saat Anda mengklik tombol.
impor Kepala dari "berikutnya/kepala";
impor { status penggunaan } dari "reaksi";eksporbawaanfungsiRumah() {
const [todos, settodos] = useState([]);const ambilTodos = asinkron () => {
const tanggapan = menunggu mengambil("/api/todos");
const data = menunggu respon.json();
settodos (data);
};
kembali (
<div className={styles.container}>
<Kepala>
<judul>Buat Aplikasi Selanjutnya</title>
<nama meta="keterangan" konten="Dihasilkan oleh buat aplikasi berikutnya" />
<link rel="ikon" href="/favicon.ico" />
</Head>
<utama>
<tombol onClick={fetchTodos}>Dapatkan todo</button>
<ul>
{todos.map((todo) => {
kembali (
<li
style={{ color: `${todo.completed? "hijau": "merah"}` }}
key={todo.id}
>
{todo.todo}:{todo.completed}.
</li>
);
})}
</ul>
</main>
</div>
);
}
Daftar dalam cuplikan ini menampilkan item todo saat diambil.
Untuk titik akhir POST, buat fungsi baru bernama saveTodo yang membuat permintaan POST ke API. Permintaan pengambilan menyimpan item todo baru di badan dan mengembalikan semua item todo termasuk yang baru. Fungsi saveTodo kemudian menyimpannya dalam status todos.
const saveTodo = asinkron () => {
const tanggapan = menunggu mengambil("/api/todos", {
metode: "POS",
tubuh: JSON.stringify (Todo baru),
tajuk: {
"Jenis konten": "aplikasi/json",
},
});
const data = menunggu respon.json();
settodos (data);
};
Kemudian, buat formulir dengan bilah input teks untuk menerima item todo baru. Fungsi submit handler dari form ini akan memanggil fungsi saveTodo.
impor Kepala dari "berikutnya/kepala";
impor { useReducer, useState } dari "reaksi";
impor gaya dari "../styles/Home.module.css";eksporbawaanfungsiRumah() {
const [todos, settodos] = useState([]);const [Todobaru, setnewTodo] = useState({
melakukan: "",
lengkap: PALSU,
});const ambilTodos = asinkron () => {
// ambilTodos
};
const saveTodo = asinkron (e) => {
const tanggapan = menunggu mengambil("/api/todos", {
metode: "POS",
tubuh: JSON.stringify (Todo baru),
tajuk: {
"Jenis konten": "aplikasi/json",
},
});const data = menunggu respon.json();
settodos (data);
};const handleChange = (e) => {
setnewTodo({
melakukan: e.target.nilai,
});
};const handleSubmit = (e) => {
e.preventDefault();
saveTodo();
setnewTodo({
melakukan: '',
});
};kembali (
<div className={styles.container}>
<Kepala>
<judul>Buat Aplikasi Selanjutnya</title>
<nama meta="keterangan" konten="Dihasilkan oleh buat aplikasi berikutnya" />
<link rel="ikon" href="/favicon.ico" />
</Head>
<utama>
// Mengambil item todo saat diklik
<tombol onClick={fetchTodos}>Dapatkan todo</button>
// Menyimpan item todo baru saat dikirimkan
<formulir onSubmit={handleSubmit}>
<jenis masukan="teks" onChange={handleChange} value={newTodo.todo} />
</form>
<ul>
{// daftar item yang harus dilakukan}
</ul>
</main>
</div>
);
}
Pawang menambahkan todo baru ke database setiap kali pengguna mengirimkan formulir. Selain itu, fungsi ini memperbarui nilai todo menggunakan data yang diterima dari API yang kemudian menambahkan item todo baru ke dalam daftar.
Perutean API hanyalah salah satu kekuatan Next.js
Anda telah melihat bagaimana Anda membangun dan menggunakan rute Next.js API. Sekarang Anda dapat membuat aplikasi full stack tanpa meninggalkan folder proyek Next.js Anda. Perutean API adalah salah satu dari banyak manfaat yang disediakan Next.js.
Next.js juga menawarkan pengoptimalan kinerja seperti pemecahan kode, pemuatan lambat, dan dukungan CSS bawaan. Jika Anda membuat situs web yang harus cepat dan ramah SEO, Anda harus mempertimbangkan Next.js.