Next.JSアプリケーション Deploying to Vercel ③

# 参考動画
https://youtu.be/xc4uOzlndAk

https://github.com/developedbyed/

# 完成したアプリケーション

https://deliciousss-rouge.vercel.app/


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/a34704cf-70e2-5908-7178-23781a766ae9.png)





# ソースコード
https://github.com/iwasaki-hub/deliciousss


# spoonacular API

https://spoonacular.com/food-api

# React Splide

https://splidejs.com/guides/getting-started/

# Framer-motion
https://www.framer.com/developers/



# 下記学習メモです！

>①splideとframer-motionの使い方


### splideとframer-motionの使い方

```javascript:index.js
import { useState } from "react";
import { useEffect } from "react";
import styled from "styled-components";
import { Splide, SplideSlide } from "@splidejs/react-splide";
import "@splidejs/react-splide/css";
// import '@splidejs/react-splide/css/skyblue';
import { Link } from "react-router-dom";

const Popular = () => {
  const [popular, setPopular] = useState([]);

  useEffect(() => {
    getPopular();
  }, []);

  const getPopular = async () => {
    const check = localStorage.getItem("popular");
    if (check) {
      setPopular(JSON.parse(check));
    } else {
      const url = "https://api.spoonacular.com/recipes/random";
      const apiKey = process.env.REACT_APP_API_KEY;
      const res = await fetch(`${url}?apiKey=${apiKey}&number=9`);
      const data = await res.json();
      localStorage.setItem("popular", JSON.stringify(data.recipes));
      setPopular(data.recipes);
      console.log("Restore popular");
    }
  };

  return (
    <>
      <Wrapper>
        <h3>Popular Picks</h3>
        <Splide
          options={{
            perPage: 4,
            arrows: false,
            pagination: false,
            drag: "free",
            gap: "5rem",
          }}
        >
          {popular.length > 0 &&
            popular.map((recipe) => {
              return (
                <SplideSlide key={recipe.id}>
                  <Card>
                    <Link to={`/recipe/${recipe.id}`}>
                      <p>{recipe.title}</p>
                      <img src={recipe.image} alt={recipe.title} />
                      <Gradient />
                    </Link>
                  </Card>
                </SplideSlide>
              );
            })}
        </Splide>
      </Wrapper>

      {/* <pre>{JSON.stringify(popular[0], null, "\t")}</pre> */}
    </>
  );
};

const Wrapper = styled.div`
  margin: 4rem 0rem;
`;

const Card = styled.div`
  min-height: 25rem;
  border-radius: 2rem;
  overflow: hidden;
  position: relative;

  img {
    border-radius: 2rem;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  p {
    position: absolute;
    z-index: 10;
    left: 50%;
    bottom: 0%;
    transform: translate(-50%, 0%);
    color: white;
    width: 100%;
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
`;

const Gradient = styled.div`
  z-index: 3;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
`;

export default Popular;
```