SYNC-HP用のサンプル
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

33 lines
899B

  1. import React, { FC } from "react";
  2. import { fetchGuitars } from "../lib/strapi";
  3. import { GetServerSideProps } from "next";
  4. import { Guitar, GuitarResponse } from "../type/guitars";
  5. // ===========================
  6. // getServerSidePropsのpropsに設定したデータを引数で受け取れる
  7. // ==========================
  8. const Ssr: FC<GuitarResponse> = ({ guitars }) => {
  9. return (
  10. <div>
  11. {guitars.map((guitar: Guitar) => {
  12. return <div key={guitar.id}>{guitar.attributes.name}</div>;
  13. })}
  14. </div>
  15. );
  16. };
  17. // ===============================
  18. // サーバサイドレンダリング時にはgetServerSidePropsの中で
  19. // 表示データを作成する
  20. // ===============================
  21. export const getServerSideProps: GetServerSideProps = async () => {
  22. const guitars = await fetchGuitars();
  23. return {
  24. props: {
  25. guitars,
  26. },
  27. };
  28. };
  29. export default Ssr;