Algolia, Next.js ve MongoDB ile Tam Yığın Arama | Bölüm 1
Bu makalede, güçlü bir arama deneyimi oluşturmak için Algolia, Next.js ve MongoDB’yi nasıl entegre edebileceğinizi adım adım ele alacağız. Algolia, hızlı ve doğru arama sonuçları sunan bir bulut tabanlı arama platformudur. Next.js, performanslı ve SEO dostu web uygulamaları geliştirmek için kullanabileceğiniz bir React çerçevesidir. MongoDB ise esnek ve ölçeklenebilir bir NoSQL veritabanı sistemidir.
Proje Kurulumu
Öncelikle, projeyi başlatmak için gerekli paketleri kuracağız. Proje dizininize bir terminal açın ve aşağıdaki komutları çalıştırın:
“`bash
npm init -y
npm install next react react-dom
npm install algoliasearch
npm install mongoose
“`
Bu paketleri kurduktan sonra, temel bir Next.js uygulaması oluşturabiliriz. `pages` klasörüne `index.js` adında bir dosya oluşturun ve aşağıdaki kodu ekleyin:
“`javascript
import Head from ‘next/head’;
export default function Home() {
return (
Algolia Arama Uygulamasına Hoş Geldiniz!
);
}
“`
Bu kod, basit bir başlık ve başlık içeren temel bir Next.js sayfasi oluşturur. Uygulamayı başlatmak için terminalde `npm run dev` komutunu çalıştırın.
MongoDB Bağlantısı
MongoDB’ye bağlanmak için, öncelikle bir veritabanı oluşturmalıyız. MongoDB’nin komut satırı arayüzünü kullanarak `products` adında bir veritabanı oluşturabiliriz.
“`bash
mongo
use products
“`
Ardından, `products` adında bir koleksiyon oluşturun ve bazı ürün verilerini ekleyin:
“`javascript
db.products.insertMany([
{
name: ‘Apple iPhone 13 Pro’,
description: ‘Güçlü bir akıllı telefon.’,
price: 1000,
imageUrl: ‘https://www.example.com/iphone13pro.jpg’,
},
{
name: ‘Samsung Galaxy S22 Ultra’,
description: ‘Bir diğer güçlü akıllı telefon.’,
price: 1200,
imageUrl: ‘https://www.example.com/s22ultra.jpg’,
},
{
name: ‘Sony PlayStation 5’,
description: ‘Yeni nesil oyun konsolu.’,
price: 500,
imageUrl: ‘https://www.example.com/ps5.jpg’,
},
]);
“`
MongoDB’ye bağlantı kurmak için `mongoose` paketini kullanacağız. `utils` adında bir klasör oluşturun ve `db.js` adında bir dosya ekleyin. Aşağıdaki kodu `db.js` dosyasına ekleyin:
“`javascript
import mongoose from ‘mongoose’;
const connection = {};
async function dbConnect() {
if (connection.isConnected) {
return;
}
const db = await mongoose.connect(process.env.MONGODB_URI, {
useNewUrlParser: true,
useUnifiedTopology: true,
});
connection.isConnected = db.connections[0].readyState;
console.log(‘MongoDB Bağlantısı Başarılı’);
}
export default dbConnect;
“`
Bu kod, MongoDB’ye bağlantı kurmayı ve bir bağlantı nesnesi oluşturmayı sağlar. `process.env.MONGODB_URI` değişkeni, MongoDB bağlantı dizesini içerir. Bu değişkeni, `.env` dosyasında tanımlamanız gerekecektir.
Algolia Entegresi
Algolia’ya entegre olmak için, öncelikle bir Algolia hesabı oluşturmanız ve API anahtarlarınızı almanız gerekir. API anahtarlarınızı `utils` klasöründeki `algolia.js` dosyasında saklayabilirsiniz:
“`javascript
import algoliasearch from ‘algoliasearch’;
const client = algoliasearch(process.env.ALGOLIA_APP_ID, process.env.ALGOLIA_API_KEY);
const index = client.initIndex(‘products’);
export default index;
“`
Bu kod, Algolia istemcisini başlatır ve `products` adında bir indeks oluşturur. `process.env.ALGOLIA_APP_ID` ve `process.env.ALGOLIA_API_KEY` değişkenlerini, `.env` dosyasında tanımlamanız gerekecektir.
Sonuç
Bu makalede, Algolia, Next.js ve MongoDB’yi kullanarak tam yığın arama uygulaması geliştirmeye başlamanın temel adımlarını inceledik. Bir sonraki adım, MongoDB veritabanını Algolia indeksiyle senkronize etmek ve arama işlemini uygulamak olacaktır. Bu konuları, bu serinin sonraki bölümlerinde ele alacağız.
Referanslar
# Etiketler
#Algolia #Next.js #MongoDB #Arama #TamYığın #WebGeliştirme #E-Ticaret #JavaScript #React #Veritabanı #API #SEO #Performans