подключение следующего js API к

pnpm create next-app next_api_routes
code .
pnpm run dev
Войти в полноэкранный режим

Выйти из полноэкранного режима

//hello.js bawaan



export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

Войти в полноэкранный режим

Выйти из полноэкранного режима

следующий по умолчанию JSON API

давайте добавим некоторые данные hello.js Api

//hello.js

// Next.js API route support: 

export default function handler(req, res) {
  res.status(200).json({ 
    success : true,
    data : [
      {
        id : 1,
        username : "andiismail"
      },
      {
        id : 2,
        username : "kakak"
      },
      {
        id : 3,
        username : "aan"
      },
    ]
  })
}

Войти в полноэкранный режим

Выйти из полноэкранного режима

Затем мы создаем папку блогов> read.js внутри папки страниц> API

//read.js

export default function handler (req, res){

    console.info(req)

    res.status(200).json({
        success : true
    })
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

консоль пуста

отображение командной строки на стороне клиента, мы пытаемся добавить пустой запрос

командный запрос

изображение cmd над запросом все еще пусто. следующий комплект будет записывать URL-адрес в запрос, как добавить .query console.info(req.query)

пустой вид консоли
консоль пуста

cmd, мы можем захватить запрос из запроса, отправленного со стороны клиента

команда

используя метод http «GET». Далее мы захватим запрос запроса

//read.js

export default function handler (req, res){
    console.info(req.query)
    res.status(200).json({
        success : true,
        query : req.query
    })
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

показать успех и запросить запрос

Далее мы создадим фиктивный массив, содержащий 3 объекта.

//read.js

const dummyBlogs = [
    {
        id : 1,
        title : "Ini blog pertama saya",
        body : "Ini body pertama saya",
        banner : "
    },
    {
        id : 2,
        title : "Ini blog kedua saya",
        body : "Ini body kedua saya",
        banner : "
    },
    {
        id : 3,
        title : "Ini blog ketiga saya",
        body : "Ini body ketiga saya",
        banner : "
    },
]
export default function handler (req, res){
    console.info(req.query)
    res.status(200).json({
        success : true,
        // query : req.query
        data : dummyBlogs
    })
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

успех, чем даты

отображает данные об успехах и dummyBlogs. затем создаем create.js в папке blogs, статус 201 для create означает, что данные были изменены на стороне базы данных

//create.js

export default function handler(req, res){
    res.status(201).json({
        success :true,
        message : "data berhasil disimpan..."
    })
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Создайте

//create.js

export 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..."
    })
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Изображение не найдено

Далее мы получим данные для API, которые ранее были в папке блогов, а именно crate.js и read.js. измените index.js на index.jsx. удалить все и оставить главную голову

//index.jsx

import 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=" />
      </Head>
      <main className={styles.main}>
      </main>
    </div>
  )
}

Войти в полноэкранный режим

Выйти из полноэкранного режима

для извлечения данных в следующем js мы можем использовать статические реквизиты get, получить реквизиты на стороне сервера, и мы можем выполнять огневые попадания на стороне клиента, как и в react js, мы создаем состояние, затем мы создаем функцию обработки данных, а затем используем sueeffect для рендеринга. который мы используем для получения реквизитов на стороне сервера.

//index.jsx

import 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=" />
      </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("
  const { data } = await result.json()
  return {
    props : {
      data : data //steleh membuat data kita masukkan ke Home()
    }
  }
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

отображение переменных данных может быть двумя способами, потому что объект данных состоит из успеха и данных:

bisa const { data } = await result.json() или же

const data = await result.json()
return {
    props : {
      data : data.data
    }
  }
Войти в полноэкранный режим

Выйти из полноэкранного режима

индекс js

далее мы создадим dashboard.jsx на страницах

//dashboard.jsx

export default function Dashboard() {

    return (
        <div className={StyleSheet.main}>
            <form className="styles.form" action="">
                <div>
                    <label htmlFor="title">judul</label>
                    <input type="text" id="title" required />
                </div>
                <div>
                    <label htmlFor="body">kontent</label>
                    <textarea type="text" id="body" required ></textarea>
                </div>
                <button type="submit">
                    submit
                </button>
            </form>
        </div>
    )
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

панель инструментов формы

Далее мы создаем функцию, которая обрабатывает форму

//dashboard.jsx

import styles from "../styles/Home.module.css"

export default function Dashboard() {
    const handleSubmit = (e) => {
        e.preventDefault()
        const title = e.target.title.value
        const body = e.target.body.value 

        fetch(" {
            method: "POST",
            headers: {
                "Content-Type" : "application/json"
            },
            body: JSON.stringify({ title, body })
        })
            .then(res => res.json())
            .then(data => { console.info(data) })
            .catch(err=>{console.error(err)})
    }

    return (
        <div className={styles.main}>
            <form className="styles.form" action="" onSubmit={handleSubmit}>
                <div>
                    <label htmlFor="title">judul</label>
                    <input type="text" id="title" required />
                </div>
                <div>
                    <label htmlFor="body">kontent</label>
                    <textarea type="text" id="body" required ></textarea>
                </div>
                <button type="submit">
                    submit
                </button>
            </form>
        </div>
    )
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

форма ручки берсил

далее мы добавим тело запроса в create.js

//create,js

export 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...",
        body :req.body //tambahkan ini
    })
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

показать тело и заголовок

мы отображаем заголовки в консоли

create.js

export 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...",
        body: req.body, //tambahkan ini
        headers : req.headers
    })
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

добавить заголовок

призма паутина

pnpm install prisma
npx prisma init

мы изменим posgre на sqlite db в .env

//.env

DATABASE_URL="file:./db.sqlite"
Войти в полноэкранный режим

Выйти из полноэкранного режима

//schema.prisma

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

model Blogs {
  id        Int      @id @default(autoincrement())
  title     String
  body      String
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

Войти в полноэкранный режим

Выйти из полноэкранного режима

npx prisma db push
npx prisma studio

ранее установленный клиент prism,

Установить призма-клиент

призменный стол, который мы сделали

Далее нам нужен коннектор для подключения нашей базы данных.
в prism создаем db.js

//db.js

import { PrismaClient } from "@prisma/client"

const db = new PrismaClient()
export default db
Войти в полноэкранный режим

Выйти из полноэкранного режима

Далее мы импортируем базу данных в create.js.

//create.js

import db from "../../../prisma/db"

export default async 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..."
        })
    }

    const createBlog = await db.blogs.create({
        data : req.body
    })

    res.status(201).json({
        success :true,
        message: "data berhasil disimpan...",
        body : createBlog,
    })
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

//package.json

{
  "name": "next_api_routes",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@prisma/client": "^4.6.0",
    "next": "13.0.2",
    "prisma": "^4.6.0",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

//create.js

import db from "../../../prisma/db";

export default async 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...",
    });
  }

  const createBlog = await db.blogs.create({
    data: req.body,
  });

  res.status(201).json({
    success: true,
    message: "data berhasil disimpan...",
    body: createBlog,
    //body: req.body,
  });
}

Войти в полноэкранный режим

Выйти из полноэкранного режима

//read.js

import db from "../../../prisma/db"

const dummyBlogs = [
    {
        id : 1,
        title : "Ini blog pertama saya",
        body : "Ini body pertama saya",
        banner : "
    },
    {
        id : 2,
        title : "Ini blog kedua saya",
        body : "Ini body kedua saya",
        banner : "
    },
    {
        id : 3,
        title : "Ini blog ketiga saya",
        body : "Ini body ketiga saya",
        banner : "
    },
]
export default async function handler (req, res){

    //console.info(req.query)
    const result = await db.blogs.findMany()
    res.status(200).json({
        success : true,
        // query : req.query
        //data : dummyBlogs
        data : result
    })
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

работают 2 сервера

pnpm run dev > localhost:3000
&& npx prisma studio > localhost:5555
Войти в полноэкранный режим

Выйти из полноэкранного режима

Панель изображений

Призменный стол изображения

Главная страница изображения

Спасибо.