Build a Simple Next.js Interactive Web-Based Currency Converter

Written by

javascriptdebugged

in

In today’s interconnected world, dealing with different currencies is a common occurrence. Whether you’re planning a trip abroad, managing international transactions, or simply curious about exchange rates, having a reliable currency converter at your fingertips is incredibly useful. This tutorial will guide you through building a simple, yet functional, currency converter application using Next.js. We’ll focus on creating a user-friendly interface, fetching real-time exchange rates, and handling user input effectively. This project is perfect for beginners and intermediate developers looking to deepen their understanding of Next.js and web development fundamentals.

Why Build a Currency Converter?

Currency converters are more than just a fun project; they offer practical benefits. Building one allows you to:

  • Learn Core Concepts: You’ll gain hands-on experience with important web development concepts such as API calls, state management, and user interface design.
  • Enhance Your Portfolio: A functional currency converter is a great addition to your portfolio, showcasing your ability to build interactive and practical web applications.
  • Solve a Real-World Problem: You’ll create a tool that can be genuinely useful for yourself and others, simplifying currency conversions.
  • Understand Next.js: You’ll become more familiar with Next.js features like server-side rendering, API routes, and dynamic routing.

Prerequisites

Before we begin, make sure you have the following installed on your machine:

  • Node.js and npm: (or yarn) – You’ll need Node.js and npm (Node Package Manager) or yarn to manage project dependencies. You can download them from the official Node.js website.
  • A Code Editor: Such as Visual Studio Code, Sublime Text, or Atom.
  • Basic Understanding of HTML, CSS, and JavaScript: Familiarity with these languages will be helpful, but not strictly required.

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 currency-converter
cd currency-converter

This command creates a new Next.js project named “currency-converter” and navigates you into the project directory. You can use `yarn create next-app currency-converter` if you prefer yarn.

2. Installing Dependencies

For this project, we’ll need a library to fetch exchange rates. We’ll use the ‘axios’ library for making HTTP requests. Install it using:

npm install axios

or

yarn add axios

3. Project Structure and File Setup

Our project structure will be simple. We’ll focus on the core functionality within the `pages` directory. You should have a `pages/index.js` file already created by `create-next-app`. We’ll modify this file to build our currency converter interface.

4. Fetching Exchange Rates (API Integration)

We need an API to get real-time exchange rates. There are several free APIs available. For this tutorial, we’ll use a free API (you may need to sign up for a free API key depending on the API you choose). Let’s assume the API provides an endpoint like this (replace with your actual API endpoint):

https://api.exchangerate-api.com/v4/latest/USD

This endpoint returns exchange rates relative to USD. You’ll need to adapt the code below to match the API you choose, including any required API keys.

Create a new file in the `pages` directory called `api/rates.js`. This will be our API route to fetch exchange rates. This example is illustrative and you might not need an API route, depending on the API you choose. If the API allows you to fetch rates directly from the client, you can skip this step.

// pages/api/rates.js
import axios from 'axios';

export default async function handler(req, res) {
  try {
    const { fromCurrency } = req.query;
    const apiUrl = `https://api.exchangerate-api.com/v4/latest/${fromCurrency}`; // Replace with your API endpoint
    const response = await axios.get(apiUrl);
    const rates = response.data.rates;
    res.status(200).json({ rates });
  } catch (error) {
    console.error('Error fetching rates:', error);
    res.status(500).json({ error: 'Failed to fetch rates' });
  }
}

This API route fetches the latest exchange rates from the specified API. It uses `axios` to make the HTTP request and returns the rates in JSON format.

5. Building the User Interface (UI)

Open `pages/index.js` and replace its contents with the following code. This code will create the basic UI for our currency converter.

// pages/index.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function CurrencyConverter() {
  const [fromCurrency, setFromCurrency] = useState('USD');
  const [toCurrency, setToCurrency] = useState('EUR');
  const [amount, setAmount] = useState(1);
  const [exchangeRate, setExchangeRate] = useState(null);
  const [convertedAmount, setConvertedAmount] = useState(null);
  const [currencies, setCurrencies] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchCurrencies = async () => {
      try {
        setLoading(true);
        const response = await axios.get('https://api.exchangerate-api.com/v4/currencies');
        const currenciesArray = Object.keys(response.data).map(key => key);
        setCurrencies(currenciesArray);
      } catch (error) {
        setError('Failed to fetch currencies.');
        console.error('Error fetching currencies:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchCurrencies();
  }, []);

  useEffect(() => {
    const fetchExchangeRate = async () => {
      if (!fromCurrency || !toCurrency) return;
      setLoading(true);
      setError(null);
      try {
        //Use API Route
        const response = await axios.get(`/api/rates?fromCurrency=${fromCurrency}`);
        const rate = response.data.rates[toCurrency];
        if (!rate) {
          setError('Exchange rate not found.');
          setConvertedAmount(null);
          return;
        }
        setExchangeRate(rate);
        setConvertedAmount((amount * rate).toFixed(2));
      } catch (error) {
        setError('Failed to fetch exchange rate.');
        console.error('Error fetching exchange rate:', error);
        setExchangeRate(null);
        setConvertedAmount(null);
      } finally {
        setLoading(false);
      }
    };
    fetchExchangeRate();
  }, [fromCurrency, toCurrency, amount]);

  const handleAmountChange = (e) => {
    const value = parseFloat(e.target.value);
    setAmount(isNaN(value) ? 0 : value);
  };

  const handleFromCurrencyChange = (e) => {
    setFromCurrency(e.target.value);
  };

  const handleToCurrencyChange = (e) => {
    setToCurrency(e.target.value);
  };

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h1>Currency Converter</h1>
      <div>
        <label>Amount:</label>
        
      </div>
      <div>
        <label>From:</label>
        
          {currencies.map((currency) => (
            
              {currency}
            
          ))}
        
      </div>
      <div>
        <label>To:</label>
        
          {currencies.map((currency) => (
            
              {currency}
            
          ))}
        
      </div>
      {convertedAmount !== null && (
        <p>
          {amount} {fromCurrency} = {convertedAmount} {toCurrency}
        </p>
      )}
    </div>
  );
}

export default CurrencyConverter;

This code does the following:

  • Imports necessary modules: React, useState, useEffect, and axios.
  • Uses `useState` hooks to manage the state of the component: `fromCurrency`, `toCurrency`, `amount`, `exchangeRate`, `convertedAmount`, `currencies`, `loading`, and `error`.
  • Fetches exchange rates using the `useEffect` hook. The hook is triggered when the `fromCurrency`, `toCurrency`, or `amount` state changes. It calls the API to get the exchange rate and updates the `convertedAmount`.
  • Handles user input using the `handleAmountChange`, `handleFromCurrencyChange`, and `handleToCurrencyChange` functions.
  • Displays the converted amount if the exchange rate is successfully fetched.
  • Includes error handling to display error messages if there are issues fetching the exchange rate.
  • Fetches available currencies using the useEffect hook to populate the select options.

6. Styling the UI (Optional)

While the basic UI is functional, you can enhance its appearance by adding some CSS. Create a `styles/globals.css` file in your project (if you don’t already have one) and add the following styles:

/* styles/globals.css */
body {
  font-family: sans-serif;
  margin: 20px;
}

h1 {
  margin-bottom: 20px;
}

div {
  margin-bottom: 10px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="number"], select {
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 200px;
}

Import this CSS file into your `pages/_app.js` file to apply the styles to your entire application:

// pages/_app.js
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return 
}

export default MyApp

7. Running the Application

Now, run your Next.js application using the following command in your terminal:

npm run dev

or

yarn dev

This will start the development server. Open your browser and go to `http://localhost:3000` to see your currency converter in action.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • CORS Errors: If you encounter CORS (Cross-Origin Resource Sharing) errors, it means your browser is blocking requests to the API. This is often due to the API not allowing requests from your domain. You might need to use a proxy server or configure CORS on the API server. For local development, you could try a browser extension that disables CORS, but this is not recommended for production.
  • API Key Issues: If the API requires an API key, make sure you’ve signed up for one, and that you’re including it correctly in your API requests. Incorrect API keys are a common source of errors. Store your API keys securely (e.g., using environment variables) and avoid hardcoding them directly in your code.
  • Incorrect API Endpoint: Double-check that you’re using the correct API endpoint. Typos or incorrect formatting can lead to errors. Consult the API documentation.
  • Network Errors: Ensure you have a stable internet connection. Network issues can prevent your application from fetching the exchange rates. Check your browser’s developer console for error messages.
  • Data Parsing Errors: If the API response is not in the expected format, your code might fail to parse the data. Inspect the API response in your browser’s developer console to understand the data structure and adjust your code accordingly. For example, some APIs might return rates under a different key.
  • State Updates Not Triggering Re-renders: Make sure you are correctly updating the state variables using the `set…` functions provided by `useState`. Incorrect state updates won’t trigger the UI to update.

Key Takeaways

  • Next.js Fundamentals: You’ve learned how to create a basic Next.js application, including setting up the project, installing dependencies, and creating pages.
  • API Integration: You’ve successfully integrated a third-party API to fetch real-time exchange rates.
  • State Management: You’ve used the `useState` hook to manage the state of your application, including user input and fetched data.
  • UI Design: You’ve created a basic user interface with input fields, select boxes, and a display area for the converted amount.
  • Error Handling: You’ve implemented basic error handling to gracefully handle potential issues with API requests.

FAQ

Q: Where can I find a free currency API?

A: There are many free currency APIs available. Some popular options include ExchangeRate-API (used in this tutorial), CurrencyAPI, and apilayer. Be sure to check the terms of service and any rate limits before using an API in a production environment.

Q: How can I handle API keys securely?

A: Never hardcode API keys directly in your code. The best practice is to use environment variables. In Next.js, you can define environment variables in a `.env.local` file at the root of your project. For example, to store your API key, you might have `API_KEY=YOUR_API_KEY` in your `.env.local` file. You can then access the API key in your code using `process.env.API_KEY`. Be mindful of the security implications and never commit your `.env.local` file to version control.

Q: How can I improve the UI/UX of the currency converter?

A: You can enhance the UI/UX in several ways: Add more currencies, implement currency symbols, display the last updated time, add a history feature to store past conversions, provide visual feedback during loading, and implement better error handling. You could also incorporate a more modern CSS framework like Tailwind CSS or Material UI for styling.

Q: How do I deploy my Next.js currency converter?

A: You can deploy your Next.js application to various platforms, such as Vercel (which is the recommended platform for Next.js), Netlify, or AWS. These platforms typically offer a straightforward deployment process. Consult the documentation for the platform you choose for specific deployment instructions.

Building this currency converter provides a solid foundation for understanding the core concepts of Next.js and web development. By combining these skills, you can create practical, interactive web applications that address real-world needs. Experiment with different features, explore alternative APIs, and continue to refine your application to create something truly useful. Your journey in web development doesn’t end here; it’s a continuous process of learning, building, and improving. Embrace the challenges, celebrate the successes, and keep coding.

More posts