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.
- Realtime and Accurate Google Search
- Full Screen mode
- Installable PWA
- Search Any Query
- Full Responsiveness
- Dark Theme support based on user’s device
Create a directory or a folder
Clone the project
git clone https://github.com/j471n/next-google.git
Go to the project directory
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.
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.comand click Create
- then click on
- 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
cxvalue copy that and paste in you
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
If you have any feedback, please reach out to us at [email protected]