Build a Next.js Interactive Web-Based Dictionary App

Written by

javascriptdebugged

in

In today’s digital age, information is at our fingertips, yet finding quick and reliable definitions can still be a hassle. Imagine having a personalized dictionary right within your web browser, accessible instantly. This tutorial will guide you through building a dynamic, interactive dictionary application using Next.js. This project is perfect for beginners and intermediate developers looking to deepen their understanding of Next.js, API interactions, and state management. We’ll break down each step with clear explanations, code examples, and practical tips to help you create a functional and engaging dictionary app.

Why Build a Dictionary App?

Creating a dictionary app provides several benefits:

  • Practical Learning: You’ll learn core concepts like API calls, data fetching, and UI updates.
  • Real-World Application: It’s a useful tool you can use daily.
  • Customization: You can tailor the app to your specific needs, such as adding different dictionaries or features.
  • Portfolio Piece: It’s a great project to showcase your skills to potential employers.

Prerequisites

Before we begin, ensure you have the following:

  • Node.js and npm (or yarn): Installed on your machine.
  • A code editor: Such as VS Code, Sublime Text, or Atom.
  • Basic understanding of JavaScript and React.

Step-by-Step Guide

1. Setting Up the Next.js Project

First, let’s create a new Next.js project. Open your terminal and run the following command:

npx create-next-app dictionary-app
cd dictionary-app

This command sets up a basic Next.js project with all the necessary configurations. Navigate into the project directory.

2. Installing Dependencies

For this project, we’ll need a library to make API requests. We’ll use axios, a popular promise-based HTTP client. Install it using:

npm install axios

3. Choosing a Dictionary API

We’ll use a free dictionary API to fetch word definitions. One popular choice is the Free Dictionary API. You can find more information about it here: https://dictionaryapi.dev/. Note the API endpoint; we’ll need it later.

4. Creating the UI Components

Let’s create the components for our app. We’ll need:

  • Search Input: Where users will enter words.
  • Definition Display: To show the definition and other details.
  • Error Handling: To handle cases where the word is not found.

Open the pages/index.js file (or your preferred route file) and replace the default content with the following:

import React, { useState } from 'react';
import axios from 'axios';

function Home() {
  const [word, setWord] = useState('');
  const [definition, setDefinition] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  const handleSearch = async () => {
    setLoading(true);
    setError(null);
    setDefinition(null);
    try {
      const response = await axios.get(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`);
      setDefinition(response.data[0]);
    } catch (err) {
      setError('Word not found or an error occurred.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="container">
      <h1>Dictionary App</h1>
      <div className="search-bar">
        <input
          type="text"
          placeholder="Enter a word"
          value={word}
          onChange={(e) => setWord(e.target.value)}
        />
        <button onClick={handleSearch} disabled={loading}>
          {loading ? 'Searching...' : 'Search'}
        </button>
      </div>
      <div className="results">
        {error && <p className="error">{error}</p>}
        {definition && (
          <div className="definition-card">
            <h2>{definition.word}</h2>
            <p className="phonetic">{definition.phonetic}</p>
            {definition.meanings.map((meaning, index) => (
              <div key={index} className="meaning-block">
                <h3>{meaning.partOfSpeech}</h3>
                <ul>
                  {meaning.definitions.map((def, defIndex) => (
                    <li key={defIndex}>{def.definition}</li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

export default Home;

Here’s a breakdown of the code:

  • State Variables: We use useState to manage the word being searched, the definition, any errors, and the loading state.
  • Search Input: An input field allows users to enter a word.
  • Search Button: Triggers the handleSearch function.
  • handleSearch Function: Makes an API call to fetch the definition using axios. It also handles error and loading states.
  • Definition Display: Displays the definition if found, including the word, phonetic, part of speech, and definitions.
  • Error Handling: Displays an error message if the word isn’t found or an error occurs.

5. Styling the App

To make the app visually appealing, let’s add some basic styling. Create a file named styles/Home.module.css (or your preferred CSS file) and add the following CSS:

.container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-family: sans-serif;
}

.search-bar {
  display: flex;
  margin-bottom: 20px;
}

.search-bar input {
  flex-grow: 1;
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.search-bar button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.search-bar button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.results {
  margin-top: 20px;
}

.error {
  color: red;
}

.definition-card {
  border: 1px solid #eee;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.definition-card h2 {
  font-size: 1.8em;
  margin-bottom: 5px;
}

.phonetic {
  font-style: italic;
  color: #777;
}

.meaning-block {
  margin-bottom: 15px;
}

.meaning-block h3 {
  font-size: 1.2em;
  margin-bottom: 5px;
}

.meaning-block ul {
  list-style-type: disc;
  margin-left: 20px;
}

Import this CSS file into your pages/index.js file by adding the following line at the top of the file:

import styles from '../styles/Home.module.css';

And apply the styles by adding className={styles.container}, className={styles.searchBar}, etc., to the corresponding HTML elements.

Your pages/index.js file should now look like this:

import React, { useState } from 'react';
import axios from 'axios';
import styles from '../styles/Home.module.css';

function Home() {
  const [word, setWord] = useState('');
  const [definition, setDefinition] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  const handleSearch = async () => {
    setLoading(true);
    setError(null);
    setDefinition(null);
    try {
      const response = await axios.get(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`);
      setDefinition(response.data[0]);
    } catch (err) {
      setError('Word not found or an error occurred.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className={styles.container}>
      <h1>Dictionary App</h1>
      <div className={styles.searchBar}>
        <input
          type="text"
          placeholder="Enter a word"
          value={word}
          onChange={(e) => setWord(e.target.value)}
        />
        <button onClick={handleSearch} disabled={loading}>
          {loading ? 'Searching...' : 'Search'}
        </button>
      </div>
      <div className={styles.results}>
        {error && <p className={styles.error}>{error}</p>}
        {definition && (
          <div className={styles.definitionCard}>
            <h2>{definition.word}</h2>
            <p className={styles.phonetic}>{definition.phonetic}</p>
            {definition.meanings.map((meaning, index) => (
              <div key={index} className={styles.meaningBlock}>
                <h3>{meaning.partOfSpeech}</h3>
                <ul>
                  {meaning.definitions.map((def, defIndex) => (
                    <li key={defIndex}>{def.definition}</li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

export default Home;

6. Running the Application

To run your application, open your terminal, navigate to your project directory, and run:

npm run dev

This will start the development server. Open your browser and go to http://localhost:3000 to view your dictionary app.

Common Mistakes and How to Fix Them

  • CORS Errors: If you encounter CORS (Cross-Origin Resource Sharing) errors, ensure the API you are using supports CORS or consider using a proxy server.
  • Incorrect API Endpoint: Double-check the API endpoint URL for typos.
  • Handling Errors: Always include error handling in your try...catch blocks to gracefully handle API failures.
  • State Management: Make sure you are updating the state correctly to reflect the changes in the UI.

Enhancements and Next Steps

Here are some ways you can enhance your dictionary app:

  • Add Search Suggestions: Implement a search suggestion feature as the user types.
  • Implement Multiple Language Support: Allow users to switch between different dictionaries.
  • Add Audio Pronunciation: Integrate audio pronunciations of the words.
  • Save History: Store the search history for each user.
  • Improve UI/UX: Enhance the design and user experience of your app.

Key Takeaways

  • API Integration: You learned how to make API calls to fetch data.
  • State Management: You used useState to manage the app’s state.
  • UI Components: You created reusable UI components.
  • Error Handling: You implemented basic error handling.

FAQ

  1. How can I deploy this app?

    You can deploy your Next.js app to platforms like Vercel, Netlify, or AWS. These platforms provide easy deployment options.

  2. Can I use a different API?

    Yes, you can use any dictionary API. Just make sure to adjust the API endpoint and data parsing logic in your code.

  3. How do I handle API rate limits?

    If the API has rate limits, implement strategies like caching the data or using a proxy server to avoid hitting the limits. You can also implement a user authentication system.

  4. How can I add more features?

    Consider adding features like synonyms, antonyms, example sentences, and images. Research the API documentation for available features.

Building a dictionary app in Next.js is an excellent way to learn and apply various web development concepts. By following this tutorial, you’ve created a functional app that can be expanded with more features and customizations. This project is a solid foundation for your web development journey, offering hands-on experience in API integration, state management, and UI design. As you continue to build and refine your dictionary app, you’ll gain valuable skills and insights that can be applied to many other web development projects. Embrace the learning process and enjoy the journey of creating something useful and personalized.

More posts