Google Clone avec Next.js

C'est le clone de Google où vous pouvez rechercher n'importe quoi et il affichera exactement le même résultat que nous avons utilisé l'API personnalisée de Google à travers laquelle nous avons réalisé ce projet, il est entièrement réactif et vous pouvez également l'installer en tant que PWA. Vous pouvez également visiter les liens sans danger, mais il y a un inconvénient à ce que Google n'autorise que 100 requêtes à partir d'une seule clé API par jour. Ainsi, cette application ne peut rechercher que 100 fois par jour.

Fonctionnalités

• Recherche Google précise et en temps réel
• Mode plein écran
• PWA installable
• Rechercher n'importe quelle requête
• Réactivité totale
• Prise en charge du thème sombre en fonction de l'appareil de l'utilisateur

Technologies utilisées

 

Démonstration

Cliquer ici pour voir le site

Commencer

Créer un répertoire ou un dossier

mkdir project

Cloner le projet

  clone git https://github.com/codingtuto/google-clone.git

Aller dans le répertoire du projet

  cd project

Installer les dépendances

  npm install
  # ou
  yarn

Tout d'abord, lancez le serveur de développement :

  npm run dev
  # ou
  yarn dev

Ouvrez http://localhost:3000 avec votre navigateur pour voir le résultat.

Vous pouvez commencer à éditer la page en modifiant pages/index.js. La page se met à jour automatiquement lorsque vous modifiez le fichier.

Les routes API sont accessibles sur http://localhost:3000/api/hello. Ce point de terminaison peut être modifié dans pages/api/hello.js.

Le répertoire pages/api est mappé sur /api/*. Les fichiers de ce répertoire sont traités comme des itinéraires d'API au lieu de pages React.

Variables d'environnement

Pour exécuter ce projet, vous devrez ajouter les variables d'environnement suivantes à votre fichier .env

NEXT_PUBLIC_API_KEY - Cliquez ici

• Allez sur le lien et cliquez sur Obtenir une clé
• Si vous avez déjà créé un projet, continuez, sinon créez-en un nouveau et suivez les étapes après avoir terminé, vous obtiendrez la clé API

NEXT_PUBLIC_CONTEXT_KEY - Cliquez ici

• Accédez au lien et saisissez "www.google.com", puis cliquez sur Créer
• puis cliquez sur Obtenir le code
• vous obtiendrez la balise de fichier de script dans ce fichier, telle que <script async src="https://cse.google.com/cse.js?cx=b221ffffddfd63f8a4"></script> nous n'avons besoin que du cx valeur copier cela et coller dans votre .env

NEXT_PUBLIC_GEOLOCATION_API - Cliquez ici

• Allez sur le lien et créez un compte et obtenez l'API gratuitement
• Il y a une limite de 1500 demandes par jour, alors soyez prudent avec cela et collez-le dans .env

Licence

MIT

Retour d'information

Si vous avez des commentaires, veuillez nous contacter à notre bot Telegram @codingsupport_bot

Développeur

• @codingtuto