Next 13.4
Next.js 13.4のData FetchingでAPIの実装なくウェブアプリを作成することができるようになりました🙌
サンプルコードを書きましたので、
参考になれば幸いです。
データの表示
ページ
// src/app/example/page.tsx
import { getAllExample } from "@/app/actions/example";
export default async function Page() {
const examples = await getAllExample();
return (
<>
{examples.map((example) => (
<div key={example.id}>{example.message}</div>
))}
</>
);
}
取得
// src/app/actions/example.ts
"use server";
export const getAllExample = async () => {
return [
{
id: "example-1",
message: "Example 1",
},
{
id: "example-2",
message: "Example 2",
},
{
id: "example-3",
message: "Example 3",
},
];
};
データの作成
設定
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
serverActions: true,
},
};
module.exports = nextConfig;
ページ
// src/app/actions/example/new/page.tsx
import { New } from "@/app/example/new/new";
export default async function Page() {
return (
<>
<New />
</>
);
}
ページ コンポーネント
// src/app/actions/example/new/new.tsx
"use client";
import { useState } from "react";
import { createExample } from "@/app/actions/example";
export const New = () => {
const [message, setMessage] = useState("placeholder");
return (
<>
<div>{message}</div>
<button
onClick={async () => {
const data = await createExample();
setMessage(data.message);
}}
>
Create
</button>
</>
);
};
作成
// src/app/actions/example.ts
"use server";
export const createExample = async () => {
return {
message: "Example",
};
};
Discussion