Skip to main content

Next.js 入门

¥Getting Started with Next.js

🧹 删除了集成指南

Strapi 文档团队专注于改进 Strapi 5 核心体验的文档。我们将在未来 6 个月内发布许多更改，请密切关注👀。

¥The Strapi Documentation team focuses on improving the documentation for Strapi 5's core experience. We will release many changes in the next 6 months, so please keep an eye out 👀.

因此，当前页面现在仅处于维护模式，可能未完全与 Strapi 5 保持同步，并且很快将从 docs.strapi.io 中删除并移至 Strapi 的 集成页面。

¥As a result, the present page is now in maintenance mode only, might not be fully up-to-date with Strapi 5, and will soon be removed from docs.strapi.io and moved to Strapi's integrations page.

同时，如果你想帮助我们改进此页面，请随时 contribute 到文档的 GitHub 存储库。

¥In the meantime, if you want to help us improve this page, please feel free to contribute to the documentation's GitHub repository.

本集成指南遵循 快速入门指南。你应该能够通过浏览 URL http://localhost:1337/api/restaurants 使用该 API。

¥This integration guide follows the Quick Start Guide. You should be able to consume the API by browsing the URL http://localhost:1337/api/restaurants.

如果你尚未阅读快速入门指南，则使用 Next.js 请求 Strapi API 的方式将保持不变，只是你不获取相同的内容。

¥If you haven't gone through the Quick Start Guide, the way you request a Strapi API with Next.js remains the same except that you do not fetch the same content.

创建 Next.js 应用​

¥Create a Next.js app

创建一个基本的 Next.js 应用。

¥Create a basic Next.js application.

yarn create next-app nextjs-app

使用 HTTP 客户端​

¥Use an HTTP client

许多 HTTP 客户端都可用，但在本文档中我们将使用 Axios 和 拿来。

¥Many HTTP clients are available but in this documentation we'll use Axios and Fetch.

yarn add axios

GET 请求你的集合类型​

¥GET Request your collection type

对 restaurant 集合类型执行 GET 请求以获取所有餐厅。

¥Execute a GET request on the restaurant collection type in order to fetch all your restaurants.

确保你激活了 restaurant 集合类型的 find 权限。

¥Be sure that you activated the find permission for the restaurant collection type.

Example GET request with axios
import axios from 'axios';

axios.get('http://localhost:1337/api/restaurants').then(response => {
  console.log(response.data);
});
Example response
{
  "data": [
    {
      "id": 1,
      "attributes": {
        "name": "Biscotte Restaurant",
        "description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.",
        "createdAt": "2022-07-31T09:14:12.569Z",
        "updatedAt": "2022-07-31T09:14:12.569Z",
        "publishedAt": "2022-07-31T09:14:12.569Z"
      }
    }
  ],
  "meta": {
    "pagination": {
      "page": 1,
      "pageSize": 25,
      "pageCount": 1,
      "total": 1
    }
  }
}

示例​

¥Example

./pages/index.js

import axios from 'axios';



const Home = ({ restaurants, error }) => {


  if (error) {
    return <div>An error occured: {error.message}</div>;
  }
  return (
    <ul>
      {restaurants.data.map(restaurant => (
        <li key={restaurant.id}>{restaurant.attributes.Name}</li>
      ))}
    </ul>
  );
};

Home.getInitialProps = async ctx => {
  try {
    const res = await axios.get('http://localhost:1337/api/restaurants');
    const restaurants = res.data;
    return { restaurants };
  } catch (error) {
    return { error };
  }
};

export default Home;

POST 请求你的集合类型​

¥POST Request your collection type

对 restaurant 集合类型执行 POST 请求以创建餐厅。

¥Execute a POST request on the restaurant collection type in order to create a restaurant.

确保你激活了 restaurant 集合类型的 create 权限和 category 集合类型的 find 权限。添加 ?populate=categories 查询参数以通过响应返回类别。

¥Be sure that you activated the create permission for the restaurant collection type and the find permission for the category Collection type. Add the ?populate=categories query parameter to return categories with the response.

在此示例中，已创建 japanese 类别，其 ID 为：3.

¥In this example a japanese category has been created which has the id: 3.

Example POST request with axios
import axios from 'axios';

axios
  .post('http://localhost:1337/api/restaurants/?populate=categories', {
    data: {
      name: 'Dolemon Sushi',
      description:
        'Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious',
      categories: [3],
    },
  })
  .then(response => {
    console.log(response);
  });
Example response
{
  "data": {
    "id": 2,
    "attributes": {
      "name": "Dolemon Sushi",
      "description": "Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious",
      "createdAt": "2022-07-31T09:14:12.569Z",
      "updatedAt": "2022-07-31T09:14:12.569Z",
      "publishedAt": "2022-07-31T09:14:12.566Z",
      "categories": {
        "data": [
          {
            "id": 3,
            "attributes": {
              "name": "Japanese",
              "createdAt": "2022-07-31T10:49:03.933Z",
              "updatedAt": "2022-07-31T10:49:04.893Z",
              "publishedAt": "2022-07-31T10:49:04.890Z"
            }
          }
        ]
      }
    }
  },
  "meta": {}
}

示例​

¥Example

./pages/index.js

import { useState } from 'react';
import axios from 'axios';



const Home = ({ allCategories, errorCategories }) => {


  const [modifiedData, setModifiedData] = useState({
    name: '',
    description: '',
    categories: [],
  });
  const [errorRestaurants, setErrorRestaurants] = useState(null);

  const handleChange = ({ target: { name, value } }) => {
    setModifiedData(prev => ({
      ...prev,
      [name]: value,
    }));
  };

  const handleSubmit = async e => {
    e.preventDefault();

    try {
      const response = await axios.post('http://localhost:1337/api/restaurants', {
        data: modifiedData,
      });
      console.log(response);
    } catch (error) {
      setErrorRestaurants(error);
    }
  };

  const renderCheckbox = category => {
    const { categories } = modifiedData;
    const isChecked = categories.includes(category.id);
    const handleCheckboxChange = () => {
      if (!categories.includes(category.id)) {
        handleChange({ target: { name: 'categories', value: categories.concat(category.id) } });
      } else {
        handleChange({
          target: { name: 'categories', value: categories.filter(v => v !== category.id) },
        });
      }
    };
    return (
      <div key={category.id}>
        <label htmlFor={category.id}>{category.attributes.Name}</label>
        <input
          type="checkbox"
          checked={isChecked}
          onChange={handleCheckboxChange}
          name="categories"
          id={category.id}
        />
      </div>
    );
  };
  if (errorCategories) {
    return <div>An error occured (categories): {errorCategories.message}</div>;
  }
  if (errorRestaurants) {
    return <div>An error occured (restaurants): {errorRestaurants.message}</div>;
  }
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <h3>Restaurants</h3>
        <br />
        <label>
          Name:
          <input type="text" name="name" value={modifiedData.name} onChange={handleChange} />
        </label>
        <label>
          Description:
          <input
            type="text"
            name="description"
            value={modifiedData.description}
            onChange={handleChange}
          />
        </label>
        <div>
          <br />
          <b>Select categories</b>
          <br />
          {allCategories.data.map(renderCheckbox)}
        </div>
        <br />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

Home.getInitialProps = async ctx => {
  try {
    const res = await axios.get('http://localhost:1337/api/categories');
    const allCategories = res.data;
    return { allCategories };
  } catch (errorCategories) {
    return { errorCategories };
  }
};

export default Home;

PUT 请求你的集合类型​

¥PUT Request your collection type

对 restaurant 集合类型执行 PUT 请求以更新餐厅的类别。

¥Execute a PUT request on the restaurant collection type in order to update the category of a restaurant.

确保你激活了 restaurant 集合类型的 put 权限。

¥Be sure that you activated the put permission for the restaurant collection type.

我们认为你的餐厅 ID 是 2。你的类别 ID 是 2。

¥We consider that the id of your restaurant is 2. and the id of your category is 2.

Example PUT request with axios
import axios from 'axios';

axios
  .put('http://localhost:1337/api/restaurants/2/?populate=categories', {
    data: {
      categories: [2],
    },
  })
  .then(response => {
    console.log(response);
  });
Example response
{
  "data": {
    "id": 2,
    "attributes": {
      "name": "Dolemon Sushi",
      "description": "Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious",
      "createdAt": "2022-07-31T09:14:12.569Z",
      "updatedAt": "2022-07-31T11:17:31.598Z",
      "publishedAt": "2022-07-31T09:14:12.566Z",
      "categories": {
        "data": [
          {
            "id": 2,
            "attributes": {
              "name": "Brunch",
              "createdAt": "2022-07-30T09:23:57.857Z",
              "updatedAt": "2022-07-30T09:26:37.236Z",
              "publishedAt": "2022-07-30T09:26:37.233Z"
            }
          }
        ]
      }
    }
  },
  "meta": {}
}