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

参考動画

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

ソースコード

下記学習メモです！

①useRouter()の使い方と404ページの作り方
②getStaticProps()とgetStaicPaths()の使い方
③singleページの作り方
④Navbar.jsの作り方
⑤Deploying to Vercel

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

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()の使い方

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ページの作り方

[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の作り方

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

git remote add origin <<url>>

git add .

git commit -m "initial"

git push -u origin main