tailwindcss + next.js、wordpress APIを読込む SSG作成

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

概要:

tailwindcss + next.jsの作例で、wordpress APIを読み込む SSGの作成となります


環境

  • tailwindcss: 2.1.2
  • next.js : 10.1.3
  • node 14
  • wordpress 5.7.1

参考のデモページ

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


参考のコード

https://github.com/kuc-arc-f/jamstack-ex13
  • /pages/index , .env / wordpress URLを指定して読込む形です
index.js

export default function Index(data) {
  var items = data.blogs
  var json = data.json
  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 myblog_color_accent font-bold mb-0">Posts</h3>
        </div>        
        {items.map((item, index) => {
// console.log(item )
          return (
          <Link href={`/posts/${item.ID}`} >
            <a>
              <IndexRow key={item.ID}
              id={item.ID} save_id={item.ID} title={item.post_title}
              date={item.post_date} category_name={item.category_name} />       
            </a>
          </Link>
          )
        })}
      </Container>
    </Layout>

    </div>
  )
}

export async function getStaticProps() {
  var url = process.env.BASE_URL+`/api/posts.php?page=1`
  const res = await fetch( url );
  var blogs = await res.json();
  LibPagenate.init()
  var display = LibPagenate.is_paging_display(blogs.length)      
  return {
    props : {
      blogs: blogs,
      site_name : process.env.MY_SITE_NAME,
      info_text : "Sample CMSの関連記事を公開予定しております。",        
      display: display
    }
  };
}

参考のページ

  • wordpress API + Next.js SSGでJamstackする。アップデート

https://zenn.dev/knaka0209/articles/2501be7ad65d29

....