Buttercms ile NextJS CMS Blog Oluşturma

Fatih Küçükkarakurt

Fatih Küçükkarakurt

Bu makalede size React, Next.js ve ButterCMS kullanarak CMS destekli bir blogun nasıl oluşturulacağını göstermeye çalışacağım.

İçerik

Araçlarımız

Next.js, evrensel React web uygulamaları oluşturmak için bir çerçevedir. Next.js, SEO için HTML etiketlerinin ayarlanması ve bileşenleri oluşturmadan önce verilerin getirilmesi dahil olmak üzere sunucu tarafı oluşturma için kullanıma hazır araçlar sağlar.

ButterCMS, herhangi bir programlama dilini kullanarak CMS destekli uygulamalar oluşturmanıza olanak tanıyan başsız bir CMS ve blog motorudur. Butter'ı WordPress'e benzer olarak düşünebilirsiniz, ancak web sitenizi seçtiğiniz dilde oluşturup ardından dinamik içeriği bir API kullanarak ekleyebilirsiniz.

Başlangıç

Uygulamanız için yeni bir dizin oluşturun ve basit bir package.json dosyası ekleyin:

{
 "name": "react-blog" 
 }

Next.js ve React'i yükleyin.

npm install next@beta react react-dom --save

Ardından package.json dosyanıza bir komut dosyası ekleyin:

{ 
    "scripts": { 
        "start": "next" 
    } 
}

Next.js, ./pages dizinindeki her js dosyasını bir sayfa olarak ele alır. Projenizin içinde ./pages/index.js oluşturarak temel bir ana sayfa oluşturalım:

export default () => ( 
    <div>My blog homepage</div>
     )

Ve sonrasında npm run start komutunu çalıştırıp, http://localhost:3000 adresini ziyaret edin.

Ardından bir ./pages/post.js dosyası oluşturun vehttp://localhost:3000/post adresinden bunu kontrol edin.

//./pages/post.js
export default () => ( 
    <div>A blog post</div>
     )

Blog Gönderileri

ButterCMS Node.js API istemcisini kurun ve sunucunuzu yeniden başlatın:

npm install buttercms --save

ButterCMS paketini index.js'ye yükleyeceğiz ve gönderileri alıp görüntüleyen bir React bileşeni kuracağız:

import React from 'react'
import Link from 'next/link'
import Butter from 'buttercms'

const butter = Butter('de55d3f93789d4c5c26fb07445b680e8bca843bd')

export default class extends React.Component { 
    static async getInitialProps({ query }) { 
     let page = query.page || 1;

    const resp = await butter.post.list({page: page, page_size: 10})
     return resp.data;
     }
    render() { 
     const { next_page, previous_page } = this.props.meta;

    return (
     <div> 
         {this.props.data.map((post) => {
           return ( 
            <div><a href={`/post/${post.slug}`}>{post.title}</a></div>
             ) 
           })} 
             <br />  

            <div> {previous_page && <Link href={`/?page=${previous_page}`}><a>Prev</a></Link>}
             {next_page && <Link href={`/?page=${next_page}`}><a>Next</a></Link>} 
             </div>  
    </div> 
    ) 
  } 
}

Next.js ile getInitialProps, ilk sayfa yüklemelerinde sunucuda ve ardından yerleşik <Link> bileşenini kullanarak farklı bir rotaya giderken istemcide çalıştırılır. getInitialProps ayrıca çeşitli özelliklere sahip bir bağlam nesnesi alır.

render() yöntemi ile, sayfalandırma bağlantılarını yalnızca uygun olduklarında görüntülemek için bazı akıllı sözdizimleri kullanırsınız.

Gönderi Sayfası

Gönderi bağlantılarımızın çalışmasını sağlamak için blog yazılarımız için dinamik yönlendirme ayarlamamız gerekiyor. Öncelikle, tüm /post/:slug URL'lerini gönderi bileşenimize yönlendiren ./server.js adında özel bir sunucu oluşturun:

const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer((req, res) => {
    // "url.parse" öğesine ikinci bağımsız değişken olarak "true" yu ilettiğinizden emin olun.
    // Bu, URL'nin sorgu kısmını ayrıştırmasını söyler.
    const parsedUrl = parse(req.url, true)
    const { pathname, query } = parsedUrl

    if (pathname.includes('/post/')) {
      const splitPath = pathname.split("/");
      
      // Sorgu nesnesine post slug ekle
      query.slug = splitPath[2];
      
      app.render(req, res, '/post', query)
    } else {
      handle(req, res, parsedUrl)
    }
  })
  .listen(3000, (err) => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})

Ayrıca, blog gönderilerini slug yoluyla almak, başlığı ve gövdeyi oluşturmak için gönderi bileşenimizi de güncelleyeceğiz:

import React from 'react'
import Butter from 'buttercms'

const butter = Butter('de55d3f93789d4c5c26fb07445b680e8bca843bd')

export default class extends React.Component {
  static async getInitialProps({ query }) {
    const resp = await butter.post.retrieve(query.slug);  
    return resp.data;
  }
  render() {
    const post = this.props.data;

    return (
      <div>
        <h1>{post.title}</h1>
        <div dangerouslySetInnerHTML={{__html: post.body}} />
      </div>
    )
  }
}

Son olarak, ziyaretçi sunucumuzu kullanmak için package.json başlangıç ​​komut dosyasını güncelleyin ve yeniden başlatın:

"scripts": {
  "start": "node server.js"
}

SEO

Next.js, HTML başlıklarını ve meta etiketlerini ayarlamak için bir <Head> bileşeni sağlar. 'next/head'in içinde yer alan Head öğesini, ./pages/post.js dosyasının üstüne import ile ekleyin ve render() yönteminde bileşeni kullanın:

render() {
  const post = this.props.data;

  return (
    <div>
      <Head>
        <title>{post.seo_title}</title>
        <meta name="description" content={post.meta_description} />
        <meta name="og:image" content={post.featured_image} />
      </Head>

      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{__html: post.body}} />
    </div>
  )
}

Sunucuyu yeniden başlatın ve etiketlerin doğru şekilde ayarlandığını doğrulamak için bir gönderinin HTML kaynağını inceleyin.

Özet

Next.js, evrensel React uygulamaları oluşturmayı kolaylaştıran güçlü bir çerçevedir. ButterCMS kullanarak React ve Node.js ile hızlı bir şekilde CMS destekli bloglar ve web siteleri oluşturabilirsiniz.

Umarız bu makaleden keyif almışsınızdır.

Kendinize iyi bakın.