📑
tailwindcss + next.js、wordpress APIを読込む SSG作成
概要:
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する。アップデート
....
Discussion