Next.js-3.API通信編-

Next.js-3.API通信編-

Laravel(バックエンド) + Next.js(フロントエンド)の構成例

API通信編ではjson-serverにてバックエンドを構築しましたが、より実践的にバックエンドをLaravelを用いた場合の構成例と各種設定について説明します。結論 → Laravel を API サーバーとして使い、Next.js でフ...
Next.js-3.API通信編-

fetchを使ったAPI通信(Next.js)その⑤

Delete(データ削除)app/components/DeleteDog.js"use client";export default function DeleteDog({ dogs, setDogs }) { const delete...
Next.js-3.API通信編-

fetchを使ったAPI通信(Next.js)その④

データ更新(Update)app/components/UpdateDog.js"use client";import { useState } from "react";export default function UpdateDog(...
Next.js-3.API通信編-

fetchを使ったAPI通信(Next.js)その③

データ追加(Create)app/components/CreatDog.js"use client";import { useState } from "react";export default function CreateDog(p...
Next.js-3.API通信編-

fetchを使ったAPI通信(Next.js)その②

データ取得(Read)app/components/ReadDogs.js"use client";import { useEffect } from "react";export default function ReadDogs(pro...
Next.js-3.API通信編-

fetchを使ったAPI通信(Next.js)その①

本章よりfetchを使ったAPI通信について学んでいきます。API通信とはAPI(Application Programming Interface)通信とは、アプリ同士がデータをやり取りする仕組みのことです。Next.jsはフロントエンド...