add: fallback:trueにして、記事を増やしたときも再ビルド不要にする (#6)

* add: fallback: trueにして新しく追加した記事でも読み込まれるようにした

* fix: 一覧画面のrevalidateを1にした

components/parts/loading/Loading.tsx

@@ -0,0 +1,7 @@
+const Loading = () => {
+  return (
+    <div>Loading...</div>
+  )
+}
+
+export default Loading

pages/articles/[id].tsx

@@ -7,6 +7,8 @@ import {
 } from 'next'
 import React from 'react'
 import { MicroCmsArticle } from '../../types/microcms/type'
+import { useRouter } from 'next/router'
+import Loading from '../../components/parts/loading/Loading'
 
 export const getStaticProps: GetStaticProps<{ article: MicroCmsArticle }> = async (context: GetStaticPropsContext<{id: string}>) => {
   const { id } = context.params
@@ -29,11 +31,19 @@ export const getStaticPaths: GetStaticPaths = async () => {
         }
       }
     }),
-    fallback: false,
+    fallback: true,
   }
 }
 
 const ArticleDetail = ({ article }: InferGetStaticPropsType<typeof getStaticProps>) => {
+  const router = useRouter()
+
+  // If the page is not yet generated, this will be displayed
+  // initially until getStaticProps() finishes running
+  if (router.isFallback) {
+    return Loading
+  }
+
   const createMarkUp = () => {
     return { __html: article.body }
   }

pages/index.tsx

@@ -1,18 +1,20 @@
 import Head from 'next/head'
 import { apiClient } from '../modules/apiClient'
 import {
-  GetStaticPaths,
+  GetStaticProps,
   InferGetStaticPropsType
 } from 'next'
 import ArticleListItem from '../components/article/ArticleListItem'
+import { MicroCmsArticle } from '../types/microcms/type'
 
-export const getStaticProps = async () => {
+export const getStaticProps: GetStaticProps<{articles: MicroCmsArticle[]}> = async () => {
   const articles = (await apiClient.articles.$get()).contents
 
   return {
     props: {
       articles,
     },
+    revalidate: 1,
   }
 }