Build a Simple Next.js Interactive Web-Based Translation App

Written by

javascriptdebugged

in

In today’s interconnected world, the ability to communicate across languages is more important than ever. Whether you’re browsing the web, reading documents, or interacting with people from different countries, having a quick and easy way to translate text can be incredibly useful. In this tutorial, we’ll build a simple, interactive web-based translation app using Next.js, a popular React framework. This project is perfect for beginners and intermediate developers looking to expand their skills and understand how to integrate APIs into their applications.

Why Build a Translation App?

Creating a translation app offers several advantages:

  • Practical Skill Development: You’ll learn how to fetch data from an API, handle user input, and update the user interface dynamically.
  • Real-World Application: Translation apps have a wide range of uses, from personal productivity to business communication.
  • Framework Familiarity: Next.js provides a great environment for building web applications, and this project will help you grasp its core concepts.

Prerequisites

Before we begin, make sure you have the following:

  • Node.js and npm (or yarn): You’ll need these to manage your project dependencies and run the development server.
  • A Code Editor: Visual Studio Code, Sublime Text, or any other editor you prefer.
  • Basic HTML, CSS, and JavaScript knowledge: Familiarity with these technologies will be helpful.
  • An API Key for a Translation Service: We’ll be using a translation API (like Google Translate API, DeepL API, or another free or paid option). You’ll need to sign up for an account and obtain an API key. For this tutorial, we will use the free version of the LibreTranslate API as it does not require an API key.

Step-by-Step Guide

1. Setting Up the Next.js Project

Let’s start by creating a new Next.js project. Open your terminal and run the following command:

npx create-next-app translation-app

This command will create a new directory called translation-app with the basic structure of a Next.js project. Navigate into the project directory:

cd translation-app

2. Installing Dependencies

We’ll need to install a library to make API requests. We can use the axios library for this. Run the following command:

npm install axios

3. Project Structure and File Setup

Our project will have a simple structure:

  • pages/index.js: This will be our main page, where we’ll handle the user interface and API calls.
  • components/TranslationForm.js: This will be a reusable component for the translation form.
  • styles/global.css: This will hold global styles for our application.

4. Creating the Translation Form Component (components/TranslationForm.js)

Create a new file named TranslationForm.js inside a components folder.

Here’s the code for the TranslationForm component:

import React, { useState } from 'react';

function TranslationForm({ onTranslate }) {
  const [text, setText] = useState('');
  const [sourceLanguage, setSourceLanguage] = useState('en');
  const [targetLanguage, setTargetLanguage] = useState('es');

  const handleSubmit = (e) => {
    e.preventDefault();
    onTranslate(text, sourceLanguage, targetLanguage);
  };

  return (
    <form onSubmit={handleSubmit} className="translation-form">
      <label htmlFor="text">Enter Text:</label>
      <textarea
        id="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        className="text-area"
      />

      <div className="language-selectors">
        <div>
          <label htmlFor="sourceLanguage">From:</label>
          <select
            id="sourceLanguage"
            value={sourceLanguage}
            onChange={(e) => setSourceLanguage(e.target.value)}
          >
            <option value="en">English</option>
            <option value="es">Spanish</option>
            <option value="fr">French</option>
            <option value="de">German</option>
            <!-- Add more languages as needed -->
          </select>
        </div>
        <div>
          <label htmlFor="targetLanguage">To:</label>
          <select
            id="targetLanguage"
            value={targetLanguage}
            onChange={(e) => setTargetLanguage(e.target.value)}
          >
            <option value="es">Spanish</option>
            <option value="en">English</option>
            <option value="fr">French</option>
            <option value="de">German</option>
            <!-- Add more languages as needed -->
          </select>
        </div>
      </div>

      <button type="submit">Translate</button>
    </form>
  );
}

export default TranslationForm;

Explanation:

  • The component uses the useState hook to manage the input text, source language, and target language.
  • The handleSubmit function is called when the form is submitted. It calls the onTranslate prop, which will be defined in our main page.
  • The form includes a textarea for the user to enter text and two select elements for choosing the source and target languages.

5. Styling the Translation Form (styles/global.css)

Create a file named global.css inside a styles folder. Add the following CSS to style the form:

.translation-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.text-area {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.language-selectors {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.language-selectors div {
  flex: 1;
}

.translation-form label {
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}

.translation-form select {
  width: 100%;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.translation-form button {
  padding: 10px 15px;
  font-size: 16px;
  background-color: #0070f3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

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

.translated-text {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  background-color: #f9f9f9;
}

Explanation:

  • This CSS provides basic styling for the form, including layout, spacing, and visual elements.
  • It ensures the form is responsive and user-friendly.

6. Implementing the Main Page (pages/index.js)

Now, let’s build the main page, pages/index.js. This is where we’ll handle the API request and display the translated text.

import React, { useState } from 'react';
import axios from 'axios';
import TranslationForm from '../components/TranslationForm';
import '../styles/global.css';

function HomePage() {
  const [translatedText, setTranslatedText] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');

  const handleTranslate = async (text, sourceLanguage, targetLanguage) => {
    setIsLoading(true);
    setError('');
    setTranslatedText('');

    try {
      const response = await axios.post(
        'https://libretranslate.com/translate',
        {
          q: text,
          source: sourceLanguage,
          target: targetLanguage,
        },
        {
          headers: {
            'Content-Type': 'application/json',
          },
        }
      );

      if (response.data && response.data.translatedText) {
        setTranslatedText(response.data.translatedText);
      } else {
        setError('Translation failed. Please try again.');
      }
    } catch (error) {
      setError('An error occurred during translation. Please check your internet connection and try again.');
      console.error('Translation error:', error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div>
      <h1>Translation App</h1>
      <TranslationForm onTranslate={handleTranslate} />
      {isLoading && <p>Translating...</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
      {translatedText && (
        <div className="translated-text">
          <h2>Translated Text:</h2>
          <p>{translatedText}</p>
        </div>
      )}
    </div>
  );
}

export default HomePage;

Explanation:

  • We import useState, axios, and the TranslationForm component.
  • We use useState to manage the translatedText, isLoading, and error states.
  • The handleTranslate function is the core of our app. It:
    • Sets isLoading to true to indicate that the translation is in progress.
    • Clears any previous error messages and translated text.
    • Makes a POST request to the LibreTranslate API using axios. Replace the URL with your chosen API’s endpoint if you are using a different one.
    • Parses the API response and updates the translatedText state if the translation is successful.
    • Handles errors and updates the error state.
    • Sets isLoading to false when the request is complete (success or failure).
  • The JSX renders the TranslationForm component and displays the translated text and any error messages. It also shows a “Translating…” message while the request is in progress.

7. Running the Application

To run your application, open your terminal, navigate to your project directory (translation-app), and run:

npm run dev

This will start the development server. Open your web browser and go to http://localhost:3000 to see your translation app in action.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Incorrect API Endpoint: Double-check the API endpoint URL. Typos or incorrect URLs are a frequent cause of errors. Make sure you are using the correct endpoint for the translation service you have chosen.
  • Missing API Key (If Required): If the API you are using requires an API key, make sure you have it and are including it in the request headers or as a parameter.
  • CORS Errors: If you encounter CORS (Cross-Origin Resource Sharing) errors, the API might not allow requests from your domain. You may need to configure CORS settings on your API, or you can use a proxy server during development.
  • Incorrect Request Method: Ensure you are using the correct HTTP method (e.g., POST for sending data to the API).
  • Incorrect Data Format: Make sure the data you are sending to the API is in the format the API expects (e.g., JSON). Set the ‘Content-Type’ header accordingly.
  • Handling API Response: Carefully examine the API response format. Make sure you are correctly extracting the translated text from the response data. Use console.log(response) to inspect the response structure if needed.
  • Error Handling: Implement robust error handling to catch potential issues, provide informative error messages to the user, and prevent your app from crashing.

Key Takeaways

In this tutorial, we’ve built a simple yet functional translation app using Next.js. We covered the following key concepts:

  • Setting up a Next.js project.
  • Creating a reusable component (TranslationForm).
  • Making API requests using axios.
  • Handling user input and displaying data dynamically.
  • Managing application state using useState.
  • Implementing error handling.
  • Styling components with CSS.

FAQ

  1. Can I use a different translation API?

    Yes, absolutely! The code is designed to be adaptable. You’ll need to adjust the API endpoint URL, the request parameters, and the way you extract the translated text from the response based on the specific API you choose. Just make sure to get an API key if required and to follow the API’s documentation.

  2. How can I add more languages?

    To add more languages, you’ll need to:

    • Add more <option> elements to the <select> elements in the TranslationForm component, including the language codes (e.g., “ja” for Japanese).
    • Make sure the translation API supports the new languages.
  3. How can I deploy this app?

    You can deploy your Next.js app to various platforms, such as Vercel (which is recommended, as it’s built by the Next.js team), Netlify, or AWS. You’ll typically need to push your code to a Git repository (like GitHub or GitLab) and configure the deployment platform to build and deploy your application.

  4. How can I improve the user interface?

    You can enhance the UI by:

    • Adding more styling with CSS (e.g., using a CSS framework like Tailwind CSS or Bootstrap).
    • Implementing a more user-friendly language selection interface (e.g., using flags or language names).
    • Adding a loading spinner during the translation process.
    • Implementing features like automatic language detection.

Building this translation app is a great way to improve your Next.js skills and create something useful. By following this guide and experimenting with the code, you’ll gain a deeper understanding of how to work with APIs, handle user input, and build dynamic web applications. The possibilities are vast, and you can extend this project by adding features such as language detection, history tracking, or even speech synthesis. Happy coding!

More posts