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

2021.05.02に公開

Next.js

概要:

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/

参考のコード

/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する。アップデート

....