tailwindcss + next.js、jsonファイル読込むSSGサイト

2 min read読了の目安(約2200字

概要:

tailwindcss + next.jsの作例で、外部サイトのjsonファイルを読み込む SSGの作成となります

  • tailwindcss環境設定は、前の記事と同様になります。

環境

  • tailwindcss: 2.1.2
  • next.js : 10.1.3
  • node 14
  • netlify

参考のデモページ

https://cms-kuc-jamstack-ex11.netlify.app/


参考のコード

https://github.com/kuc-arc-f/jamstack-ex11
  • /pages/index , .env / jsonファイルURLを指定して読込む形です
index.jsx

export default function Index(data) {
  var items = data.blogs
  var json = data.json
//console.log( items )    
  return (
    <div className="bg-gray-100">
    <Layout preview="">
      <Head>
        <title>{data.site_name}</title>
      </Head>
      <TopHeadBox site_name={data.site_name} info_text={data.info_text} />
      <Container key="Index">
        <div className="p-1">
          <h3 className="text-3xl text-blue-400 font-bold mb-0">Posts</h3>
        </div>        
        {items.map((item, index) => {
          var category_name = item.category.name
          return (
          <Link href={`/posts/${item.save_id}`} >
            <a>
              <IndexRow key={index}
              id={item.id} save_id={item.save_id} title={item.title}
              date={item.created_at} category_name={category_name} />       
            </a>
          </Link>
          )
        })}
      </Container>
    </Layout>
    </div>
  )
}

export async function getStaticProps() {
  var dt = LibCommon.formatDate( new Date(), "YYYY-MM-DD_hhmmss");
  var url = process.env.MY_JSON_URL+ '?' + dt
  const req = await fetch( url );
  const json = await req.json();  
  var items = json.items 
  items =  LibCommon.get_reverse_items(items)
  LibPagenate.init()
  items = LibPagenate.getOnepageItems(items, 0 , 20)  
  var display = LibPagenate.is_paging_display(items.length)      
  return {
    props : {
      blogs: items,
      json: json,
      site_name : process.env.MY_SITE_NAME,
      info_text : "Sample CMSの関連記事を公開予定しております。",        
      display: display
    }
  };
}

画面


参考のページ

  • jsonファイル編集機能など

https://zenn.dev/knaka0209/books/4ee53bad905ec2/viewer/b67f99
  • tailwindcss + next.jsで カスタムcomponent読込と、SSGサイトdeploy

https://zenn.dev/knaka0209/articles/b954ed2e85d3fa

....