React JS – Next.js ile WordPress Rest Api Part-1

Reactjs nedir? Neden kullanmalıyız bunun gibi sorulara benden önce bir milyon tane blogda cevap verilmiş tekrar bunu yazmak istemiyorum, eğer başarabilirsem en geç 3 günde 1 yazacağım blog yazıları ile next.js ile bir wordpress rest api projesi oluşturmak istiyorum.

Öncelikle next.js nedir?

Next.js, react için geliştirilmiş olan bir server-side rendering çatısıdır (framework). Tıpki create-react-app gibi hazır bir kurulumla gelmesi, direk kod yazmaya başlayabileceğiniz bir yapısı mevcut.

Next.js github sayfası => zeit/next.js
Next.js öğrenmek için => learn nextjs

Hızlıca giriş yapalım ve projemizi oluşturalım – (Windows kullanıcısı iseniz cmd yerine powershell kullanmanız tavsiyemdir.)

Şimdi terminal üzerinden projeyi oluşturacağımız konuma gidiyoruz ve mkdir ile yeni bir klasör oluşturuyoruz.
mkdir projeadi – ben burada wordpressRestApi diye bir dizin oluşturdum.
cd projeadi
npm init  şimdi burada packagename, versiyon gibi bilgileri oluşturuyoruz.

Benim oluşturmuş olduğum package.json aşağıdaki gibi.

{
"name": "wordpressrestapi",
"version": "1.0.0",
"description": "efederilgen.com wordpress rest api",
"main": "index.js",
"scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

Artık projemize next, react ve react-dom ekleme vakti. Npm kodumuz

npm install --save react react-dom next

Şimdi package.json içerisinde scripts altına “dev”: “next” ekliyoruz.

package.json son hali

{
  "name": "wordpressrestapi",
  "version": "1.0.0",
  "description": "efederilgen.com wordpress rest api",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next"
  },
  "author": "",
  "license": "ISC"
}

Ve artık projeyi dev modda çalıştırma vakti. Terminal üzerinden npm run dev kodunu çalıştırıyoruz.

Next.js ile giriş projemizi oluşturduk.

Şimdi öncelikle sayfalarımızı oluşturmaya başlayalım tabiki bunun için projemiz içerisinde pages diye bir sayfa oluşturarak başlıyoruz. Pages projemizin olmazsa olması next.js ile birlikte kullanması zorunlu bir alan.

Pages klasörü içerisine şimdi index.js, post.js, category.js, pages.js dosyalarını oluşturuyoruz. Sonrasında bu dosyalarımızda rest api işlemlerimizi gerçekleştireceğiz.

Şimdi proje dosyalarımızı oluşturacağız.

components diye yeni bir klasör oluşturuyoruz tekrar anadizinimize. Bu klasör altında assets ve layout adında iki klasör daha açıyoruz. Kısaca projemizin son durumu.

Artık projemizi browser üzerinde açalım, npm run dev komutu sonrası terminalde ready on http://localhost:3000 yada uygun olan bir port çıktısı almış olmalısınız. Browser’da açalım o zaman.

Eğer index.js oluşturmadıysanız benim gibi 404 sizi karşılıyor olacak 🙂
This page could not be found.
index.js oluşturmuşsanız ise içi boş olduğu için muhtemelen aşağıdaki gibi bir hata ile karşılacaksınız.
The default export is not a React Component in page: “/”

Ee artık yavaştan kodlama tarafına geçelim.

Merhaba dünya ile başlamak adettendir diyoruz ve sabit değişkenimiz const ile merhaba dünya yazalım ve çalışıp çalışmadığını kontrol edelim.

const index = () => (
  <div>
    <p>Merhaba Dünya</p>
  </div>
);

export default index;

next.js’de normalin aksine her sayfada react’i projemize dahil etmek zorunda değiliz, tabiki import ile herşeyi yine sayfalarımıza entegre etmemiz gerekecek ama react bunlardan birisi değil, zaten react üzerinde çalıştığımızın farkında framework.

const içerisinde return ederken direk string bir değer girerseniz syntax error alacağınızı hatırlatım. O yüzden mutlaka bir wrapper kullanmalısınız.

const index = () => (
<br />
);

export default index;

Yukarıda br’yi tek başına bir element olduğu için wrapper’a ihtiyaç duymaz ve hata vermez onu bir component gibi düşünür fakat

const index = () => (
<br />
<br />
);

export default index;

Bir wrapper’a sahip olmadığı için hata verecek, sizi siyah ekranda error index.js ekranı ile karşı karşıya bırakacak.

Fakat biraz önce hata veren kodumuz bir wrapper divi altında hatasız çalışacak 🙂

const index = () => (
  <div>
    <br />
    <br />
  </div>
);

export default index;

WordPress rest-api tarafına girmeden önce temel noktaları belirtmekte fayda var diye düşünüyorum ama eğer bu tip detaylardan sıkılıyor yada biliyorsanız sizi başka alemlere alabiliriz 🙂 Meselea ben şuan Patron’un Yanıyorum Hala şarkısını dinleyerek buradayım.

Neyse yavaştan o zaman projemize yönelelim ve ilk modülümüzü hazırlayalım. components klasörü altında bulunan layouts klasörü içerisinde header.js oluşturuyoruz.

Header.js içeriğimiz

import Head from "next/head";

const Header = () => (
  <header>
    <Head>
      <title>Wordpress RestApi</title>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <link
        rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      />
    </Head>
  </header>
);
export default Header;

Öncelikle header.js içeriğimizde Head componentini next/head altından projemize dahil ettik. Bu sayede title, meta, css gibi içeriklerimizi projemize dahil edebileceğiz.  Wrapper olarak header html elementini belirledim fakat sayfamızda henüz bir değişiklik olmadı çünkü bunu henüz projemize dahil etmedik.

index.js ye geri dönüp içeriğimizi aşağıdaki gibi güncelliyoruz

const index = () => (
  <div>
    <Header />
  </div>
);

export default index;

Burada projemize Header isimli bir component dahil ettik fakat bunu sayfamıza import etmediğimiz için Header is not defined hatasını alıyoruz. Bir developer’ın hayatının büyük bir bölümü undefined yada is not definedlarla geçiriyoruz.

Şimdi index.js de en üste header’ı import edeceğiz.

import Header from "../components/layout/header";

import ederken dikkat etmemiz gerekenler export ettiğimiz class ismi ve dosya konumu. export default blabla diyipte lablabla from diye import edemezsiniz o illa ki blabla olmak zorunda.

Konum kısmına gelecek olursak da Eğer bir alt dizinden ekleme yapıyorsak ../ ile geri dönmemiz ve klasör yolunu bulmamız şart anadizinde ise ./components/dosyayolu yeterli olacak.

Bunları yaptıysak artık title kısmı dolu ama içeriği bomboş bir sayfamız var.

Bir sonraki yazıda stillendirme ve sayfalamarı gerçekleştireceğiz, 3. yazıda ise restapi işlemlerini gerçekleştireceğiz.

Projenin şuana kadar ki haline github üzerinden ulaşabilirsiniz.

Bu yazılarda ilgi çekebilir

1 Yorum

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir