
Kullanmayı sevdiğim bir programlama dil olan [TypeScript](https://www.typescriptlang.org/)'in ne olduğunu anlatma zamanı geldi.

## Typescript nedir?

**Typescript**, Javascript'ten farklı olarak `strongly-typed` bir programlama dilidir.
Typescript C#'ı tasarlayan ve Delph'i yapan **Anders Hejlsberg** tarafından tasarlanmıştır.
**2012** yılında ilk sürümü çıkmıştır.

Javascript'in sunucu tarafı çalışmasıyla daha büyük uygulamalarda kullanılmasından dolayı uygulamanın ölçeklendirilmesi önemli olmuştur.
Bu gereksinim `type-safety` bir dil istenmesine sebep olmuştu ve **Microsoft** bu sorunu çözmek için **Typescript**'i oluşturmuştur.

**Typescript**, Javascript'e derlenir ve Javascript kodu Typescript içinde çalışabilir.

## Neden Typescript kullanmalısınız?

### Derleme sürecine sahiptir.

Javascript yorumlanan bir dildir ve kod çalışmadığı sürece hataların ne olduğunu anlayamazsınız.
Typescript ise Javascript'e derleme sürecine sahiptir, derlenme sırasında olası hataları size söyler.

### Güçlü tipler

Javascript'te `statik` tipler yoktur. Tipler çalışma zamanı sırasında `dinamik` olarak belirlenir.
Typescript'te ise değişkenlerinize `statik` bir tip verebilirsiniz eğer bir uyumsuzluk varsa derlenme süresinde size hata olarak bildirilir.

### IDE Desteği

Verdiğiniz tipler sayesinde `IDE`'ler size otomatik tamamlamayı daha iyi sağlayabilir ve hataları size bildirebilir fakat
alternatif olarak sadece otomatik tamamlama istiyorsanız [JSDoc](https://jsdoc.app/) kullanabilirsiniz.

### Okunabilirlik

Javascript'te `statik` bir tip belirtemediğiniz için kodu okuyan bir kişi burada ne olacağını anlamayabilir örnek:

```js
function saveUser(user) {
  // ...
}
```

Bu fonksiyondaki `user` parametresi ne olabilir nelere sahip? Bunu Typescript'te kolayca belirtebilirsiniz:

```ts
interface User {
  name: string;
  age: number;
}

function saveUser(user: User) {
  // ...
}
```

Bu sayede **open-source** projelerinizi daha okunabilir yapabilirsiniz.

## Typescript'e Giriş

Typescript'i tarayıcı için basitçe nasıl derleneceğine bakalım.

`Typescript` derleyicisini indirelim

```shell
$ npm install -g typescript
```

Bu bize `tsc` komutunu heryerde kullanmamıza olanak sağlayacaktır tabi ki bunu<br />
`shell//$ npx tsc` komutunu kullanarak indirmeden kullanabilirsiniz.

Bir **Typescript** dosyası oluşturalım typescript dosyaları `.ts` uzantısına sahiptir.
`index.ts` dosyasını açalım.

```ts title=index.ts
function say(message: string) {
  console.log(message);
}

// Eğer bir sayı yazsaydık bize bir hata verirdi.
say('Hello World!');
```

Bir `tsconfig.json` dosyası oluşturalım bu Typescript'e nasıl derlenmek istediğinizi söylemek içindir.
`tsconfig` dosyasında yorum satırları yazabilirsiniz.

```json title=tsconfig.json
{
  "compilerOptions": {
    "target": "es5", // çıktının es5 olmasını söyleyelim
    "outFile": "index.js" // index.js dosyasına çıkarmasını söyleyelim
  },
  "include": ["index.ts"] // sadece index.ts dosyasını derlemesini söyleyelim
}
```

Ve şu komutu yazalım.

```shell
$ tsc
```

**Mükemmel**! size bir `index.js` dosyası oluşturacaktır bunu istediğiniz gibi kullanabilirsiniz.

## Sonuç

Typescript'in ne kadar güzel birşey olduğunu 4 satırda açıkladım.
Typescript `open-source` projeleriniz için mükemmel bir seçim olacaktır fakat gerekmedikçe Typescript kullanmak derleme hızına etki edebilir.


Typescript nedir? Hangi durumlarda Typescript kullanmalısınız?

Typescript nedir? Neden kullanmalısınız?


> Next.js Vercel tarafından yapılmış gerçek uygulamalarda çalışmak için hazırlanmış bir React framework'dur.

[Önceki](/blog/react-ile-server-side-rendering) makalemde kısaca anlattığım server side rendering konusu
aslında gerçek bir uygulamada çalışabilecek duruma getirmek oldukça zahmetli bir iştir.
Next.js ise size çok kısa bir sürede **production-ready** olarak yapmanıza olanak sağlıyor.

## Next.js'in sunduğu özellikler nelerdir?

### Routing

Next.js Routing için dosya sistemi yapısı ve next/router'ı kullanır next/router history ile hızlıca sayfayı yenilemeden sayfalar arası geçiş yapabilir.

`src/pages` ve `pages` klasörlerinde sayfalarınızı iç içe yazarsanız örneğin

- `pages/users.js` -> `/users`
- `pages/users/[id].js` -> `/users/:id`
- `pages/users/[id]/settings` -> `/users/:id/settings`

Şeklinde sayfa oluşturur.

### CSS Desteği ve Optimizasyonu

React ile stillendirme konusunda bir çok çözüm ve yöntem vardır.
Next.js size css dosyalarınızı `pages/_app.js` sayfasından kolayca import etmenizi sağlar ve optimize eder.

`js//import '../styles/stillerim.css'` şeklinde eklediğiniz CSS dosyaları Next.js tarafından **PostCSS** ile işlendikten sonra parçalara bölünür.
Sitenize gelen kullanıcıda ise `html//<style>` etiketi içerisinde css kodları bulunur.

Next.js Sass destekler ve kullanmak için `npm install sass` demeniz ve bir `.scss` veya `.sass` dosyası eklemeniz yeterlidir.

Next.js Component-level css eklemek için size [CSS Modules](https://github.com/css-modules/css-modules) ve [Styled JSX](https://github.com/vercel/styled-jsx) sunar.

#### CSS Modules

eklediğiniz `.module.css` uzantalı dosyaların class adlarını benzersiz yapar örneğin.
`Button.module.css` adlı dosyasında bulunan `css//.maviRenkliButton` class'ı `Button_maviRenkliButton_[hash]`'e çevirilir ve class adlarının çakışmasını önlersiniz.

#### Styled JSX

Yüksek performanslı JSX içinde css yazmanıza ve benzersiz class adı oluşturmaya olanak sağlar.

```jsx
<style jsx>{`
  .class-adi {
    width: ${5 / 2.5};
  }
`}</style>
```

Yazıp kullanabilirsiniz ve class adlarınız ve id'leriniz benzersiz olur.

### Image Optimizasyonu

Websitelerin en büyük veri kısmı resimlerdir ve optimizasyonları çok önemlidir.
`next/image` bileşenini kullanarak resimlerinizi Next.js ile optimize hale getirebiliyorsunuz.
Bunu nasıl yapıldığı https://nextjs.org/docs/basic-features/image-optimization sayfasında anlatılıyor.

### Incremental Static Regeneration

https://vercel.com/docs/next.js/incremental-static-regeneration adresinden tam olarak ne olduğunu okuyabilirsiniz fakat kısaca anlatmak gerekirse.

SSG'den farklı olarak ISR Çok hızlı bir şekilde belirli aralıklarla veriler ile statik bir html sayfası oluşturmanıza ve her istekte yeniden oluşturmaya gerek kalmamasını sağlar.

[Next.js E-commerce](https://github.com/vercel/commerce) Özellikle ISR kullanır ve `pages/product/[slug].tsx` sayfası her **200** saniyede bir yeniden oluşturulur düşünsenize 10.000'den fazla ürününüz var ve bunların hepsini tekrar oluşturmak zorunda kalırsanız bu işlem biraz zaman alacaktır.
ISR ise Cache'ye alıp hızlıca hepsini yeniden oluşturabiliyor. Ayrıca herhangi bir hata alınca da işlem devam edebiliyor.

### getStaticProps ve getServerSideProps

#### getStaticProps

Statik bir veri göndermek için bu fonksiyonu oluşturup export edebilirsiniz.
Bu şekilde Next.js bunu çalıştırıp Home sayfanıza texts verisini gönderir
ve statik bir html sayfası oluşur.

```jsx title=pages/index.js
export default function Home({ texts }) {
  return texts.map((text) => {
    return <p>{text}</p>;
  });
}

export async function getStaticProps() {
  return {
    props: { texts: await getTextsFromServer() },
  };
}
```

Eğer düzenli aralıklarla yeniden oluşturmak istersek `return` içine
`js//revalidate: 200 /* 200 saniye */` değerini ekleyebiliriz.

#### getServerSideProps

`getStaticProps`'dan farklı olarak her istekte çalışır ve sayfayı sunucuya gelen her istekte yeniden oluşturulur.

## Sonuç

Next.js'i kesinlikle denemeniz ve kullanmanız gerekmektedir. Umarım eksik bir bilgi vermemişimdir :)


Next.js'in tam olarak ne olduğu ve özelliklerinin ne olduğunu anlatan makale.

Next.js Nedir? Ne için kullanılır?


## Server Side Rendering ve Client Side rendering Nedir?

Dertli başların derdi [SEO](https://developers.google.com/search/docs/beginner/do-i-need-seo?hl=tr) diğer adıyla arama motoru optimizasyonu.
Meta etiketleri her ne kadar önemli olsa da bir o kadar da sitenin içerik kısmı yani **body** de çok önemlidir.

Eğer Bir Vue, React veya angular gibi tarayıcı kısmında **render** edilen bir framework kullanıyorsanız (merak etmeyin sadece tarayıcıda olmak zorunda değil) Seo dertli başınıza dert açar.

- `Server-side rendering` Server kısmında render edilerek bir raw html çıktısı aldığınız işlemdir.
- `Client-side rendering` Tarayıcı kısmında Javascript ile render edilip DOM'a yerleştirilen işlemdir.

Daha detaylı kaynaklardan araştırabilirsiniz kısaca diyebileceklerim bunlar.

## React ile server side rendering nasıl yapılır?

Bu konuda eskide olsa da Github'da bulabileceğiniz bir çok proje var fakat bunları kullanmak yerine kesinlikle Next.js veya Gatsby (Sadece static üretebilir) kullanmalısınz fakat kısaca anlatmak gerekirse başlayalım.

### renderToString

`js//const ReactDOMServer = require('react-dom/server')` paketinin sağladığı `renderToString` fonksiyonu ile Server'da React'ı render edebilirsiniz.

```jsx
const ReactDOMServer = require('react-dom/server');
const http = require('http');

const server = http
  .createServer((req, res) => {
    // Dikkat JSX yazmak için Babel'i ve @babel/preset-react'ı kurmanız gerekmektedir şuanlık küçük bir örnek ve çalışmayacaktır.
    const html = ReactDOMServer.renderToString(<div className="bg-gray-500">Hello World</div>); // <div class="bg-gray-500">Hello World</div>
    res.send(`<DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
    </head>
     <body>${html}</body>
     </html>
     `);
  })
  .listen(3000);
```

Seklinde kullanıcıya tam html göndeririz fakat `jsx//<body>${html}</body>` şeklinde göndermek zorunda değiliz React ile tüm sayfayı da render edebiliriz.

### renderToStaticMarkup

`renderToStaticMarkup` fonksiyonu ise sadece Static HTML render eder yani **useEffect** gibi hooklar çalışmaz.
React bileşenlerini html'e çevirmek için birebirdir.

```jsx
const ReactDOMServer = require('react-dom/server');

function convertToHTML(component) {
  return ReactDOMServer.renderToStaticMarkup(component);
}

console.log(
  convertToHTML(
    <div className="react-ozel-propslar" onClick={(e) => console.log('yehuu', e)}>
      naber
    </div>
  )
);
// <div class="react-ozel-propslar" onClick="undefined">naber</div>
```

**NOT**: `renderToString` ve `renderToStaticMarkup` fonksiyonları tarayıcıda da çalışabilir.

## Sonuç

Bu makalede Server Side rendering'in kısaca ne olduğu ve ne ile yapıldığını gösterdim.
diğer makalaler gibi express ile server side rendering yapmayı gösteremedim fakat basitçe görmek istiyorsanız: https://www.digitalocean.com/community/tutorials/react-server-side-rendering

Hızlıca işimi herşey hazır yapıp geçmek istiyorum derseniz Next.js veya Gatsby kullanmanız daha iyi olur.


server-side rendering'in ne olduğu ve React ile server-side rendering'in nasıl yapıldığını anlatan makale.

React ile server-side rendering


## Ne zaman başladım?

Yaklaşık 2 ay önce Youtube'da gezinirken gördüğüm bir videoda kullanılan [Chakra UI](https://chakra-ui.com) oldukça ilgimi çekmişti.
Hemen denemek istemiştim. Denediğimde aklıma oldukça güzel fikirler gelmişti.
Benimde aklıma her seferinde yapmaya çalışıp sonradan aman diyip pes ettiğim **Blog sayfası olan bir site yapmak**.

Önceden yapmaya çalıştıklarım genelde anlık bir heves olup 2 günde bitmesi gerekirken 3-4 günde zor bitirdiğim projelerdi.
Bu sefer başardım mı? **Hayır**, bu seferde daha ana sayfayı yapıp [Fresh UI](https://github.com/fui-org/fresh-ui) adı altında **Chakra ui**'den daha hızlı bir **ui library** geliştirmeye çalıştım.
fakat yapamadım.

bir süre ara verdikten sonra `build` çıktısının boyutunun yüksek olmasından ve [fouc](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) hissetmem yüzünden içimden
[TailwindCSS](https://tailwindcss.com) geçirmek geldi ve 3 gün içinde ana sayfayı bitirip **Tailwindcss** geçirdim.

Sonrada **blog** zamanı geldi dediğimde tunar'ın söylediği gibi bir eksik vardı, hissettiriyordu ama ne olduğunu söylemiyordu.
Ben de baştan aşağı siteyi yenilemeye çalıştım şuanda içerik olarak eksiklik hissetsemde zamanla gelişeceğine eminim.

## Nasıl yaptım?

[React](https://reactjs.org) kullanmaya başladıktan sonra [Next.js](https://nextjs.org) kullanmamak için o kadar dirensemde en sonunda **tamam şimdilik idare etsin** dedim ve bir daha bırakasım gelmedi.
İlk başta Chakra ui kullandım fakat sonradan Tailwindcss geçirdim.

Blog sayfasına başladıktan sonra çoğunlukla https://leerob.io sayfasından esinlenmeye başladım.

Markdown'ı zero-runtime ile render edebilmek ve React'a uygun halde kullanabilmek için [mdx-js](https://github.com/mdx-js/mdx) ve [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote) kullandım.

sitenin kaynak koduna https://github.com/healthpackdev/website adresinden ulaşabilirsiniz.

## Daha neler Gelecek?

Bırakayım şuraya yapacaklarımı:

1. Firebase ile yorumlar sistemi yap.
2. Spotify'da dinlenen müziği siteye yansıt.
3. Yaratıcı sayfalar geliştirmeye çalış.
4. Link bırak sayfası yap.

### Öneride bulunmak

Her türlü öneriye ve eleştiriye açığım. bana ulaşabileceğiniz adresler sitenin alt kısmında ikonlar ile bulunuyor, tıklayarak profile ulaşabilirsiniz.


Neden burayı baştan aşağı yenilip 1 ay sonunda blog sayfasınıda yapıp yayınladım? sorusuna cevap veren makale.

Healthpack

Blog

Son makaleler

Typescript nedir? Neden kullanmalısınız?

Next.js Nedir? Ne için kullanılır?

React ile server-side rendering

Tüm makaleler

Neden siteyi baştan aşağı yeniledim?