Jika pada NextJS sebelumnya ketika kita membuat API handler, maka kita memanggil method didalam satu fungsi dengan sedikit logika untuk menangkap method sebuah request. Seperti dibawah ini:
// pages/api/example.js
export default function handler(req, res) {
if (req.method === 'GET') {
// Handle GET request logic here
res.status(200).json({ message: 'This is a GET request' });
} else if (req.method === 'POST') {
// Handle POST request logic here
const { data } = req.body; // Assuming you expect a JSON body
// Process the data and send a response
res.status(200).json({ message: 'This is a POST request', data });
} else {
// Handle other HTTP methods or return an error
res.status(405).json({ error: 'Method Not Allowed' });
}
}Maka pada Nextjs 13 kita bisa membuat Rest API lebih rapih layaknya sebuah rest api biasa. Berikut ini adalah sebuah API simple dengan next 13.
// app/api/user/route.ts
import { NextResponse } from 'next/server'
export async function GET(request: Request) {
const { searchParams } = new URL(request.url)
const id = searchParams.get('id')
const res = await fetch(`https://reqres.in/api/users?page=2`, {
headers: {
'Content-Type': 'application/json',
'API-Key': process.env.DATA_API_KEY,
},
})
const product = await res.json()
return NextResponse.json({ product })
}
export async function POST() {
const res = await fetch('https://to-post-data-path', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'API-Key': process.env.DATA_API_KEY,
},
body: JSON.stringify({ time: new Date().toISOString() }),
})
const data = await res.json()
return NextResponse.json(data)
}Pada Kode diatas kita membuat sebuah route api di app/api/user/route.ts
Jika pada App Route biasa kita menggunakan nama file dengan nama page.jsx/tsx , maka pada api route handler kita menamai dengan nama route.js/ts. Dengan contoh script diatas maka kita sudah bisa mengakses resource api. Gunakan postman untuk akses resorce api data
Dan kita juga bisa memanggilnya langsung didalam componen page dengan menggunakan fitur data fetching sepeti berikut:
// app/user/page.tsx
import { use } from "react";
async function getUser() {
const res = await fetch("/user");
const users = await res.json();
return users;
}
export default async function UserLayout() {
const user=await getUser()
return(
<>
{JSON.stringify(data)}
</>
)
}
Selanjutnya kita dapat mengembangkan Route API dengan lebih kompleks. Selanjutnya kita akan membuat api yang lebih kompleks
Terimakasih!
Baca Juga Artikel seri Nextjs 13 dibawah ini:
