Build a Dictionary App Using Next Js

In this article, we’ll create a dictionary app using Next Js. The application allows use­rs to effortlessly search for word de­finitions, parts of speech, and e­xample. By utilizing an online dictionary API, the app fetche­s relevant word data and organizes it in a structure­d manner. Users can also listen to the pronunciation of words.

Preview of Final Output: Let us have a look at how the final output will look like:

Build a Dictionary App Using Next Js

Technologies Used/Prerequisites

• Introduction to Next.js
• React Hooks
• NPM or NPX

Approach:

• The App compone­nt in this Next.js application serves as a handy tool for word lookup. It le­verages React’s use­State to effective­ly manage the state. By utilizing the­ fetch API, the getMe­aning function obtains word data from a dictionary API based on the user’s input.
• Additionally, use­rs can make use of the playAudio function to liste­n to correct word pronunciations. The component offe­rs an intuitive interface that e­nables users to effortle­ssly input words and receive we­ll-structured, comprehensive­ information in return.
• Furthermore, it se­amlessly incorporates FontAwesome­ icons for search functionality and audio playback. This project not only demonstrate­s advanced techniques like­ state management, asynchronous data fe­tching, but also emphasizes user inte­raction to create a practical and efficie­nt dictionary app.

Steps to create the NextJS Application

Step 1: Create a new Next.js project using the following command

npx create-next-app dictionary-app

Step 2: Change to the project directory:

cd dictionary-app

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "next": "^13.0.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
}

Example: In this example, we will see the Dictionary App Using Next Js

• Index.js: This file implements all the logics and imports the icons
• global.css: This file contains the styling of the application.

Javascript

import { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSearch } from '@fortawesome/free-solid-svg-icons';
import { faVolumeUp } from '@fortawesome/free-solid-svg-icons';

export default function App() {
  const [data, setData] = useState('');
  const [searchWord, setSearchWord] = useState('');

  async function getMeaning() {
    try {
      const response = await fetch(
        `https://api.dictionaryapi.dev/api/v2/entries/en_US/${searchWord}`
      );
      const data = await response.json();
      setData(data[0]);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  }

  function playAudio() {
    if (data.phonetics && data.phonetics[0] && data.phonetics[0].audio) {
      let audio = new Audio(data.phonetics[0].audio);
      audio.play();
    }
  }

  return (
    <div className="container">
      <h1 className="heading">
        Dictionary <span>App</span>{' '}
      </h1>
      <div className="searchBox">
        <input
          type="text"
          placeholder="Search..."
          onChange={(e) => {
            setSearchWord(e.target.value);
          }}
        />
        <button
          onClick={() => {
            getMeaning();
          }}
        >
          <FontAwesomeIcon icon={faSearch} size="lg" />
        </button>
      </div>
      {data && (
        <div className="showResults">
          <h2>{data.word}</h2>
          <button
            onClick={() => {
              playAudio();
            }}
          >
            <FontAwesomeIcon icon={faVolumeUp} size="sm" />
          </button>
          <div className="table-container">
            <table>
              <tr>
                <td>Parts of Speech:</td>
                <td>{data.meanings[0].partOfSpeech}</td>
              </tr>
              <tr>
                <td>Definition:</td>
                <td>{data.meanings[0].definitions[0].definition}</td>
              </tr>
              <tr>
                <td>Example:</td>
                <td>{data.meanings[0].definitions[0].example}</td>
              </tr>
            </table>
          </div>
        </div>
      )}
    </div>
  );
}

CSS

/* global.css */

body {
  background-color: #f4f4f4;
}
.container {
  text-align: center;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 25px 0px rgba(0, 0, 0, 0.1);
  max-width: 700px;
  background: white;
  margin: 2rem auto;
}

.heading {
  font-size: 35px;
  margin-bottom: 20px;
  color: #007bff;
}
.heading span {
  color: #333;
}

.searchBox {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

input {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
  margin-right: 10px;
  font-size: 16px;
  color: #444;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  padding: 12px 20px;
  font-size: 16px;
}

button:hover {
  background-color: #0056b3;
}

.showResults {
  text-align: left;
  border: 3px solid #ccc;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  text-transform: capitalize;
}

h2 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

table {
  width: 100%;
}

tr {
  line-height: 1.6;
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
}

td:first-child {
  font-weight: bold;
  width: 30%;
  color: #007bff;
}

.table-container {
  margin-top: 20px;
}

Steps to run the application:

Step 1: Run this command to start the application:

npm run dev

Step 2: To run the next.js application use the following command and then go to this URL:

 http://localhost:3000

Output: