Google clone made with Nextjs SSR and TailwindCSS.

You can see online demo here: https://google-clone-nextjs-jomiva.vercel.app/. Currently the online demo is using static data located at ./response.js this is because google's api is limited to 100 request per day. If you'd to use google's api, you will need to provide your own api and context key and declare them at ./keys.js:

export const API_KEY = "yourkey";
export const CONTEXT_KEY = "yourkey";

Once you have provided your keys you will need to change the static fetch flag at ./pages/search.jsx:

export async function getServerSideProps(context) {
  const useStaticData = true; // <- change it to false if you want to consume google's api
  const startIndex = context.query.start || 0;
  const data = useStaticData
    ? Response
    : await fetch(
        `https://www.googleapis.com/customsearch/v1?key=${API_KEY}&cx=${CONTEXT_KEY}&q=${context.query.term}&start=${startIndex}`
      ).then((resp) => resp.json());
  return {
    props: {
      results: data,
    },
  };
}

Images

Home PC

Search PC

Home Mobile

Search Mobile

That's all folks! Feel free to do all your changes you want to :) Made in Venezuela. @jomiva.