SEO Dostu Olan Next.js Genel Bir Bakış

Next.js, genel ve gereksiz görevleri (yönlendirme gibi) nispeten daha basit ve güçlü API'lere soyutlayarak bir React geliştiricisi olarak hayatınızı kolaylaştırmak için Vercel tarafından geliştirilen bir React frameworkudur. Bu şekilde, tekerleği yeniden icat etmek yerine uygulamalarınızı yazmaya odaklanabilirsiniz.

Hızlı, sunucu tarafı oluşturmayı sağlayan ve sunucudan bağımsız React framework üzerine inşa edilmiş hafif bir açık kaynaklı JavaScript frameworküdür.

Neden Next.js Kullanmalıyım ?

1) Öğrenmesi nispeten kolay

Eğer önceden React ile çalıştıysanız, Next.js ile kendinizi evde bulursunuz. Size gelişmiş araçlar ve sağlam bir API desteği sunar, ancak sizi bunları kullanmaya zorlamaz.

2) Yerleşik CSS desteği

JS içinde CSS araçlarına sahipsiniz, ancak Next.js kutudan kendi teklifiyle - jsx stiliyle çıkar ve aynı zamanda bir dizi stil metodolojisini destekler.

3) Otomatik TypeScript desteği

TypeScript ile kodlamayı seviyorsanız, TypeScript yapılandırması ve derlemesi için tam anlamıyla otomatik desteğe sahipsiniz.

4) Çoklu veri getirme tekniği

SSG ve / veya SSR'yi destekler. Birini veya diğerini veya her ikisini birden kullanmayı seçebilirsiniz.

5) Dosya sistemi yönlendirme

Bir sayfadan diğerine geçiş yapmak, uygulamanızın dosya sistemi aracılığıyla desteklenir. Yönlendirmeyi işlemek için herhangi bir özel yönlendirme kütüphanesine ihtiyacınız yoktur.

Kurulum

Next.js'yi bağımlılıkları ile birlikte yüklemek için NPM kullanacağız. İlk önce Next.js projemizi tutacak bir dizin oluşturacağız ve içine gireceğiz.

mkdir my-portfolio-site
cd my-portfolio-site

Şimdi Next.js'yi yüklemeye hazırız.

npm install react react-dom next

Next.js, bir istisna dışında, projenizi nasıl yapılandırdığınız konusunda süper fikirlere sahip değildir. Tüm gerçek web sayfalarınızın bir sayfalar klasörüne girmesi gerekir.

Son olarak, devam edelim ve güncellemesine izin package.json bizim Next.js uygulamasını başlatmak için çalışma script dili. package.json dosyasını açın ve komut dosyalarının altına aşağıdakileri ekleyin.

"dev": "next",
"build": "next build",
"start": "next start"

Harika, şimdi Next.js'yi yükledik. Öyleyse içine dalalım.

İlk Bileşeni Oluşturmak

Next.js'nin yalnızca JavaScript olduğunu ve React'in üstünde olduğunu unutmayın, bu nedenle tek yapmamız gereken bazı bileşenler oluşturmaktır. Yönlendirme, bileşenin adına göre yapılır, bu nedenle örneğin mysite.com/blog , pages dizinindeki blog.js adlı dosyadan olabilir .

Favori kod editörü projeyi açın ve dosyayı denilen oluşturmak index.js içinde sayfalar dizininde.

Biraz HTML döndüren bir bileşen oluşturalım!

const Index = () => (
    <div>
        <h1>My Portfolio Site</h1>
        <p>Welcome to my portfolio! This is designed with Next.js!</p>
    </div>
)

export default Index

Şimdi , komut satırından npm run dev komutunu çalıştırırsanız ve web tarayıcınızdan (http://localhost: 3000) 'e giderseniz, bu içeriğin olduğunu göreceksiniz.

Sayfalar Arası Link Oluşturma

React'te sayfa oluşturmayı hepimiz sevmiyor muyuz? Next.js Bağlantı API'sini kullanarak Next.js ile aynı istemci tarafında gezinmeyi gerçekleştirebiliriz . Portföy sitemizin bir İletişim sayfası olduğunu varsayalım ve oraya yönlendirmek istiyoruz. Bunu yapmak için aşağıdaki Link bileşenini kullanmamız gerekmektedir.

import Link from 'next/link';

const Index = () => (
    <div>
        <h1>Portföy Sayfası</h1>
        <p>
                <Link href="/iletisim">
                    <a>İletişim</a>
                </Link>
        </p>
    </div>
)

export default Index

Daha Küçük Yeniden Kullanılabilir Bileşenler Yapmak

Şimdi harika bir başlangıç ​​yaptık, ancak oluşturduğumuz her sayfa için başlığımızı yeniden yazmak zorunda olduğunuzu hayal edebiliyor musunuz? Bu yüzden sitemizi yeniden kullanılabilir küçük bileşenlere ayırıyoruz!

Next.js'nin bunu nasıl yapmanız gerektiği konusunda hiçbir fikri yok. Ancak, bunları "pages" dizinine koyarsanız , dış dünyaya doğrudan erişebileceklerini unutmayın. Birinin üstbilginize, gezinme çubuğunuza ve altbilginize doğrudan erişmesini ister misiniz? Değilse, onları dışına yerleştirin. Devam edin ve bir bileşen üst düzey dizini oluşturun: mkdir "bilesenler" ve bir header.js dosyası oluşturun. Daha sonra bu header.js açın.

const Header = () => (
    <div>
        <h1>My Portfolio Site</h1>
    </div>
)

export default Header

Ardından devam edin ve index.js dosyanıza geri dönün ve yeni başlığınızı ekleyin.

import Link from 'next/link';
import Header from '../bilesenler/header';

const Index = () => (
    <div>
    <Header />
        <h1>Portföy Sayfası</h1>
        <p>
                <Link href="/iletisim">
                    <a>İletişim</a>
                </Link>
        </p>
    </div>
)

export default Index

Şimdi bu yeni bileşen bizi tekrardan kurtardı.

Artık Next.js'yi başarıyla yükledik, yeni bir proje başlattık, bileşenler oluşturduk, Next.js Link API'sini kullanarak bunlara bağlandık ve bileşenleri projemizde yeniden kullandık.

Okuduğunuz için teşekkürler.