real time full text search nextjs

Tigris bietet eine integrierte Volltext-Suchlösung, mit der Sie leistungsstarke Sucherlebnisse in Ihrer Anwendung erstellen können. Mithilfe der Typense -Technologie beseitigt diese eingebettete Suchmaschine die Notwendigkeit eines zusätzlichen Suchsystems und bietet eine reibungslose und skalierbare Erfahrung für Ihre Datenbank.

⚡ ️Tigris

Diese Anwendung ist mit Next.js und Tigris erstellt und bietet eine Full-Stack-Lösung. Produkte werden aus einer Tigris -Datenbank gespeichert und abgerufen, die Kunden angezeigt werden soll. Um die Zugänglichkeit zu verbessern, habe ich eine Echtzeit-Suchfunktion mit Tigris integriert, mit der Benutzer schnell nach ihren gewünschten Produkten suchen können.

Projektdemo

Bereitstellung der App

Um diese App für Ihre Konten in Ihrem Vercel und Netlify bereitzustellen, benötigen Sie ein GitHub-, Vercel-, Netlify- und Tigris -Konto. Sobald Sie alle Konten haben, klicken Sie einfach auf die Schaltflächen "Bereitstellen" und befolgen Sie die Anweisungen, um die App für Ihre Konten bereitzustellen.

Ausführen von Next.js Server & Tigris lokal

Voraussetzungen

1. Melden Sie sich bei der Tigris -Konsole an
2. Node.js 14.6.0 oder neuer
3. MacOS, Windows und Linux werden unterstützt

Anweisungen

1. Klonen Sie dieses Repo auf Ihren Computer

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

2. Abhängigkeiten installieren

 cd realtime-search
npm install

3. Führen Sie den nächsten.js -Server aus

npm run dev

Hinweis: Damit die Anwendung funktioniert, müssen Sie zuerst ein Projekt auf der Tigris -Konsole erstellen und dann die generierten Anmeldeinformationen in die .env -Datei kopieren. Für Anweisungen dazu finden Sie auf das begleitende Tutorial.

? Alles getan. Sie sollten in der Lage sein, App für localhost:3000 im Browser zu verwenden. Fühlen Sie sich frei, um herumzuspielen oder als nächstes einen Code zu durchlaufen?

? Codethrough

Dateistruktur

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

? Tigris -Schema -Definition

DB/models/store.ts - Die App verfügt über eine einzelne products , die die Produkte im Geschäft speichert. Diese Sammlung wird vom Setup -Skript automatisch erstellt/aktualisiert.

❇️ API -Routen zum Zugriff auf Daten in der Tigrissammlung

Alle nächsten.js -API -Routen werden unter pages/api/ definiert. Wir haben drei Dateien, die Endpunkte aufdecken:

pages/api/store/index.ts

• GET /api/store um eine Reihe von Produkten als Array zu erhalten
• GET /api/items/search?q=query , um Produkte zu finden und zurückzugeben

Nächste Schritte

Fühlen Sie sich frei, mehr Funktionen hinzuzufügen oder die App für Ihren Anwendungsfall anzupassen und mehr über die Tigris-Datenplattform zu erfahren

? Beitragen

Beiträge machen die Open -Source -Community zu einem erstaunlichen Ort, um zu lernen, zu inspirieren und zu kreieren. Alle Beiträge, die Sie leisten, werden sehr geschätzt .

Wenn Sie einen Vorschlag haben, der dies besser machen würde, geben Sie bitte das Repo und erstellen Sie eine Pull -Anfrage. Sie können auch einfach ein Problem eröffnen. Vergessen Sie nicht, dem Projekt einen Stern zu geben! Danke noch einmal!

1. Geben Sie das Projekt auf
2. Erstellen Sie Ihre Funktionszweig ( git checkout -b feature/AmazingFeature ).
3. Bestimmen Sie Ihre Änderungen ( git commit -m 'Add some AmazingFeature' )
4. Push in den Zweig ( git push origin feature/AmazingFeature )
5. Öffnen Sie eine Pull -Anfrage

(zurück nach oben)