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

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

https://github.com/bradtraversy/next-crash-course

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

https://nextjs-crash-course-phi.vercel.app/



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/457fffbc-8606-c645-6ec4-acdc0126f188.png)



# ソースコード
https://github.com/iwasaki-hub/nextjs-crash-course

# 下記学習メモです！

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

### getServerSideProps()の使い方

```javascript: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の使い方
```javascript:_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ページの作り方

```javascript:[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の作り方
```javascript: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
```terminal
git remote add origin <<url>>

git add .

git commit -m "initial"

git push -u origin main
```