Basit Bir Next.js 13 Blogu Oluşturmak İçin Adım Adım Kılavuz

İçindekiler

1. giriiş
2. Projenin Kurulumu
3. Klasör Yapısını Anlamak
4. Tüm Blog Yazılarını Listeleme
5. Tek Bir Blog Gönderisini Sergileme
6. Next.js'de Yükleme Kullanıcı Arayüzü ve Akışı Kullanma
7. Çözüm
8. Referanslar

1. Giriş

Selamlar!

Bugünkü eğitimde Next.js'yi kullanarak basit ama güçlü bir blog oluşturma yolculuğuna çıkıyoruz.

İster Next.js'de yeni olun, ister yalnızca bazı temel bilgileri tazelemek istiyor olun, bu kılavuz sizin için özel olarak hazırlanmıştır.

Sadece bir projenin nasıl kurulacağıyla ilgilenmeyeceğiz, aynı zamanda klasör yapılarına, sunucu tarafı işlemeye ve daha fazlasına da değineceğiz.

Deponun tamamını burada bulabilirsiniz

Haydi hemen dalalım!

2. Projenin Kurulumu

1. Adım: Uygulamayı oluşturun

Başlamak için Next.js uygulamamızı kurmak üzere aşağıdaki komutu kullanalım:

 npx create-next-app@latest blog-example

İşiniz bittiğinde yeni oluşturulan projeye gidin:

 cd blog-example

2. Adım: Geliştirme sunucusunu başlatın

Bu kılavuzda yarn kullanmama rağmen, npm veya pnpm kullanmaktan çekinmeyin:

 yarn dev

Şimdi varsayılan Next.js şablon sayfasını bulacağınız http://localhost:3000 adresini ziyaret edin.

3. Klasör Yapısını Anlamak

Bu noktada Next.js uygulamamızın yapısını anlamakta fayda var. Klasör düzeninin görsel temsili için lütfen aşağıdaki resme bakın.

4. Tüm Blog Yazılarını Listeleme

4.1. API Rotası

/app/api/posts/route.js içinde blog gönderileri için sahte bir API ayarlayacağız. Burada, next: { revalidate: 60 } verilerimizi her 60 saniyede bir yeniden doğrulamak istediğimizi belirtir.

Verilerin Yeniden Doğrulanması

Yeniden doğrulama, Veri Önbelleğini temizleme ve en son verileri yeniden getirme işlemidir. Bu, verileriniz değiştiğinde ve en son bilgileri gösterdiğinizden emin olmak istediğinizde kullanışlıdır.

Önbelleğe alınan veriler iki şekilde yeniden doğrulanabilir:

• Zamana dayalı yeniden doğrulama : Belirli bir süre geçtikten sonra verileri otomatik olarak yeniden doğrulayın. Bu, nadiren değişen ve güncelliğin o kadar kritik olmadığı veriler için kullanışlıdır.
• İsteğe bağlı yeniden doğrulama : Bir etkinliğe (örn. form gönderimi) dayalı olarak verileri manuel olarak yeniden doğrulayın. İsteğe bağlı yeniden doğrulama, veri gruplarını aynı anda yeniden doğrulamak için etiket tabanlı veya yol tabanlı bir yaklaşım kullanabilir. Bu, en son verilerin mümkün olan en kısa sürede gösterilmesini sağlamak istediğinizde kullanışlıdır (örneğin, başlıksız CMS'nizin içeriği güncellendiğinde).

Zamana Dayalı Yeniden Doğrulama

Verileri belirli bir zaman aralığında yeniden doğrulamak için, bir kaynağın önbellek ömrünü (saniye cinsinden) ayarlamak üzere next.revalidate fetch seçeneğini kullanabilirsiniz.

İşte bir örnek:

 import { NextResponse } from 'next/server' export async function GET() { const res = await fetch('https://dummyjson.com/posts', { next: { revalidate: 60 }, }); const data = await res.json(); return NextResponse.json(data); }

4.2. Gönderileri Görüntüleme

Sunucumuzdan gönderileri alıp görüntüleyen PostsPage bir bileşen oluşturalım. Her ne kadar minimal bir tarza sahip olsam da, onu canlandırmaktan çekinmeyin!

 export default async function PostsPage() { const res = await fetch('http://localhost:3000/api/posts'); const { posts } = await res.json(); return ( // Styles are for readability; customize as you wish! <div> <h1>All Blog Posts</h1> <hr style={{ width: '220px' }} /> <div style={{ paddingTop: '40px' }}> {posts.map(post => ( <article key={post.id}> <h2>{post.title}</h2> <p style={{ paddingBottom: '30px'}}>{post.body}</p> </article> ))} </div> </div> ); }

Şu ana kadar makalelerin bir listesini görüyor olmalısınız.

5. Tek Bir Blog Gönderisini Sergilemek

5.1. Gönderiyi Bağlama

Her yazı başlığının tıklanabilir olmasını sağlamak için Next.js'den Link bileşenini ekleyeceğiz:

 import Link from 'next/link'; export default async function PostsPage() { // ... rest of the code return ( <div> // ... rest of the code <div style={{ paddingTop: '40px' }}> {posts.map(post => ( <article key={post.id}> <Link href={`posts/${post.id}`}> <h2>{post.title}</h2> </Link> <p style={{ paddingBottom: '30px'}}>{post.body}</p> </article> ))} </div> </div> ); }

5.2. Tek Gönderi için API Rotası

Next.js API yolunda, belirli gönderileri kimliklerine göre getiriyoruz:

 import { NextResponse } from 'next/server' export async function GET(request, { params }) { const { id } = params; const res = await fetch(`https://dummyjson.com/posts/${id}`, { next: {revalidate: 60} }); const post = await res.json(); return NextResponse.json({ post }); }

5.3. Tek Bir Gönderi Görüntüleme

Bireysel gönderileri görüntülemek için Next.js'deki sunucu ve istemci bileşenleri arasındaki farkı anlamak çok önemlidir.

Verilen bileşen SinglePost , istemci tarafı veri alımını kullanır.

Temel olarak bu, sayfa oluşturulduktan sonra verilerin istemciye getirildiği anlamına gelir. Performanstan ödün vermeden zengin etkileşime olanak tanır. Bununla ilgili daha fazla bilgiyi React Essentials'daki Next.js belgelerinde okuyabilirsiniz.

İstemci Bileşenleri

İstemci Bileşenleri, uygulamanıza istemci tarafı etkileşimi eklemenizi sağlar. Next.js'de bunlar sunucuda önceden oluşturulur ve istemcide hidratlanır. İstemci Bileşenlerini, Sayfa Yönlendiricisindeki bileşenlerin her zaman nasıl çalıştığı gibi düşünebilirsiniz.

 'use client' import Link from 'next/link'; import { useEffect, useState } from 'react'; export default function SinglePost({params}) { const [post, setPost] = useState(null); const fetchPost = async (id) => { const res = await fetch(`http://localhost:3000/api/posts/${id}`); const {post} = await res.json(); post && setPost(post); } useEffect(() => { fetchPost(params.id); }, []) return ( <div style={{ paddingTop: '20px', paddingLeft: '20px' }}> <Link href='/'>Back to home</Link> <div style={{ paddingTop: '50px' }}> <article> <h1 style={{ paddingBottom: '10px' }}>{post?.title}</h1> {post?.tags.map((tag, index) => <span style={{ fontWeight: 'lighter' }} key={index}>{tag} | </span>)} <br/> <p style={{ paddingTop: '10px' }}>{post?.body}</p> </article> </div> </div> ) }

Artık makale ayrıntılarını görebilmelisiniz. Lütfen stil eksikliğini affedin!

6. Next.js'de Yükleme Kullanıcı Arayüzü ve Akışı Kullanma

İpucu: Gelişmiş kullanıcı deneyimi için bir yükleme bileşeni eklemeyi düşünün. Next.js, Yükleme Kullanıcı Arayüzü ve Akış ile yerleşik bir çözüm sunar. İçeriğiniz hazır olana kadar yükleme döndürücüyü göstermeye yardımcı olur. Kullanıcı Arayüzü Yükleme ve Akış hakkındaki bu resmi kılavuzla daha ayrıntılı bilgi edinin.

Örneğin:

 // You can add any UI inside Loading, including a Skeleton. export default function Loading() { return <LoadingSkeleton />}

7. Karar

Next.js uygulaması oluşturmak hem eğlenceli hem de aydınlatıcı olabilir.

Bir proje oluşturmayı, klasör yapımızı yönetmeyi, blog gönderilerini listelemeyi, bireysel gönderileri sergilemeyi ve hatta yükleme durumlarına değinmeyi öğrendik.

Next.js'nin web geliştirme topluluğundaki hızlı büyümesiyle birlikte burada öğrenilen beceriler çok değerlidir.

Bu temeli genişletin, daha fazla özelliği keşfedin ve mutlu kodlama!

8. Referanslar

Resmi Next.js Belgeleri

Makalenin verileri için DummyJson kullandım

Makaleyi oluşturmak için StackEdit'i kullandım

Zaman ayırdığınız ve öğrenmeye olan bağlılığınız için teşekkür ederiz. Geri bildiriminiz son derece değerlidir. Bu yazıya herhangi bir ekleme veya düzeltmeniz varsa lütfen bize ulaşın.

Benimle şu adresten iletişime geçin: dev.to topluluğu @leandro_nnz

hackernoon.com topluluğu @leandronnz

Twitter @digpollution

Şerefe!