İç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

Portfolio

Hire Me

Buy Me a Coffee

Next.Js 13 Parallel Routes: A Comprehensive Guide

Mastering JavaScript Shorthands

PostgreSQL or MySQL: What Should I Choose for My Full-Stack Project?

Bu ses hikayenin orijinal dilinde üretilmiştir!

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

About Author

YORUMLAR

ETİKETLERİ ASIN

BU YAZI

Related Stories

Kazanmak için Dokun: Telegram, Solana'dan Önce Sonraki 10 Milyar Kripto Kullanıcısına Katılabilir

HackerNoon Kendi Ana Dilinizde 🆕 ‼️ Teknoloji Blog Yazıları için 77 Dil Ana Sayfası

Dijital Göçebeler Dinleyin: Tayland'ın Yeni DTV Vizesi Hakkında Bilmeniz Gerekenler

HackerNoon Yazma Yarışmasını mı Kazanmak İstiyorsunuz? İşte #crypto-api Yarışması Kazananlarının Önerileri

Kazanmak için Dokun: Telegram, Solana'dan Önce Sonraki 10 Milyar Kripto Kullanıcısına Katılabilir

HackerNoon Kendi Ana Dilinizde 🆕 ‼️ Teknoloji Blog Yazıları için 77 Dil Ana Sayfası

Dijital Göçebeler Dinleyin: Tayland'ın Yeni DTV Vizesi Hakkında Bilmeniz Gerekenler

HackerNoon Yazma Yarışmasını mı Kazanmak İstiyorsunuz? İşte #crypto-api Yarışması Kazananlarının Önerileri

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps