✏️

Next.js 13.4のData Fetchingでウェブアプリをつくる

2023/05/29に公開

Next 13.4

Next.js 13.4のData FetchingでAPIの実装なくウェブアプリを作成することができるようになりました🙌

https://nextjs.org/docs/getting-started/react-essentials

サンプルコードを書きましたので、
参考になれば幸いです。

データの表示

https://nextjs.org/docs/app/building-your-application/data-fetching/fetching

ページ

// 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",
    },
  ];
};

データの作成

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions

設定

// 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