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

# 参考動画
https://youtube.com/playlist?list=PL4cUxeGkcC9g9gP2onazU5-2M-AzA8eBw

https://github.com/iamshaunjp/nextjs-tutorial

# 完成したアプリケーション
https://ninja-list-two-opal.vercel.app/



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/a6ec69c8-09a1-03c6-50e7-19b7f63c121f.png)


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

# 下記学習メモです！
>①useRouter()の使い方と404ページの作り方
②getStaticProps()とgetStaicPaths()の使い方
③singleページの作り方
④Navbar.jsの作り方
⑤Deploying to Vercel


### useRouter()の使い方と404ページの作り方

```javascript:index.js
import Link from "next/link";
import React, { useEffect } from "react";
import { useRouter } from "next/router";

const NotFound = () => {
  const router = useRouter();

  useEffect(() => {
    setTimeout(() => {
      router.push("/");
    }, 3000);
  }, []);

  return (
    <div className="not-found">
      <h1>Oooooops...</h1>
      <h2>THat page cannot be found.</h2>
      <p>
        Go back to the{" "}
        <Link href="/">
          <a>Homepage</a>
        </Link>
      </p>
    </div>
  );
};

export default NotFound;
```

### getStaticProps()とgetStaicPaths()の使い方
```javascript:ninjas.js
import Link from "next/link";
import React from "react";
import styles from "../../styles/Ninjas.module.css";

const Ninjas = ({ ninjas }) => {
  return (
    <div>
      <h1>All Ninjas</h1>
      {ninjas.map((ninja) => (
        <Link href={"/ninjas/" + ninja.id} key={ninja.id}>
          <a className={styles.single}>
            <h3>{ninja.name}</h3>
          </a>
        </Link>
      ))}
    </div>
  );
};

export const getStaticProps = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  const data = await res.json();

  return {
    props: {
      ninjas: data,
    },
  };
};

export default Ninjas;

```

### singleページの作り方

```javascript:[id].js
import React from "react";

const Details = ({ ninja }) => {
  return (
    <div>
      <h1>{ninja.name}</h1>
      <p>{ninja.email}</p>
      <p>{ninja.website}</p>
      <p>{ninja.address.city}</p>
    </div>
  );
};

export const getStaticPaths = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  const data = await res.json();

  const paths = data.map((ninja) => {
    return {
      params: { id: ninja.id.toString() },
    };
  });

  return {
    paths: paths,
    fallback: false,
  };
};

export const getStaticProps = async (context) => {
  const id = context.params.id;

  const res = await fetch("https://jsonplaceholder.typicode.com/users/" + id);
  const data = await res.json();

  return {
    props: {
      ninja: data,
    },
  };
};

export default Details;
```

### Navbar.jsの作り方
```javascript:Navbar.js
import Image from "next/image";
import Link from "next/link";

import React from "react";

const Navbar = () => {
  return (
    <div>
      <nav>
        <div className="logo">
          <Image src="/logo.png" width={128} height={77} />
        </div>
        <Link href="/">
          <a>Home</a>
        </Link>
        <Link href="/about">
          <a>About</a>
        </Link>
        <Link href="/ninjas">
          <a>Ninja Listing</a>
        </Link>
      </nav>
    </div>
  );
};

export default Navbar;
```

# Deploying to Vercel
```terminal
git remote add origin <<url>>

git add .

git commit -m "initial"

git push -u origin main
```