Next.js + CMS表示作成と、netlifyにデプロイする【作例】 #Next.js #node #javascript

■ 概要:

Next.js関係で。CMSの表示系機能の作成メモとなります
・jsonファイルを読込み。コンテンツ表示する形で
編集機能は、前のindexedDBの編集機能で。
jsonファイルのエクスポートを。読込む形です
・コンテンツ編集は、jsonファイルのみ修正/再デプロイすると
　修正が反映される手順となります。
・デザイン変更等は、next.js deploy (yarn deploy) 必要となります
・投稿入力形式は、MD形式( markdown ) に対応

■ 環境

Next.js : 10.0.0
node 14

■ 参考のコード

kuc-arc-f/nextjs_3_4cms

■　デモのURL
https://next-cms-kuc.netlify.app/

■　実装など

・TOP
pages/index.js

export default class Page extends React.Component {
 constructor(props){
   super(props)
   this.state = {items: '', items_org: ''}
//console.log(this.props.data )
 }
 async componentDidMount(){
   var dt = LibCommon.formatDate( new Date(), "YYYY-MM-DD_hhmmss");
   var url = '/cms.json?' + dt
console.log(url )
   const req = await fetch( url );
   const data = await req.json(); 
//console.log(data )
   this.setState({ items: data.items })   
 } 
 tabRow(){
   const items = this.state.items
   if(items instanceof Array){
// console.log(items )
     return items.map((item, index) => {
       return (<IndexRow key={index}
         id={item.id} show_id={item.show_id} title={item.title}
         created_at={item.created_at} />        
       )
     })      
   }
 } 
 render() {
   return (
   <Layout>
     <TopHeadBox />
     <div className="body_main_wrap">
       <div className="container">
         <div className="body_wrap">
           <div id="post_items_box" className="row conte mt-4 mb-4">
             <div className="col-sm-12">
               <div id="div_news">
                 <h2 className="h4_td_title mt-2 mb-2" >Post</h2>
               </div>
             </div>
             {this.tabRow()}
           </div>
         </div>
       </div>
     </div>
   </Layout>
   )
 }
}

・show
pages/[id].js

export default class extends React.Component {
 constructor(props){
   super(props)
   this.state = { title: "", content: "", date:""}
   this.id  = this.props.id
console.log(this.id )
 }
 componentDidMount(){
   this.get_items(this.id)
 } 
 static async getInitialProps(ctx) {
   console.log(ctx.query.id)
   var id = ctx.query.id
     return {
         id: id,
     };
 }     
 async get_items(id){
   try{
     var dt = LibCommon.formatDate( new Date(), "YYYY-MM-DD_hhmmss");
     var url = '/cms.json?' + dt
console.log(url )
     const req = await fetch( url );
     const data = await req.json();
     var items = LibCommon.convert_items(data.items )
     var item  = LibCms.get_show_item( items, String(id) )
     item.content = marked(item.content)
console.log(item )
     this.setState({ 
       title: item.title, 
       content: item.content,
       date : item.created_at
     });        
   } catch (err) {
       console.log(err);
   }
 }  
 render() {
   return (
   <Layout>
     <div className="container">
       <Link href="/" >
         <a className="btn btn-outline-primary mt-2">Back</a>
       </Link>
       <hr className="mt-2 mb-2" />
       <div className="show_head_wrap">
           <i className="fas fa-home"></i> >
           {this.state.title}
       </div>
       <hr />
       <div><h1>{this.state.title}</h1>
       </div>
       date : {this.state.date} <br />  
       <hr />
         <div id="post_item"
         dangerouslySetInnerHTML={{ __html: this.state.content }} />        
     </div>
     <style>{`
     div#post_item > p > img{
       max-width : 100%;
       height : auto;
     }
     div#post_item > hr {
       height: 1px;
       background-color: #000;
       border: none;
     }
     .show_head_wrap{ font-size: 1.4rem; }
     `}</style>      
   </Layout>
   )
 }
}

■　画面

・index

・詳細

■　関連のページ

cms編集、Vue-CLI版
https://note.com/knaka0209/n/nfbe2ab41a344

Next.jsの ルーティング、リンク設定等の例
https://note.com/knaka0209/n/n6ed079cfbf94

・Next.js初級編 / マガジン

Next.js初級編｜knaka Tech-Blog｜note

...