コミット

koma0504 · Apr 6, 2021 · e2f5321 · e2f5321
1 parent c5fa566
commit e2f5321
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 6 deletions.
diff --git a/next.config.js b/next.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+	images: {
+		domains: ['images.microcms-assets.io'],
+	},
+}
diff --git a/pages/blog/[id].js b/pages/blog/[id].js
@@ -1,5 +1,6 @@
 import styles from '../../styles/Home.module.scss'
 
+// pages/blog/[id].js
 export default function BlogId({ blog }) {
 	return (
 		<main className={styles.main}>
@@ -14,12 +15,13 @@ export default function BlogId({ blog }) {
 		</main>
 	);
 }
+
 // 静的生成のためのパスを指定します
 export const getStaticPaths = async () => {
 	const key = {
 		headers: { 'X-API-KEY': process.env.API_KEY },
 	};
-	const data = await fetch('https://ratio-observatory.microcms.io/api/v1/blog', key)
+	const data = await fetch('https://ratio-observatory.microcms.io/api/v1/contents', key)
 		.then(res => res.json())
 		.catch(() => null);
 	const paths = data.contents.map(content => `/blog/${content.id}`);
@@ -33,7 +35,7 @@ export const getStaticProps = async context => {
 		headers: { 'X-API-KEY': process.env.API_KEY },
 	};
 	const data = await fetch(
-		'https://ratio-observatory.microcms.io/api/v1/blog/' + id,
+		'https://ratio-observatory.microcms.io/api/v1/contents/' + id,
 		key,
 	)
 		.then(res => res.json())

diff --git a/pages/index.js b/pages/index.js
@@ -1,20 +1,34 @@
 // pages/index.js
 import Link from 'next/link';
+import Head from 'next/Head';
+import Image from 'next/image';
+
 
 export default function Home({ blog }) {
+	console.log(blog)
+
 	return (
 		<div>
+			<Head>
+				<title>My page title</title>
+				<meta name="viewport" content="initial-scale=1.0, width=device-width" />
+				<meta name="description" content="ポートフォリオサイトです" />
+				<meta property="og:title" content="My page title" key="title" />
+			</Head>
+			<header>header</header>
 			<ul>
 				{blog.map(blog => (
 					<li key={blog.id}>
+						{/* <Image alt="aaa" src={`${blog.thumbnail.url}`} width={400} height={200} /> */}
+						<img src={`${blog.thumbnail.url}`} />
 						<Link href={`blog/${blog.id}`}>
 							<a>{blog.title}</a>
 						</Link>
 					</li>
 				))}
 			</ul>
 			<footer>footer</footer>
-		</div>
+		</div >
 	);
 }
 
@@ -24,7 +38,7 @@ export const getStaticProps = async () => {
 	const key = {
 		headers: { 'X-API-KEY': process.env.API_KEY },
 	};
-	const data = await fetch('https://ratio-observatory.microcms.io/api/v1/blog', key)
+	const data = await fetch('https://ratio-observatory.microcms.io/api/v1/contents', key)
 		.then(res => res.json())
 		.catch(() => null);
 	return {

diff --git a/styles/Home.module.scss b/styles/Home.module.scss
@@ -1,6 +1,7 @@
 .main {
   width: 960px;
   margin: 0 auto;
+  background: red;
 }
 
 .title {
@@ -13,10 +14,10 @@
 
 .post {
   & > h1 {
-    font-size: 30px;
+    font-size: 90px;
     font-weight: bold;
     margin: 40px 0 20px;
-    background-color: #eee;
+    background-color: red;
     padding: 10px 20px;
     border-radius: 5px;
   }