参考動画

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

ソースコード

下記学習メモです！

①getServerSideProps()の使い方
②_documentの使い方
③singleページの作り方
④Meta.jsの作り方
⑤Deploying to Vercel

getServerSideProps()の使い方

index.js

import Head from "next/head";
import ArticleList from "../components/ArticleList";

export default function Home({ articles }) {
  return (
    <div>
     
      <Head>
        <title>WebDev News</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <ArticleList articles={articles} />
    </div>
  );
}

export const getServerSideProps = async () => {
  const res = await fetch(
    "https://jsonplaceholder.typicode.com/posts?_limit=4"
  );
  const articles = await res.json();

  return {
    props: {
      articles: articles,
    },
  };
};

_documentの使い方

_document.js

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

singleページの作り方

[id].js

import Link from "next/link";
import React from "react";
import Meta from "../../../components/Meta";

const Details = ({ article }) => {
  return (
    <>
      <Meta title={article.title} />
      <h1>{article.title}</h1>
      <p>{article.body}</p>
      <br />
      <Link href="/">
        <a>Go Back</a>
      </Link>
    </>
  );
};

// export const getStaticProps = async (context) => {
//   const res = await fetch(
//     `https://jsonplaceholder.typicode.com/posts/${context.params.id}`
//   )

//   const article = await res.json()

//   return {
//     props: {
//       article,
//     },
//   }
// }

// export const getStaticPaths = async () => {
//   const res = await fetch(`https://jsonplaceholder.typicode.com/posts`)

//   const articles = await res.json()

//   const ids = articles.map((article) => article.id)
//   const paths = ids.map((id) => ({ params: { id: id.toString() } }))

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

export const getServerSideProps = async (context) => {
  const id = context.params.id;
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  const article = await res.json();

  return {
    props: {
      article: article,
    },
  };
};

export default Details;

Meta.jsの作り方

Meta.js

import Head from 'next/head'

const Meta = ({ title, keywords, description }) => {
  return (
    <Head>
      <meta name='viewport' content='width=device-width, initial-scale=1' />
      <meta name='keywords' content={keywords} />
      <meta name='description' content={description} />
      <meta charSet='utf-8' />
      <link rel='icon' href='/favicon.ico' />
      <title>{title}</title>
    </Head>
  )
}

Meta.defaultProps = {
  title: 'WebDev Newz',
  keywords: 'web development, programming',
  description: 'Get the latest news in web dev',
}

export default Meta

Deploying to Vercel

git remote add origin <<url>>

git add .

git commit -m "initial"

git push -u origin main

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

参考動画

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

ソースコード

下記学習メモです！

getServerSideProps()の使い方

_documentの使い方

singleページの作り方

Meta.jsの作り方

Deploying to Vercel