Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 9, 2022 10:54 pm GMT

Next js api routing

Next js

pnpm create next-app next_api_routescode .pnpm run dev
//hello.js bawaanhttps://nextjs.org/docs/api-routes/introductionexport default function handler(req, res) {  res.status(200).json({ name: 'John Doe' })}

api json bawaan next

coba kita tambahkan beberapa data hello.js Api

//hello.js// Next.js API route support: https://nextjs.org/docs/api-routes/introductionexport default function handler(req, res) {  res.status(200).json({     success : true,    data : [      {        id : 1,        username : "andiismail"      },      {        id : 2,        username : "kakak"      },      {        id : 3,        username : "aan"      },    ]  })}

selanjutnya kita buat folder blogs > read.js di dalam folder pages >api

//read.jsexport default function handler (req, res){    console.info(req)    res.status(200).json({        success : true    })}

console kosong

tampilan command promt disisi client, kita coba menambahkan query yang masih kosong

cmd query

gambar cmd di atas query masih kosong. selanjuntnya kit akan menangkap tulisan url kedalam query, caranya menambahkan .query console.info(req.query)

tampilan console kosong
console kosong

tampilan cmd, kita bisa menangkap query dari request yang dikirim dari sisi client

cmd

menggunakan metode "GET" http. selanjutnya kita akan menangkap request query

//read.jsexport default function handler (req, res){    console.info(req.query)    res.status(200).json({        success : true,        query : req.query    })}

tampil succes dan request querynya

selanjutnya kita akan buat dummy array yang berisi 3 object.

//read.jsconst dummyBlogs = [    {        id : 1,        title : "Ini blog pertama saya",        body : "Ini body pertama saya",        banner : "https://picsum.photos/seed/1/500/300"    },    {        id : 2,        title : "Ini blog kedua saya",        body : "Ini body kedua saya",        banner : "https://picsum.photos/seed/2/500/300"    },    {        id : 3,        title : "Ini blog ketiga saya",        body : "Ini body ketiga saya",        banner : "https://picsum.photos/seed/3/500/300"    },]export default function handler (req, res){    console.info(req.query)    res.status(200).json({        success : true,        // query : req.query        data : dummyBlogs    })}

succes dan data

menampilkan success dan data dummyBlogs. selanjutnya kita buat create.js didalam folder blogs, status 201 untuk create artinya ada data yang dirubah disisi database

//create.jsexport default function handler(req, res){    res.status(201).json({        success :true,        message : "data berhasil disimpan..."    })}

create

//create.jsexport default function handler(req, res){    //jika req method bukan post maka retur error    if (req.method!=="POST"){        return res.status(404).json({            success : false,            message : "tidak ditemukan..."        })    }    res.status(201).json({        success :true,        message : "data berhasil disimpan..."    })}

Image tidak ditemukan

selanjutnya kita akan melakukan fetching data untuk api yang telah kita sebelumnya di folder blogs yaitu crate.js dan read.js. ubah index.js menjadi index.jsx. hapus semua dan sisakan head main

//index.jsximport Head from 'next/head'import Image from 'next/image'import styles from '../styles/Home.module.css'export default function Home() {  return (    <div className={styles.container}>      <Head>        <title>Next js Api route</title>        <meta name="description" content="Generated by create next app" />        <link rel="icon" href="https://dev.to/favicon.ico" />      </Head>      <main className={styles.main}>      </main>    </div>  )}

untuk fetching data di next js bisa menggunakan get static props, get server side props, dan bisa melakukan hit api disisi client sama seperti di react js, kita buat state, kemudian kita buat handle function fething data, kemudian selanjutnya kita gunakan sueeffect untuk merender. yang kita gunakan get server side props.

//index.jsximport Head from 'next/head'import Image from 'next/image'import styles from '../styles/Home.module.css'export default function Home({data}) {  return (    <div className={styles.container}>      <Head>        <title>Next js Api route</title>        <meta name="description" content="Generated by create next app" />        <link rel="icon" href="https://dev.to/favicon.ico" />      </Head>      <main className={styles.main}>        {data.map((e)=>(          <div key={e.id}>            <h3>{e.title}</h3>            <p>{e.body}</p>          </div>        ))}      </main>    </div>  )}export async function getServerSideProps(){  const result = await fetch("http://localhost:3000/api/blogs/read")  const { data } = await result.json()  return {    props : {      data : data //steleh membuat data kita masukkan ke Home()    }  }}

menampilkan variabel data bisa dengan dua cara, karena data bentuknya objek terdiri dari success dan data :

bisa const { data } = await result.json()

const data = await result.json()return {    props : {      data : data.data    }  }

index js

1:14:39 / 2:59:12

https://github.com/andiks2018/JvalleyNext-ApiRoutingSendiri.git


Original Link: https://dev.to/andiismail/next-js-api-routing-3fcg

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To