Introduction

Since I already had experience with React.Js projects, I decided to get to know one of it's "meta frameworks", and coincidentally, I got a beginner-friendly course on Udemy by Sahand Gavidel, where he guides through the fundamentals of Next.js with a hands-on approach. The course includes step-by-step instructions for building four clone projects, with one of them replicating the Google interface.

See the details

⚠ It's important to state that some functionalities such as "Sign in", "Microphone input" and "Settings" were not implemented for now, since this application focus on its search functionality. However, I intend to implement some other functionalities.

Getting Started

To clone and run this project locally, firstly:

1. Ensure you have Node.js installed, with a minimum version of 18.x or a later stable release;
2. Get a free Google Custom Search API key;

   In order to identify your application client, you will:

   • need an API key to receive data. This requires a Google account; https://developers.google.com/custom-search/v1/using_rest?hl=en
   • Create an .env file in the root of the project and assign your API key value to the corresponding environment variable;
     You can name it however you would like.
     

            GOOGLE_API_KEY = # paste your Google Search API key here
          

3. Get a Context Key;

   You will need to set up a Programming Search Engine. This means you will have to:

   • Create a project - choose to search the entire web;
     https://programmablesearchengine.google.com/controlpanel/create?hl=en
   • In your .env file, assign your context key value to the corresponding environment variable;
     You can name it however you would like.
     

             CONTEXT_KEY = # paste your Context key here
           

4. Run the application

   In root folder, run the command:

      npm run dev
      # or
      yarn dev
      # or
      pnpm dev
      # or
      bun run dev
    

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

5. Get API key for IP Localization (Optional)

   This clone gets the user IP address using just like Google and its sets the user's country in the footer. By default, it shows "United States".
   Sahand uses the free package of eXTReMe Geolocation. However, somehow it's not possible to create an account with a Gmail or Hotmail address.
   I could get the same result using ipgeolocation.

   • Create an account;
   • Once you've signed up/logged in, click on "Dashboard"
   • Generate your API Key and copy it
   • In your .env file, assign your ipgeolocation API key value to the corresponding environment variable;
     You can still name it however you would like, but since this component is rendered client side, the environment variable requires the NEXT_PUBLIC_ prefix.

             NEXT_PUBLIC_IP_API_KEY = # past you ipgeolocation key here
           

Development

Stack and Language Decision

Moreover, while Sahand instructs the project using JavaScript, I've chose deliberately to implement it using TypeScript. This decision not only eases the development process with enhanced type safety, but also aligns with the rising trend and widespread adoption of TypeScript in the developer community.
Also, it's worth noting that this project was built with Next.js 14, while Sahand utilized its earlier version in the course.

Styles, Icons and Formatting

To style the project, it was employed Tailwind CSS, a CSS framework which provides classes to style HTML elements, contributing to a more efficient development process.
Additionally, for the integration of icons, React Icons was employed—an extensive library featuring a diverse collection of icons to enhance the overall user experience.
In order to achieve the boldened search term in each result description, html-react-parser was employed, once Google search API brings a property called htmlSnippet for this purpose.

See the example below