real time full text search nextjs

Tigris menawarkan solusi pencarian teks lengkap terintegrasi yang memungkinkan Anda membuat pengalaman pencarian yang kuat dalam aplikasi Anda. Memanfaatkan TypeSense Technology, mesin pencari tertanam ini menghilangkan kebutuhan akan sistem pencarian tambahan, memberikan pengalaman yang lancar dan dapat diskalakan untuk database Anda.

⚡ ️ Aplikasi Sampel Tigris di Next.js - Pencarian real -time

Aplikasi ini dibangun dengan Next.js dan Tigris dan memberikan solusi full-stack. Produk disimpan dan diambil dari database Tigris untuk ditampilkan kepada pelanggan. Untuk meningkatkan aksesibilitas, saya mengintegrasikan fitur pencarian real-time dengan Tigris yang memungkinkan pengguna untuk dengan cepat mencari produk yang diinginkan.

Demo proyek

Menyebarkan aplikasi

Untuk menggunakan aplikasi ini ke akun Vercel dan Netlify Anda, Anda akan memerlukan akun GitHub, Vercel, Netlify dan Tigris. Setelah Anda memiliki semua akun, cukup klik tombol "Menyebarkan" dan ikuti instruksi untuk menggunakan aplikasi ke akun Anda.

Menjalankan Next.js Server & Tigris secara lokal

Prasyarat

1. Daftar di konsol Tigris
2. Node.js 14.6.0 atau lebih baru
3. MacOS, Windows, dan Linux didukung

Instruksi

1. Klon repo ini di komputer Anda

git clone https://github.com/tigrisdata-community/realtime-search

2. Instal dependensi

 cd realtime-search
npm install

3. Jalankan server berikutnya

npm run dev

Catatan: Agar aplikasi berfungsi, Anda harus terlebih dahulu membuat proyek di konsol Tigris dan kemudian menyalin kredensial yang dihasilkan ke file .env . Untuk instruksi tentang cara melakukan ini, silakan merujuk ke tutorial yang menyertainya ..

? Semua selesai. Anda harus dapat menggunakan aplikasi di localhost:3000 di browser. Jangan ragu untuk bermain-main atau melakukan kode walk-through selanjutnya?

? Panduan Kode

Struktur file

 ├── package.json
├── lib
│   ├── tigris.ts
├── db
│   └── models
│       └── store.ts
└── pages
    ├── index.tsx
    └── api
        └── store
            ├── index.ts
            └── search.ts

? Definisi Skema Tigris

DB/MODEL/STORE.TS - Aplikasi ini memiliki satu products koleksi yang menyimpan produk di toko. Koleksi ini secara otomatis dibuat/diperbarui oleh skrip pengaturan.

❇️ Rute API untuk mengakses data dalam koleksi Tigris

Semua rute API berikutnya.js didefinisikan di bawah pages/api/ . Kami memiliki tiga file yang mengekspos titik akhir:

pages/api/store/index.ts

• GET /api/store untuk mendapatkan serangkaian produk sebagai array
• GET /api/items/search?q=query untuk menemukan dan mengembalikan produk yang sesuai dengan kueri yang diberikan

Langkah selanjutnya

Jangan ragu untuk menambahkan lebih banyak fungsi atau menyesuaikan aplikasi untuk kasus penggunaan Anda dan pelajari lebih lanjut tentang platform data TIGRIS

? Berkontribusi

Kontribusi inilah yang membuat komunitas open source menjadi tempat yang luar biasa untuk belajar, menginspirasi, dan menciptakan. Kontribusi apa pun yang Anda buat sangat dihargai .

Jika Anda memiliki saran yang akan membuat ini lebih baik, silakan garukan repo dan buat permintaan tarik. Anda juga bisa membuka masalah. Jangan lupa memberi proyek bintang! Terima kasih lagi!

1. Garpu proyek
2. Buat Cabang Fitur Anda ( git checkout -b feature/AmazingFeature )
3. Komit perubahan Anda ( git commit -m 'Add some AmazingFeature' )
4. Dorong ke cabang ( git push origin feature/AmazingFeature )
5. Buka permintaan tarik

(kembali ke atas)