Gatsby Notları ve İpuçları

İçindekiler

1. Kurulum ve Ayarlar
2. Proje Yapısı
3. Sayfalar ve Yönlendirme
4. Bileşenler
5. GraphQL Sorguları
6. Görseller ve Varlıklar
7. Stil Verme
8. Eklentiler
9. Veri Çekme
10. SEO ve Head
11. Dağıtım

Kurulum ve Ayarlar

Gatsby CLI'yi Yükle

npm install -g gatsby-cli

Yeni bir Gatsby projesi oluştur

gatsby new my-gatsby-site
cd my-gatsby-site

Geliştirme sunucusunu çalıştır

gatsby develop

Üretim için derle

gatsby build

Üretim derlemesini yerel olarak sun

gatsby serve

Proje Yapısı

• /src: Kaynak kodu
  • /pages: Sayfalar için React bileşenleri
  • /components: Yeniden kullanılabilir React bileşenleri
  • /templates: Programatik olarak oluşturulan sayfalar için şablonlar
  • /styles: CSS dosyaları
• /static: Public klasörüne kopyalanacak statik varlıklar
• /gatsby-config.js: Gatsby yapılandırma dosyası
• /gatsby-node.js: Gatsby Node.js API'leri
• /gatsby-browser.js: Gatsby tarayıcı API'leri
• /gatsby-ssr.js: Gatsby sunucu taraflı işleme API'leri

Sayfalar ve Yönlendirme

Sayfa oluşturma

// src/pages/hakkimizda.js
import React from 'react'

const HakkimizdaSayfasi = () => (
  <div>
    <h1>Hakkımızda</h1>
    <p>Bu hakkımızda sayfasıdır</p>
  </div>
)

export default HakkimizdaSayfasi

İç navigasyon için Link bileşeni

import { Link } from 'gatsby'

const Navigasyon = () => (
  <nav>
    <Link to="/">Ana Sayfa</Link>
    <Link to="/hakkimizda">Hakkımızda</Link>
  </nav>
)

Programatik sayfa oluşturma

// gatsby-node.js
exports.createPages = async ({ actions }) => {
  const { createPage } = actions
  createPage({
    path: "/dsg-kullanimi",
    component: path.resolve(`src/templates/dsg-kullanimi.js`),
    context: {},
    defer: true,
  })
}

Bileşenler

Fonksiyonel bileşen

import React from 'react'

const Baslik = ({ baslik }) => (
  <header>
    <h1>{baslik}</h1>
  </header>
)

export default Baslik

Sınıf bileşeni

import React, { Component } from 'react'

class Sayac extends Component {
  state = { sayi: 0 }

  artir = () => {
    this.setState(oncekiDurum => ({ sayi: oncekiDurum.sayi + 1 }))
  }

  render() {
    return (
      <div>
        <p>Sayı: {this.state.sayi}</p>
        <button onClick={this.artir}>Artır</button>
      </div>
    )
  }
}

export default Sayac

GraphQL Sorguları

Sayfa sorgusu

import React from 'react'
import { graphql } from 'gatsby'

const AnaSayfa = ({ data }) => (
  <div>
    <h1>{data.site.siteMetadata.title}</h1>
  </div>
)

export const query = graphql`
  query AnaSayfaSorgusu {
    site {
      siteMetadata {
        title
      }
    }
  }
`

export default AnaSayfa

Statik sorgu (useStaticQuery hook'u)

import React from 'react'
import { useStaticQuery, graphql } from 'gatsby'

const SiteBilgisi = () => {
  const data = useStaticQuery(graphql`
    query SiteBilgisiSorgusu {
      site {
        siteMetadata {
          title
          description
        }
      }
    }
  `)

  return (
    <div>
      <h1>{data.site.siteMetadata.title}</h1>
      <p>{data.site.siteMetadata.description}</p>
    </div>
  )
}

export default SiteBilgisi

Görseller ve Varlıklar

gatsby-image kullanımı

import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'
import Img from 'gatsby-image'

const Gorsel = () => {
  const data = useStaticQuery(graphql`
    query {
      file(relativePath: { eq: "ornek.jpg" }) {
        childImageSharp {
          fluid(maxWidth: 800) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `)

  return <Img fluid={data.file.childImageSharp.fluid} alt="Örnek" />
}

export default Gorsel

Static klasörü kullanımı

import React from 'react'

const StatikGorsel = () => (
  <img src="/logo.png" alt="Logo" />
)

export default StatikGorsel

Stil Verme

CSS Modülleri

import React from 'react'
import styles from './buton.module.css'

const Buton = ({ children }) => (
  <button className={styles.buton}>{children}</button>
)

export default Buton

Styled Components

import React from 'react'
import styled from 'styled-components'

const StilliButon = styled.button`
  background-color: #0077b5;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
`

const Buton = ({ children }) => (
  <StilliButon>{children}</StilliButon>
)

export default Buton

Eklentiler

Eklenti yükleme ve yapılandırma

// gatsby-config.js
module.exports = {
  plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',
  ],
}

Veri Çekme

Derleme zamanında veri çekme

// gatsby-node.js
const fetch = require('node-fetch')

exports.sourceNodes = async ({ actions, createNodeId, createContentDigest }) => {
  const { createNode } = actions

  const response = await fetch('https://api.example.com/data')
  const data = await response.json()

  data.forEach(item => {
    const node = {
      ...item,
      id: createNodeId(`ornek-${item.id}`),
      internal: {
        type: 'OrnekOge',
        contentDigest: createContentDigest(item),
      },
    }
    createNode(node)
  })
}

Çalışma zamanında veri çekme

import React, { useState, useEffect } from 'react'

const CalismaZamaniVerisi = () => {
  const [data, setData] = useState(null)

  useEffect(() => {
    const veriCek = async () => {
      const response = await fetch('https://api.example.com/data')
      const sonuc = await response.json()
      setData(sonuc)
    }
    veriCek()
  }, [])

  if (!data) return <div>Yükleniyor...</div>

  return (
    <div>
      <h1>Çalışma Zamanı Verisi</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  )
}

export default CalismaZamaniVerisi

SEO ve Head

react-helmet kullanımı

import React from 'react'
import { Helmet } from 'react-helmet'

const SEO = ({ baslik, aciklama }) => (
  <Helmet>
    <title>{baslik}</title>
    <meta name="description" content={aciklama} />
    <meta property="og:title" content={baslik} />
    <meta property="og:description" content={aciklama} />
    <meta name="twitter:card" content="summary_large_image" />
  </Helmet>
)

export default SEO

Dağıtım

Netlify'a dağıtım

1. Gatsby projenizi bir GitHub deposuna gönderin
2. Netlify'a giriş yapın ve "New site from Git" tıklayın
3. GitHub'ı seçin ve deponuzu seçin
4. Derleme komutunu gatsby build olarak ayarlayın
5. Yayınlama dizinini public/ olarak ayarlayın
6. "Deploy site" tıklayın

Gatsby Cloud'a dağıtım

1. Gatsby Cloud'a giriş yapın
2. "Add a site" tıklayın
3. GitHub deponuzu bağlayın
4. Gerekirse derleme ayarlarını yapılandırın
5. "Create site" tıklayın