İçindekiler giriiş Projenin Kurulumu Klasör Yapısını Anlamak Tüm Blog Yazılarını Listeleme Tek Bir Blog Gönderisini Sergileme Next.js'de Yükleme Kullanıcı Arayüzü ve Akışı Kullanma Çözüm 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ı bulabilirsiniz burada 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 kullanmama rağmen, veya kullanmaktan çekinmeyin: yarn npm pnpm yarn dev Şimdi varsayılan Next.js şablon sayfasını bulacağınız adresini ziyaret edin. http://localhost:3000 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ı içinde blog gönderileri için sahte bir API ayarlayacağız. Burada, verilerimizi her 60 saniyede bir yeniden doğrulamak istediğimizi belirtir. /app/api/posts/route.js next: { revalidate: 60 } 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: : 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. Zamana dayalı 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). İsteğe bağlı yeniden doğrulama 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 seçeneğini kullanabilirsiniz. next.revalidate fetch İş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 bir bileşen oluşturalım. Her ne kadar minimal bir tarza sahip olsam da, onu canlandırmaktan çekinmeyin! PostsPage 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 bileşenini ekleyeceğiz: Link 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 , istemci tarafı veri alımını kullanır. SinglePost 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 okuyabilirsiniz. bilgiyi React Essentials'daki Next.js belgelerinde İstemci Bileşenleri İstemci Bileşenleri, uygulamanıza istemci tarafı etkileşimi eklemenizi sağlar. Next.js'de bunlar sunucuda ve istemcide hidratlanır. İstemci Bileşenlerini, Yönlendiricisindeki bileşenlerin her zaman nasıl çalıştığı gibi düşünebilirsiniz. önceden oluşturulur Sayfa '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 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. daha ayrıntılı bilgi edinin. İpucu: Kullanıcı Arayüzü Yükleme ve Akış hakkındaki bu resmi kılavuzla Ö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 kullandım DummyJson Makaleyi oluşturmak için kullandım StackEdit'i 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: topluluğu dev.to @leandro_nnz topluluğu hackernoon.com @leandronnz Twitter @digpollution Şerefe!

Read My Stories

Bu ses hikayenin orijinal dilinde üretilmiştir!

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

Çok uzun; Okumak

@leandronnz

İLGİLİ ÖYKÜLER