参考動画
完成したアプリケーション
ソースコード
下記学習メモです！
①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