![hosting](https://files.edgestore.dev/iz2sept3369gmc0f/publicFiles/_public/0982edfa-6df2-462e-87e4-c22889c26473.png)

# A Complete Guide to Hosting a Next.js App in Production with NGINX and PM2  

Hosting a Next.js app in production can seem daunting, but with the right steps, you can set it up efficiently. This guide walks you through deploying your Next.js application using NGINX as a reverse proxy and PM2 as a process manager. Additionally, we'll explore how to secure your app with HTTPS using Certbot.

If your application integrates MongoDB, ensure it's installed on your server. [Refer to MongoDB's installation guide](https://www.mongodb.com/docs/manual/installation/) if required.

---

## Step 1: Install Required Packages  

To begin, install the necessary packages. Open your terminal and run the following commands:

### Update APT  

1. Update the package index to ensure your system is using the latest packages:  

```bash
apt update
```

2. Install NGINX
Install the NGINX web server with this command:

```bash
apt install nginx -y
```


3. Add Node.js 21.x Repository
Add the Node.js repository to your system to install the latest version:
```bash
curl -fsSL https://deb.nodesource.com/setup_21.x | sudo -E bash -
```

4. Install Node.js
Install Node.js using the newly added repository:
```bash
sudo apt-get install -y nodejs
```

5.Install PM2 Globally
Install PM2, a process manager for Node.js applications, globally:
```bash
npm install -g pm2
```

## Step 2: Prepare Your Next.js App
Navigate to your project directory and run the following commands to prepare your app:
```bash
npm install  
npm run build  
npm run start  
```
These commands will install dependencies, build your app for production, and start it locally.


## Step 3: Configure NGINX
Set up NGINX to serve your application as a reverse proxy.

### Create a Logs Directory
Create a directory for NGINX access and error logs:
```bash
mkdir -p /opt/nextjs/logs/
```
### Configure NGINX
Create a new configuration file for your app:
```nginx
# /etc/nginx/sites-available/nextjs-app

server {
    server_name yourdomain.com;
    access_log /opt/nextjs/logs/access.log;
    error_log /opt/nextjs/logs/error.log error;

    location /_next/ {
        alias /home/youruser/.next/;
        expires 30d;
        access_log on;
    }

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}
```
Replace yourdomain.com with your actual domain name and youruser with your server's username.

### Enable the Configuration
Save the file and create a symbolic link to enable the configuration:
```bash
sudo ln -s /etc/nginx/sites-available/nextjs-app /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx
```
## Step 4: Set Up PM2
PM2 ensures your application stays running and restarts automatically if it crashes.

### Create an Ecosystem File
Create a PM2 configuration file in your project directory:
```javascript
// ecosystem.config.js

module.exports = {
  apps: [
    {
      name: 'nextjs-app',
      script: 'node_modules/.bin/next',
      args: 'start',
      cwd: '/home/youruser',
      instances: 1,
      autorestart: true,
      watch: false,
      max_memory_restart: '1G',
      env: {
        NODE_ENV: 'production',
        PORT: 3000,
        MONGO_URI: "mongodb://localhost:27017/yourdatabase",
      },
      env_production: {
        NODE_ENV: 'production',
      }
    }
  ]
};
```

Replace youruser and yourdatabase with your specific details.

### Start the App with PM2
Run the following command to start your app:
```bash
pm2 start ecosystem.config.js
```
PM2 will now manage your application.

## Step 5: Secure Your App with HTTPS Using Certbot

Adding HTTPS to your site increases security and user trust. Certbot simplifies this process by obtaining and configuring SSL certificates.

### Install Certbot
Install Certbot and its NGINX plugin:
```bash
sudo apt update  
sudo apt install python3-certbot-nginx  
```

### Obtain an SSL Certificate
Run the following command to obtain and configure an SSL certificate for your domain:
```bash 
sudo certbot --nginx -d yourdomain.com
```
Follow the prompts to complete the process. Certbot will automatically configure NGINX with HTTPS.

### Test the Configuration
Verify the NGINX configuration:
```bash
sudo nginx -t
sudo systemctl reload nginx
```

### Automate Certificate Renewal
Enable automatic renewal for SSL certificates:
```
sudo systemctl enable certbot.timer
```
Test the renewal process:
```bash
sudo certbot renew --dry-run
```

## Conclusion
Your Next.js application is now fully deployed and ready for production! With NGINX serving as a reverse proxy and PM2 ensuring stability, your app is set for optimal performance. Securing your site with HTTPS adds an extra layer of trust and security for users.

By following this guide, you can confidently deploy and host your Next.js app in a production environment.

Happy coding! 🚀





Learn how to deploy a Next.js app in production with NGINX and PM2. This step-by-step guide covers installation, configuration, and securing your app with HTTPS using Certbot, ensuring smooth performance and enhanced security.

Hosting a Next.js App in Production with NGINX and PM2

![hosting on with mongodb](https://files.edgestore.dev/iz2sept3369gmc0f/publicFiles/_public/1e104010-9660-4021-94ed-e0423c757058.jpeg)

Effectively handling database connections is a key aspect of building applications with Next.js and MongoDB. In this blog post, we’ll delve into the lib/mongodb.js code snippet shared earlier, breaking down its functionality, the rationale behind its structure, and its significance. Additionally, we’ll highlight the importance of properly managing MongoDB connections, especially in the context of Next.js applications.

Here's the code snippet we’ll break down:


```javascript
// lib/mongodb.js

import { MongoClient } from 'mongodb'

const uri = process.env.MONGODB_URI
const options = { 
  useNewUrlParser: true,
}

let client
let clientPromise

if (!process.env.MONGODB_URI) {
  throw new Error('Add Mongo URI to .env.local')
}

if (process.env.NODE_ENV === 'development') { 
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options)
    global._mongoClientPromise = client.connect()
  }
  clientPromise = global._mongoClientPromise
} else {
  client = new MongoClient(uri, options)
  clientPromise = client.connect()
}

export default clientPromise

```


# Managing MongoDB Connections in Next.js Applications

Efficient database connection management is a critical part of building applications with Next.js and MongoDB. In this post, we'll break down the `lib/mongodb.js` file, explain its purpose, and explore why proper connection management is essential in Next.js projects.

---

## What Does This File Do?

This file sets up and exports a MongoDB client connection promise, which is used throughout the application to interact with the database. Here's a detailed breakdown of its functionality:

### Imports and Constants

- The `MongoClient` class is imported from the `mongodb` package.  
- The database URI (`uri`) is securely fetched from `process.env.MONGODB_URI`, enabling flexible configuration.  
- The `options` object includes settings for the client, such as `useNewUrlParser` for parsing the connection string.  

### Environment Variable Check

The code checks if the `MONGODB_URI` environment variable is set. If not, it throws an error, ensuring developers address the issue early (the URI is usually stored in `.env.local`).

### Connection Handling Based on Environment

The file adjusts its behavior based on the `NODE_ENV` environment variable, which indicates whether the application is running in development or production mode:

#### Development Mode

- The database connection is stored in a global variable (`global._mongoClientPromise`).  
- This prevents multiple connections from being created during frequent code reloads in development (e.g., with Hot Module Replacement).  
- Using a global connection minimizes memory leaks and reduces unnecessary overhead.

#### Production Mode

- A new `MongoClient` instance is created and connected for each server instance.  
- This ensures a fresh and secure connection for scalable and reliable production environments.

### Exporting the Client

The file exports `clientPromise`, which provides access to either the global connection (in development) or a newly created one (in production). This promise is used across the application to avoid reinitializing a new client for every request.

---

## Why Use This Connection Strategy?

### Efficient Resource Management

- In serverless environments like Vercel (Next.js's hosting platform), API routes and pages may initialize multiple times.  
- Creating a new database connection for every request can quickly exceed MongoDB’s connection limits.  
- This strategy prevents unnecessary reconnections in development and ensures stability in production.

### Reduced Memory Leaks

- Without a global connection setup, frequent hot reloads in development can lead to an accumulation of unused connections, causing memory leaks.  

### Simplified Database Usage

- By exporting `clientPromise`, the application allows for consistent and straightforward database interactions.  
- Developers can use `await` to handle the client connection as needed, simplifying code and promoting cleaner architecture.

---

## Example Usage in Next.js

Here's how you can use the exported `clientPromise` in your API routes or server-side code:

```javascript
import clientPromise from 'path-to/lib/mongodb';

export default async function handler(req, res) {
  const client = await clientPromise;
  const db = client.db("database_name");
  const data = await db.collection("collection_name").find({}).toArray();

  res.json(data);
}
```

# Best Practices for Using MongoDB with Next.js

When integrating MongoDB with Next.js, following best practices ensures your application is secure, efficient, and scalable. Below are some key recommendations to keep in mind:

---

## Environment Variables

- Store your MongoDB URI in a `.env.local` file to safeguard sensitive data and prevent hardcoding credentials in your codebase.  

---

## Error Handling

- Implement comprehensive error handling for database interactions to prevent unexpected crashes and ensure a smoother user experience.  

---

## Connection Pooling

- Utilize connection pooling to efficiently manage database connections, especially in high-traffic production environments. This helps optimize performance and prevents reaching connection limits.  

---

## Conclusion

The `lib/mongodb.js` file plays a vital role in any Next.js project that uses MongoDB. It ensures efficient database connection management, helping to prevent memory leaks and optimize resource usage. By adopting this connection pattern and following these best practices, you can create scalable, reliable, and robust applications that fully leverage the power of MongoDB.


Learn how to manage MongoDB connections effectively in Next.js applications. This guide covers a detailed breakdown of the lib/mongodb.js file, best practices for using MongoDB, and strategies to ensure scalability, security, and optimal performance.

How to integrate MongoDB into your Next.js apps

![robosuperior](https://today.thefinancialexpress.com.bd/uploads/1734275662.jpg)


# Robo Superior: Innovating Future Food Sustainability at Moonshot Pirates Challenge

Robo Superior, a dynamic six-member team from Bangladesh, is making waves in the international **Moonshot Pirates competition**, an innovation-driven event inspired by the Apollo mission to the moon. This year's theme focuses on addressing **future food crises**, challenging young innovators to craft tech-driven solutions emphasizing alternative proteins and affordable plant-based food options.

## Meet the Team

At the heart of Robo Superior's success lies a team of passionate individuals, each bringing unique expertise to the table:

- **Team Leader: Mahdi**  
  Ensures seamless coordination, streamlines tasks, and keeps the team on track.

- **Research Head: Mahafuzur Rahman Mitul**  
  Leads in-depth research, crafting the foundational content for the project.

- **Co-Research Head: Afran Hossan Reaz**  
  Collaborates on brainstorming and refining innovative ideas.

- **Embaded system and so: [Nur Ahamed](https://linktr.ee/06nurahmed)**  
  Builds the app and website integral to the project using programming expertise.

- **Graphic Head: Shameem Sabbir**  
  Designs captivating visuals, develops the pitch video, and ensures a user-friendly UI/UX.

- **Business Analyst: Majedul**  
  Develops a robust business model and conducts market analysis for project feasibility.

## The Challenge Ahead

To advance to the grand finale in **Silicon Valley**, Robo Superior must overcome two critical hurdles:

1. **Securing Votes**:  
   The team needs votes in the ongoing online voting round, which closes at **9 PM Bangladesh time on December 18**.  
   - Supporters can vote by visiting the competition's official voting link, searching for "Robo Superior," and submitting their name and email.  
   - To ensure their vote counts, supporters must verify their vote via email.  

2. **Impressing the Judges**:  
   If the team advances, they will present their project to a panel of judges. Winning the judges' approval will secure their place in the **final round in Silicon Valley**, where they can pitch their idea to investors and compete for top honors.

## About the Competition

Since its inception in **2019** in Vienna, Austria, the **Moonshot Pirates Challenge** has empowered young changemakers aged **15-24** to tackle global challenges aligned with the **United Nations' Sustainable Development Goals**. This year's edition has attracted over **2,000 participants** from across the globe, united by a shared mission to transform the future of food sustainability.

### Competition Stages:

1. **Application**: Participants apply to join the challenge.  
2. **Team Formation**: Shortlisted participants form teams to work on their projects.  
3. **Public Voting Round**: The current stage, where the top seven finalists are determined through online votes.  
4. **Final Presentation**: Finalists pitch their projects to an expert panel of judges.  

The winner will be announced after the final presentation.

## Representing Bangladesh on the Global Stage

For Robo Superior, this competition is more than just a platform—it is an opportunity to showcase the ingenuity and potential of Bangladeshi youth on the global stage. Their journey is a testament to creativity, teamwork, and the ambition to make a meaningful impact.

With the support of their community, Robo Superior is poised to take a significant step toward their ultimate goal: representing **Bangladesh** at the pinnacle of innovation in **Silicon Valley**.


Discover how Robo Superior, a passionate six-member team from Bangladesh, is revolutionizing future food sustainability at the Moonshot Pirates Challenge. Support their innovative project on alternative proteins and plant-based solutions as they strive to represent Bangladesh on the global stage in Silicon Valley.

Bangladesh's Robo Superior Eyes Victory In Global Moonshot Pirates Challenge

![](https://files.edgestore.dev/iz2sept3369gmc0f/publicFiles/_public/74bc6bf8-ba24-4bab-b65d-43208a45a1bb.png)In this tutorial, we will create an Email Validator using HTML, CSS, and JavaScript. We will build and use this Email Validation API to validate a given email address. The objective of this blog is to understand how HTML, CSS, and JavaScript can be used along with this Email Validation API to create a useful website.



##  Project Demo


This is how our final email validator will look like:






This Email validator is also responsive and on a mobile phone it looks something like this:



## HTML Structure of our Email Validator

We will use a very basic HTML structure for our email validator. Now, we will start adding a form where we will take the desired information as email input and we will also add a button to submit the information. Now, all that’s left is the output. We will also add the output part as a normal container. 

Here is the HTML code of our email validator without any styling. 



```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iValidate - Email Validator for your Business</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">
                <img src="img/email.svg" alt="email svg">
               <span>iValidate</span></div>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/">About</a></li>
                <li><a href="/">Contact Us</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div class="container">
            <h1>Enter your email to validate</h1>
            <form action="/submit" method="post">
                
                <input placeholder="Enter your email to validate" type="text" id="username" name="username" required>
                <br><br>
                
                <input id="submitBtn" class="btn" type="submit" value="Submit">
              </form>
        </div>
        <div class="container">
            <h2>Your Results</h2>
            <div id="resultCont">
                Your results will show here
            </div>
        </div>
    </main>
    <footer>
        Copyright | iValidate.com | All Rights reserved
    </footer>
    <script src="js/index.js"></script>
</body>
</html>
```

*
### Note to Readers:
* You may notice links in the navigation bar like "/about" and "/contact." These pages are placeholders, and you can add these pages to your website if you wish to.

This is how our website will look like after adding the basic HTML structure:

I know, this does not look good at all. Let’s add some CSS to beautify the website:

Adding CSS to our Email Validator Website
We will add CSS styles including media queries to make our Email validator website responsive. This will help our mobile users use our email validator. The raw HTML code looks a little ugly. Let's add the below CSS to style our Email validator:


```css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,700;1,300&family=Poppins:wght@300;400;500;600&display=swap');


* {
    padding: 0;
    margin: 0;
    font-family: 'Noto Sans', sans-serif;
    font-family: 'Poppins', sans-serif;
}


nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: black;
    color: white;
    padding: 19px 12px;
}


ul {
    display: flex;
}


ul li {
    list-style: none;
    padding: 0 13px;
}


ul li a{
    color: white;
    text-decoration: none;
}


ul >li> a:hover{
    color: rgb(192, 189, 205);
}


main{
    min-height: 100vh;
}


.logo img{
    width: 15px;
    filter: invert(1);
}


.container{
    max-width: 80vw;
    margin: auto;
    padding: 9px 15px;
}


.container h1{
    padding: 12px 0;
}


input[type='text']{
    min-width: 23vw;
    padding: 3px 12px;
    border: 2px solid black;
    border-radius: 4px;
    font-size: 20px;
}


.btn{
    background: black;
    color: white;
    padding: 9px 12px;
    border: 1px solid gray;
    border-radius: 6px;
    cursor: pointer;
}

#resultCont div::first-letter{
    text-transform: uppercase;
}


footer{
    font-size: 12px;
    background-color: black;
    color: white;
    display: flex;
    padding: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (max-width: 600px) 

    .container{
        font-size: 12px;
    }

    input[type='text'] {
        width: 100%;
    }

    nav{
        flex-direction: column;
    }
    .logo{
        padding: 6px 0;
        font-size: 12px;
    }
    .logo span{
        font-size: 20px;
    }
    .logo img{
        width: 15px;
        filter: invert(1);
    }
  }

```
After adding all the relevant styles, this is how our webpage will look:

We are done with the frontend part. Now, we will start coding the logic where we will use the Email Validation API to gather and validate email addresses. 


## JavaScript - Adding the Logic

We will be using Email Validation API for this application. EmailValidation.io provides us with a robust email validation API which is the perfect API for our email validation app. Navigate to this login page and create your account. You can use the free plan as it gives us 1 API Key & 100 free requests per month. If you need it for a large-scale application, you can purchase a subscription to this API. 

Let’s start by creating a new file called index.js inside the js folder. Now, in index.js, we will use the following code to validate email using the Email Validation API. 


``` javascript
submitBtn.addEventListener("click", async (e) => {
    e.preventDefault()
    console.log("Clicked!")
    resultCont.innerHTML = `<img width="123" src="img/loading.svg" alt="">`
    let key = "YOUR-API-KEY"
    let email = document.getElementById("username").value
    let url = `https://api.emailvalidation.io/v1/info?apikey=${key}&email=${email}`
    let res = await fetch(url)
    let result = await res.json()
    let str = ``
    for (key of Object.keys(result)) {
        if(result[key] !== "" && result[key]!== " "){
            str = str + `<div>${key}: ${result[key]}</div>`
        }
    }
    console.log(str)
    resultCont.innerHTML = str
})

```



## Explanation

Let’s understand the code. In this code, we have added an event listener in the submitBtn, which prevents the default action of the button, which is to submit the form. This is done by calling the preventDefault() method. Then, the code logs a message to the console indicating that the button has been clicked. This is just for debugging purposes. Then, the code clears the contents of the resultCont element. This element will be used to display the results of the validation. Then, the code fetches the API key from the key variable. The API key is used to authenticate the request to the Email Validation API.

Make sure to change this line to your own API key. You can get your own API Key by logging in to your EmailValidation.io account.

```javascript
let key = "YOUR-API-KEY"

```
Now, the code gets the email address (the email address that will be validated) from the username input element. Next, the code constructs a URL for the Email Validation API. The URL includes the API key and the email address that will be validated. Then, the code makes a request to the Email Validation API. The await keyword is used to ensure that the API request is completed before the rest of the code is executed. Finally, the code parses the response from the API as JSON. The JSON response contains the results of the validation. The code then loops over the properties of the result object. For each property, the code checks if the value is not empty or a space. If the value is not empty or a space, the code adds a new <div> element to the str string with the property name and value. Finally, the code logs the str string to the console and sets the contents of the resultCont element to the str string.

Now our application is finished and this is how it will look:


## Conclusion and GitHub Link

So this is how you can create an email validator using HTML, CSS, JavaScript and Email Validation API. For your convenience, I have added this code to GitHub. Feel free to fork it and make the necessary changes. Pull requests are welcome!

I hope you liked this email validator we created using HTML, CSS, and JavaScript. Check out this Currency Converter Project where we created a ***[Currency converter using HTML, CSS and JavaScript](https://www.codewithharry.com/blogpost/build-currency-converter-html-css-javascript/)***. Hope you have learnt something new. Happy Coding!

Build an Email Validator with HTML, CSS, and JavaScript

![](https://files.edgestore.dev/iz2sept3369gmc0f/publicFiles/_public/74bc6bf8-ba24-4bab-b65d-43208a45a1bb.png)

## Currency Converter Using HTML, CSS, and JavaScript



In this tutorial, we will create a Currency Converter Website using HTML, CSS, and JavaScript. We will build and use this Currency Conversion API to gather the latest real-time conversion rates. The objective is to understand how HTML, CSS, and JavaScript can be used along with this currency converter API to build this website.


## What you'll build?

By the end of this tutorial, you will build an app that will look something like this:



## Prerequisites

Visual Studio Code: I am using VS Code to write code. You can choose the editor of your choice
Live Server Extension: I will also use an Extension for VSCode which is called “Live Server”. The live server enables you to open an HTML document, and it runs a server for you and opens a browser window with live refresh making it convenient for you to see live changes while development.
Currency Conversion API: This is the free API we will be using to fetch currency details. If you plan to upgrade later, you can signup for an account here for maximum discounts


## Installing VS Code

Let’s start by installing VS Code. Go to https://code.visualstudio.com/download to download VS Code from their official website.

Once, the download is complete, install VSCode by running the setup. Make sure to check all these options before installing. 

Now, once you have installed VSCode, open VSCode and go to the Extensions Tab.


Here on the top search bar, search for “Live Server” and install this extension. 

 
We are ready to create our project now. 

Frontend of the Page
We will start by designing the frontend of our website. Let’s add this HTML 5 Boilerplate and start the live server by right clicking anywhere on the editor and then choosing on the option “Open with Live Server”:


```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Currency Converter</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>
```



When you start the live server, your browser will automatically launch, and it will take you to http://127.0.0.1:5500/. If it doesn’t, you can manually type this to the browser URL and go there. 
This is what you will see if you have used the above boilerplate.



Let’s add a navbar by using the <nav> class and a footer using the <footer> class as shown below:

```html
<nav>
    <div class="logo">MyCurrencyConverter</div>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About Us</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

<h1>Hello World!</h1>

<footer>
    Copyright &copy; All rights reserved
</footer>
```


### Note to Readers:
 You may notice links in the navigation bar like "/about" and "/contact." At present, these pages are placeholders and you can add these pages to your website if you wish to.

Now, we will start adding a form where we will take the desired information as form input and we will also add a button to submit the information. 


```html
 <div class="container">
        <h1>Choose a currency to convert</h1>
        <form action="/action.php" method="get">
            <label for="quantity">Choose a quantity: </label>
            <input type="number" name="quantity" min="1" max="10">
            <label for="currency">Choose a currency: </label>
            <select name="currency">
                <option value="INR">Indian Rupee</option>
                <option value="USD">US Dollar</option>
                <option value="EUR">Euro</option>
            </select>
            <button class="btn" type="submit">Submit</button>
        </form>
    </div>
```

Now, all that’s left is the output. We will add the output part and set its class as “output”. The output will have CSS "display:none" which will hide it until the data is fetched from the API



```html
<div class="output">
    <h2>Here is your converted values in different currencies</h2>
    <table>
        <thead>
            <tr>
                <th>Currency</th>
                <th>Code</th>
                <th>Value</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>
```

This is how it will look like:




I know, it does not look good at all. Let’s fix it by adding CSS styles to it. 


## Adding Styles

We have 3 methods to add CSS to our application. 

1. Internal CSS
2. External CSS
3. Inline CSS

We will focus on adding internal css for now. You can later organize your CSS in an external stylesheet.

Let’s go inside the <head> element and add our styles there. 
I have added the following styles:

```css
<style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,700;1,300&family=Poppins:wght@400;600&display=swap');

        * {
            margin: 0;
            padding: 0;
        }

        nav {
            font-family: 'Noto Sans', sans-serif;
            font-weight: 900;
            display: flex;
            font-size: 20px;
            background-color: rgb(224, 209, 245);
            padding: 23px;
        }

        nav li a {
            text-decoration: none;
            color: rgb(2, 3, 18);
            transition: all;
            transition-duration: 500ms;
        }

        nav li a:hover {
            text-decoration: none;
            color: rgb(103, 101, 235);
        }

        div.logo {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 23px;
            font-size: 24px;
        }

        nav ul li {
            list-style: none;
            margin: 0 23px;
        }

        nav ul {
            display: flex;
        }

        .container {
            min-height: 100vh;
            font-family: 'Poppins', sans-serif;
            max-width: 80vw;
            margin: auto;
        }

        .container h1,
        h2 {
            margin: 23px 0;
        }

        .container form {
            display: flex;
            flex-direction: column;
        }

        .container form label {
            font-size: 25px;
        }

        .container form input[type='number'],
        select,
        label {
            font-size: 25px;
            width: 23vw;
            margin-bottom: 23px;
        }

        .btn {
            width: 144px;
            padding: 5px 8px;
            font-size: 20px;
            background: #e0d0f5;
            color: black;
            border-radius: 13px;
            cursor: pointer;
        }

        .output {
            display: none;
        }

        .output table {
            width: 50vw;
            text-align: center;
            border: 2px solid black;
            font-size: 20px;
        }

        .output table th{
            padding: 3px;
        }

        @media (max-width: 600px) {
            

            nav {
                flex-direction: column;
                font-size: 14px;
            }

            nav ul li {
                margin: 5px 13px;
            }

            nav ul {
                justify-content: center;
            }

            .container {
                max-width: 95vw;
            }

            .container form input[type='number'],
            select,
            label {
                width: 80vw;
            }
        }

        footer {
            font-family: 'Poppins', sans-serif;
            text-align: center;
        }
    </style>
```

After adding all the relevant styles, this is how our webpage will look:



We are done with the frontend part. Now, we will start coding the logic where we will use an API to fetch and convert the currency


## Writing the JavaScript Logic

We will use [CurrencyAPI.com](https://app.currencyapi.com/register) for this application. [CurrencyAPI.com](https://app.currencyapi.com) provides us with currency conversion API which is the perfect tool to handle our exchange rate conversions. Create an account and you can use the free plan as it gives us 1 API Key and 300 Free Requests. If you need it for a large-scale application, you can purchase a subscription to this API. 
Let’s start by creating a new file called main.js and integrating it into our main page. We will add this line just below the footer. 


```javascript
<script src="main.js"></script>
```

Now, in the main.js file we will add the following code:


```javascript
const populate = async (value, currency) => {
    let myStr = ""
    url = "https://api.currencyapi.com/v3/latest?apikey=API+KEY+HERE&base_currency=" + currency
    let response = await fetch(url)
    let rJson = await response.json()
    document.querySelector(".output").style.display = "block"

    for (let key of Object.keys(rJson["data"])) {
        myStr += ` <tr>
                        <td>${key}</td>
                        <td>${rJson["data"][key]["code"]}</td>
                        <td>${Math.round(rJson["data"][key]["value"] * value)}</td>
                    </tr> 
                `
    }
    const tableBody = document.querySelector("tbody");
    tableBody.innerHTML = myStr;

}
const btn = document.querySelector(".btn")
btn.addEventListener("click", (e) => {
    e.preventDefault()
    const value = parseInt(document.querySelector("input[name='quantity']").value);
    const currency = document.querySelector("select[name='currency']").value
    populate(value, currency)
})
```

In this code, we've created a function named populate to establish a functional currency conversion web application. We've harnessed an external API to fetch the latest currency exchange rates. By considering what the user enters for the amount and the desired currency type, we perform calculations to determine the converted value. 
The populate() function takes two arguments: the value of the quantity input and the currency selected from the dropdown menu. The function first creates an empty string called myStr. Then, it loops through the data object in the JSON response, which contains the currency rates. For each currency, the function adds a new row to the myStr string with the currency name, code, and the value of the currency multiplied by the quantity.
Once the loop is finished, the myStr string is set as the innerHTML of the tbody element. This will update the table with the new currency rates.
The btn element is an HTML button that has an event listener attached to it. When the button is clicked, the populate() function is called with the value of the quantity input and the currency selected from the dropdown menu. This will update the table with the new currency rates.
Make sure to change this line to your own API key. You can get your own API Key by logging in to your [currencyapi.com account](https://app.currencyapi.com/)


```javascript
 url = "https://api.currencyapi.com/v3/latest?apikey=API+KEY+HERE&base_currency=" + currency
```
Now our application is finished. This is how the final product will look:




## Conclusion & Github Link

With our application now fully operational, users can effortlessly convert currency by inputting the desired quantity and selecting the target currency. The table updates instantaneously, displaying the converted values for various currencies. This user-friendly interface streamlines the process of currency conversion and enhances financial decision-making. Here is the Github link for the project source code.
Hope you learned something new. Happy Coding!



[Project] Create a Currency Converter: A Step-by-Step Guide Using HTML, CSS, and JavaScript 

![](https://i0.wp.com/www.namecheap.com/blog/wp-content/uploads/2022/09/What-is-VPS-Hosting-.png?resize=794%2C431&ssl=1)

In this guide, we'll walk through the process of hosting a Next.js app in production using NGINX and PM2. Follow these steps to get your Next.js app up and running smoothly. If your application uses MongoDB, you can `[install it from here](https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-ubuntu/)`.


### 1. Update APT:
``` d
apt update
```

### 2. Install Nginx:


``` ubuntu
apt install nginx -y
```
This command installs Nginx web server.



### 3. Setup Node.js 21.x repository:


``` ubuntu
curl -fsSL https://deb.nodesource.com/setup_21.x | sudo -E bash -
```
This command downloads and runs the script to add the Node.js 21.x repository to your system.


### 4. Install Node.js:



``` ubuntu
sudo apt-get install -y nodejs
```

This command installs Node.js using the newly added repository.


### 5. Install PM2 globally:



``` ubuntu
npm install -g pm2
```

This command installs PM2 process manager globally using npm.



## Step 2: Setting Up Next.js App

Now, let's prepare our Next.js app. Navigate to your project directory and execute the following commands:


``` ubuntu
npm install
npm run build
npm run start
```


## Step 3: Configuring NGINX


### 1. Create this directory for storing access and error logs



``` ubuntu
mkdir -p /opt/nextjs/logs/
```

Create a new NGINX configuration file for your Next.js app. Open a text editor and paste the following configuration:


``` ubuntu
#/etc/nginx/sites-available/nextjs-example.willandskill.eu
server {
    server_name getmeachai.com;
    access_log /opt/nextjs/logs/access.log;
    error_log /opt/nextjs/logs/error.log error;

    location /_next/ {
        alias /home/getmeachai/.next/;
        expires 30d;
        access_log on;
    }

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}
```


## Step 4: Configuring PM2
Create an ecosystem configuration file for PM2. Open a text editor and paste the following configuration:


``` ubuntu

// ecosystem.config.js

module.exports = {
  apps: [
    {
      name: 'my-nextjs-app',
      script: 'node_modules/.bin/next',
      args: 'start',
      cwd: '/home/getmeachai',
      instances: 1,
      autorestart: true,
      watch: false,
      max_memory_restart: '1G',
      env: {
        NODE_ENV: 'production',
        PORT: 3000,
        GITHUB_ID: "99aae2c73fc53d196807",
        GITHUB_SECRET: "55c88cefb1ec80c6b1697811f6ff1e287d554249",
        NEXT_PUBLIC_URL: "http://getmeachai.com",
        NEXTAUTH_URL: "http://getmeachai.com",
        NEXTAUTH_SECRET: "sdf",
        MONGO_URI: "mongodb://localhost:27017/chai",
      },
      env_production: {
        NODE_ENV: 'production'
      }
    }
  ]
};
```


## Step 5: Starting PM2

Start your Next.js app using PM2 by running the following command in your project directory:


``` ubuntu
pm2 start ecosystem.config.js
```


## [Optional] Using Certbot for HTTPS

Securing your Next.js application with HTTPS is crucial for protecting sensitive data and ensuring user trust. Certbot is a widely used tool for obtaining and managing SSL/TLS certificates from the Let's Encrypt Certificate Authority. Follow these steps to set up HTTPS for your Next.js app using Certbot:


## Step 1: Install Certbot


``` ubuntu
sudo apt update
sudo apt install python3-certbot-nginx
```


## Step 2: Obtain SSL Certificate


``` ubuntu
sudo certbot --nginx -d getmeachai.com
```

Follow the prompts to provide an email address for renewal reminders and agree to the terms of service. Certbot will handle the certificate issuance and configuration for NGINX.


## Step 3: Verify HTTPS Configuration


``` ubuntu
sudo nginx -t
```

If the test is successful, reload NGINX to apply the changes:


``` ubuntu
sudo systemctl reload nginx
Step 4: Automate Certificate Renewal
sudo systemctl enable certbot.timer
```

This command ensures that Certbot will renew your certificates automatically when they are about to expire.


## Step 5: Verify Renewal


``` ubuntu
sudo certbot renew --dry-run
```

If the dry run completes without errors, you're all set. Certbot will handle certificate renewal automatically when necessary.


## Step 6: Test HTTPS Connection

Finally, test your Next.js application over HTTPS to ensure that everything is working correctly. You can do this by navigating to your domain in a web browser and verifying that the connection is secure.

By following these steps, you can secure your Next.js application with HTTPS using Certbot, enhancing security and trust for your users.


## Conclusion

Your Next.js app is now ready and running in production! NGINX is serving as a reverse proxy, forwarding requests to your Next.js server, and PM2 is ensuring your app stays up and running.

By following these steps and configurations, you can successfully deploy and host your Next.js application in a production environment. Happy coding!







here we show how you can host a next js website easily.

RoboSuperior

ESC

RoboSuperior

Main Menu

Topics

Recently Published

Hosting a Next.js App in Production with NGINX and PM2

RoboSuperior

How to integrate MongoDB into your Next.js apps

RoboSuperior

Bangladesh's Robo Superior Eyes Victory In Global Moonshot Pirates Challenge

RoboSuperior

Build an Email Validator with HTML, CSS, and JavaScript

RoboSuperior

[Project] Create a Currency Converter: A Step-by-Step Guide Using HTML, CSS, and JavaScript

RoboSuperior

RoboSuperior

© 2024 ALL Rights Reserved.

Developed By @Nur Ahmad

Quick Links

Legal Stuff Links

Social Media