real time full text search nextjs

Tigris propose une solution de recherche en texte intégral intégré qui vous permet de créer de puissantes expériences de recherche dans votre application. En utilisant la technologie de type, ce moteur de recherche intégré élimine le besoin d'un système de recherche supplémentaire, offrant une expérience fluide et évolutive pour votre base de données.

⚡ ègris Exemple d'application sur Next.js - Recherche en temps réel

Cette application est construite avec Next.js et Tigre et fournit une solution complète. Les produits sont stockés et récupérés à partir d'une base de données Tigre à afficher aux clients. Pour améliorer l'accessibilité, j'ai intégré une fonction de recherche en temps réel avec le Tigre permettant aux utilisateurs de rechercher rapidement les produits souhaités.

Démo du projet

Déploiement de l'application

Pour déployer cette application sur vos comptes Vercel et Netlify, vous aurez besoin d'un compte GitHub, Vercel, Netlify et Tigris. Une fois que vous avez tous les comptes, cliquez simplement sur les boutons "Déployer" et suivez les instructions pour déployer l'application sur vos comptes.

Exécuter Next.js Server et Tigre localement

Condition préalable

1. Inscrivez-vous sur la console Tigre
2. Node.js 14.6.0 ou plus récent
3. MacOS, Windows et Linux sont pris en charge

Instructions

1. Clone ce dépôt sur votre ordinateur

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

2. Installer des dépendances

 cd realtime-search
npm install

3. Exécutez le serveur suivant.js

npm run dev

Remarque: Pour que l'application fonctionne, vous devez d'abord créer un projet sur la console Tigre, puis copier les informations d'identification générées dans le fichier .env . Pour des instructions sur la façon de procéder, veuillez vous référer au tutoriel qui l'accompagne.

? Tout fait. Vous devriez pouvoir utiliser l'application sur localhost:3000 dans le navigateur. N'hésitez pas à jouer ou à faire un code qui passe ensuite?

? Procédure pas à pas de code

Structure de fichiers

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

? Définition du schéma du Tigre

DB / Models / Store.TS - L'application dispose d'un seul products de collecte qui stocke les produits du magasin. Cette collection est automatiquement créée / mise à jour par le script de configuration.

❇️ Routes de l'API pour accéder aux données dans la collecte du Tigre

Toutes les routes API suivantes sont définies sous pages/api/ . Nous avons trois fichiers exposant des points de terminaison:

pages/api/store/index.ts

• GET /api/store pour obtenir une gamme de produits comme tableau
• GET /api/items/search?q=query pour trouver et retourner les produits correspondant à la requête donnée

Étapes suivantes

N'hésitez pas à ajouter plus de fonctionnalités ou à personnaliser l'application pour votre cas d'utilisation et à en savoir plus sur la plate-forme de données Tigre

? Contributif

Les contributions font de la communauté open source un endroit incroyable pour apprendre, inspirer et créer. Toutes les contributions que vous faites sont grandement appréciées .

Si vous avez une suggestion qui améliorerait cela, veuillez débarquer le dépôt et créer une demande de traction. Vous pouvez également ouvrir un problème. N'oubliez pas de donner une étoile au projet! Merci encore!

1. Fourk le projet
2. Créez votre branche de fonctionnalité ( git checkout -b feature/AmazingFeature )
3. Commissez vos modifications ( git commit -m 'Add some AmazingFeature' )
4. Push to the Branch ( git push origin feature/AmazingFeature )
5. Ouvrir une demande de traction

(retour en haut)