Google Clone with Next.js

It is the clone of the Google where you can search for anything and it will show the exactly same result we’ve used the Google Custom API through which we made this project, this is full responsive and you can also install it as the PWA. You can visit the links as well not danger in that, but there is one drawback of this that Google only allow 100 request from single API KEY per day. So this application can search only 100 times a day.

Features

  • Realtime and Accurate Google Search
  • Full Screen mode
  • Installable PWA
  • Search Any Query
  • Full Responsiveness
  • Dark Theme support based on user’s device

Technologies used

 

Demo

Click Here to see the Live Demo

Screenshots

Getting Started

Create a directory or a folder

  mkdir project

Clone the project

  git clone https://github.com/j471n/next-google.git

Go to the project directory

  cd project

Install dependencies

  npm install
  # or
  yarn

First, run the development server:

  npm run dev
  # or
  yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

NEXT_PUBLIC_API_KEY – Click Here

  • Go to link and click on Get a Key
  • If you’ve already created a project than continue with it else create a new one and follow the steps after completing you’ll get the API KEY

NEXT_PUBLIC_CONTEXT_KEY – Click Here

  • Go to link and type www.google.com and click Create
  • then click on Get Code
  • you will get the script file tag in that file such as <script async src="https://cse.google.com/cse.js?cx=b221ffffddfd63f8a4"></script> we only need the cx value copy that and paste in you .env

NEXT_PUBLIC_GEOLOCATION_API – Click Here

  • Go to the link and create an account and get the API For free
  • There is 1500 request limit per day so be carefull with that and paste it to .env

License

MIT

Feedback

If you have any feedback, please reach out to us at [email protected]

Developer

GitHub

View Github