tailwindcss + next.js, json 파일을 읽는 SSG 웹 사이트
요약:
tailwindcss + next.js의 예에서 외부 웹 사이트의 json 파일을 읽는 SSG 만들기
컨디션
프레젠테이션 페이지 참조
https://cms-kuc-jamstack-ex11.netlify.app/
참조 코드
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
}
};
}
스크린
참조 페이지
....
Reference
이 문제에 관하여(tailwindcss + next.js, json 파일을 읽는 SSG 웹 사이트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/knaka0209/articles/c8451c934ab202텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
