However, writing manual NGINX configurations—especially for multiple services, subdomains, and SSL certificates—can quickly become tedious, redundant and error-prone.

That’s where NGINX Proxy Manager (NPM) steps in to simplify everything with a clean and user-friendly interface.

In this blog, we’ll begin with the basics of NGINX, and then walk you through how to deploy NGINX Proxy Manager in just a few steps.

🧠 What is NGINX?

NGINX (pronounced engine-x) is a high-performance, open-source web server that’s designed for scalability and efficiency. It can be used for:

• Serving static files (HTML, CSS, JavaScript)

• Acting as a reverse proxy (routing external traffic to internal services)

• Load balancing between servers

• Caching for faster delivery

• SSL termination (handling HTTPS connections)

Originally built to solve the C10K problem—handling 10,000+ concurrent connections—NGINX has become one of the most popular servers in the world.

🔄 What is a Reverse Proxy?

A reverse proxy acts as a gateway: it receives client requests, forwards them to the appropriate backend service, and returns the response to the client. This allows you to:

• Host multiple apps on a single server (e.g., app1.example.com, app2.example.com)

• Serve all apps over HTTPS using Let’s Encrypt

• Hide internal infrastructure from the public

• Apply rate limiting, access control, or logging policies

⚙️ Installing NGINX the Traditional Way

On most Linux distributions, you can install NGINX with:

sudo apt update -y
sudo apt install nginx -y

To verify NGINX is running:

systemctl status nginx

You should be able to visit http://<your-server-ip> and see the NGINX welcome page.

To configure new sites manually, you’ll edit files under /etc/nginx/sites-available/ and link them to /etc/nginx/sites-enabled/

😵‍💫 The Problem: Manual NGINX Config is a Pain

For each new service or domain, you have to:

• Add a new subdomain

• Set up SSL with Let’s Encrypt

• Configure proxying rules

• Handle authentication and security settings

• Test your NGINX config and reload the service

This process is powerful but not beginner-friendly and quickly becomes a burden when managing many services.

🎉 The Solution: NGINX Proxy Manager (NPM)

NGINX Proxy Manager is a Docker-based application that wraps the power of NGINX in an easy-to-use web interface.

🔑 Key Features

• Intuitive web UI to manage proxy hosts

• Automatic SSL certificates via Let’s Encrypt

• Redirection and 404 host handling

• Access control via IP or basic auth

• Custom NGINX config snippets

• Lightweight and easy to deploy via Docker

🧱 How to Install NGINX Proxy Manager on Ubuntu/Debian

Prerequisites

• A Linux server or cloud VPS

• Docker and Docker Compose installed

• A registered domain (optional but recommended)

Step 1: Install Docker & Docker Compose

sudo apt update
sudo apt install docker.io docker-compose -y

Verify Docker is running:

sudo systemctl status docker

If inactive, enable and start it:

sudo systemctl enable docker
sudo systemctl start docker

Step 2: Create the Docker Compose File

• Create a working directory:

    mkdir npm && cd npm
  

• Now create the docker-compose.yml file:

    version: '3.8'
    services:
      app:
        image: 'jc21/nginx-proxy-manager:latest'
        restart: unless-stopped
        ports:
          # These ports are in format <host-port>:<container-port>
          - '80:80' # Public HTTP Port
          - '443:443' # Public HTTPS Port
          - '81:81' # Admin Web Port
  
        environment:
          # Mysql/Maria connection parameters:
          DB_MYSQL_HOST: "db"
          DB_MYSQL_PORT: 3306
          DB_MYSQL_USER: "npm"
          DB_MYSQL_PASSWORD: "npm"
          DB_MYSQL_NAME: "npm"
        volumes:
          - ./data:/data
          - ./letsencrypt:/etc/letsencrypt
        depends_on:
          - db
  
      db:
        image: 'jc21/mariadb-aria:latest'
        restart: unless-stopped
        environment:
          MYSQL_ROOT_PASSWORD: 'npm'
          MYSQL_DATABASE: 'npm'
          MYSQL_USER: 'npm'
          MYSQL_PASSWORD: 'npm'
          MARIADB_AUTO_UPGRADE: '1'
        volumes:
          - ./mysql:/var/lib/mysql
  

💡 Why a database?
The database stores all your proxy host settings, SSL metadata, users, and configuration changes persistently

Step 3: Launch the Container

Run the containers:

docker-compose up -d

Step 4: Access the Web Interface

Open your browser and visit:
http://your-server-ip:81

Login with default credentials:

• Email: admin@example.com

• Password: changeme

You’ll be prompted to change your login details after the first login.

Once you login, you’ll be redirected to your dashboard

🔧 Setting Up Your First Proxy Host

1. Go to "Proxy Hosts" > "Add Proxy Host"

2. Enter your domain name (e.g., npm.domain.com)

3. Enter the internal IP address and port of your service (e.g., 192.168.1.100:8080)

4. Enable "Block Common Exploits"

   

5. Switch to the SSL tab:

   • Enable SSL

   • Request a Let’s Encrypt certificate

   • Enable Force SSL

6. Click Save

🎉 Done! Your service is now live, secure, and reachable via your custom domain. (npm.domain.com in this case)

🔐 Advanced Features

• Access Lists – Restrict access using IP whitelisting or basic auth

• Custom NGINX Directives – Add your own caching rules, headers, or security policies

• Rate Limiting – Throttle excessive traffic and protect against DoS attacks

• Redirection Hosts – Easily forward old URLs to new destinations

• 404 Hosts – Define catch-all behavior for unknown or misrouted domains

💡 Common Use Cases

• Host self-hosted apps like Nextcloud, Jellyfin, Bitwarden, or Portainer

• Expose internal microservices on custom subdomains

• Make local development tools publicly accessible with HTTPS

• Replace complex manual NGINX or Traefik setups with a user-friendly dashboard

🧠 Final Thoughts

NGINX is incredibly powerful, but configuring it manually can be time-consuming and error-prone.
NGINX Proxy Manager simplifies this process without sacrificing flexibility.

It’s perfect for:

✅ Self-hosters
✅ Developers managing multiple projects
✅ Small teams hosting internal tools
✅ Anyone who wants easy SSL and quick proxy setup

Node is an event-driven, non-blocking IO model. This means it's asynchronous and doesn't block itself for one request (but rather immediately moves to the next request). This makes Node extraordinarily fast and efficient.

Event-driven means that as soon as Node starts it initiates all the variables and functions and waits for an event to occur.

NPM stands for Node Package Manager which helps you manage your packages for Node. NPX stands for Node Package Execute, and it can execute any npm package without even installing it.

To download npm head to https://nodejs.org/en/download/.

How to Write Your First Node.js Program (Hello World)

Create a file called hello_world.js in your project folder

Then open the file in your code editor like VS Code. Type the code console.log(“Hello World”); in your editor.

Open the terminal, and navigate to the file location.

Now type node hello_world.js.

How to Import Node Core Modules

So let’s start with the very basic package, which is fs (file system). You use it to create, read, and modify files.

To import the fs module, type this command: const fs = require(“fs”);.

Now to use any function of this module, you can refer to the docs.

To create a file, we can use fs.writeFileSync(filename, content);.

const fs = require(“fs”);
fs.writeFileSync(“file.txt”, “Hi there..”);

To append anything in the same file we can use this:

fs.appendFileSync(filename, content);.

How to Install NPM Packages

Now we will use a very basic npm package called superheroes (which is a list of random superheroes) to help you understand how npm works.

To install any npm package, we can use this command in the cmd:

npm install superheroes

Now to import the installed package type const sh = require(“superheroes”);.

To display the name of a random superhero, use this command:

console.log(sh.random());.

Let’s try another package. Now we’ll install one of the most used npm packages called “chalk” — it styles text strings in the terminal.

To install the chalk package (we will install version 2.4.2 as it allows us to import the package using the require method), type the following command:

npm install chalk@2.4.2

Now to style the text string, use this command to pick the colour of the string:

chalk.color(text)

You can read more about the chalk package here.

How to Initiate NPM in Our Program

To initiate NPM in our program, we can use the following command:

npm init

Then press enter or answer the questions accordingly.

Or you can directly use the command npm init -y (same as pressing enter on all the questions).

This will result in the creation of the package.json file:

So, what is package.json?

package.json is the heart of any Nodejs project. It maintains a record of all the dependencies (NPM packages) and contains the metadata of every project.

If someone else downloads the project, this file will help them install all the dependencies required to run the program.

How to Use Moment.js — an NPM Package

This is one of the most used npm packages out there. You can use it to parse and validate dates.

To install the package, run this command:

npm i moment

Import the package like this:

const moment = require(“moment”);

To create a Date object to fetch the current date and time (JavaScript method), run this code:

const time = new Date();

Now, to parse or format the date we will use the moment package:

const parsedTime = moment(time).format("h:mm:ss");

Print the parsed time like this:

console.log(parsedTime);

This is the package.json for this project which includes all the dependency packages — moment in this case.

We also have node_modules in the project folder. This folder contains all the dependencies our project depends on including moment and other packages that moment depends on.

package-lock.json is another file in our project folder that contains all the information regarding the name, dependencies, version of dependencies, and locked version of the project.

It describes the exact tree that was generated to allow subsequent installs to have the identical tree.

How to Use Express JS — a NodeJS Framework

Express is a Node.js web application framework that offers a comprehensive range of functionality for both web and mobile apps.

How to install Express

To install Express, run this command:

npm install express

Then you'll need to import Express like this:

const express = require("express");

How to create an Express application

To create an Express app, just run this command:

const app = express()

How to start a server on port 3000

app.listen(3000, () => { 
    console.log("Server running on port 3000");
}

Now you can open http://localhost:3000 to reach your created server

Okay, so “cannot get /” means that there is no defined route “/” yet.

So to define the “/” route we use app.get() the function.

The app.get (route, callback function) function is used to handle all GET requests.

The callback function has two arguments, req and res, which refer to HTTP requests and the desired response, respectively. The argument names (req, res) are not fixed and can be named anything you want.

app.get("/", (req,res) => { 
    // app.get to handle GET requests
    // req - http request, res - desired response
    res.send("Hello World"); // send Hello World to this route
}

How to Create a Hello World Program in Express

In this section, we will create the very basic program of Hello World in Express.

const express = require("express");
const app = express();
app.get("/", (req, res) => {  
    res.send("hello world");
});
app.listen(3000, () => {  
    console.log("Server running on 3000");
});

And here's the output

How to Render Static Files in Express

This section introduces us to the concept of static file rendering using Express.

First, you'll need to create a new project folder. Then you'll initialize npm using npm init -y.

Install the Express package npm i express and create a file called app.js.

Then you'll create an app, and listen or start the server on port 3000.

const express = require("express);
const app = express();
app.listen(3000, () => {  
    console.log("Server running on 3000");
}

To render static web pages such as HTML, CSS, and JS, create a folder named public in the root directory.

As we’re focusing on only the backend, we will not spend much time on the frontend and will create only an HTML file in the public folder.

We will now import the path module and join the specified paths into one:

const path = require(“path”);

Now to render these files, we have to use the following command:

app.use(express.static(path.join(__dirname, “/public”)));

__dirname → returns the current directory

const express = require("express");
const path = require("path");
const app = new express();
app.use(express.static(path.join(__dirname, "/public")));
app.listen(3000, () => {  
    console.log("Server running on 3000");
});

And here's the output:

How to Render Dynamic Files in Express

In this section, we will learn to render dynamic files in which we can use values from an input object.

To render dynamic web pages, there are many templates such as pug, handlebars, ejs, and so on. These templates allow us to inject dynamic data, if conditions, and loops at runtime.

But here we will focus on handlebars.

Install the packages (express and hbs):

npm i hbs express

Create a file named app.js and import the packages like this:

const express = require(“express”);
const hbs = require(“hbs”);
const path = require(“path”);

Create an Express app and listen on port 3000:

const app = express();
app.listen(3000, (req,res) => {  
    console.log("Server running on 3000");
}

For handlebars to work, we need to set the view engine as hbs.

app.set(“view engine”, “hbs”);

The view engine enables us to render dynamic webpages using the specified template.

The view engine generally looks for the “views” folder in the root folder. But to avoid errors we’ll mention the path of “views” using the following command:

app.set(“views”, path.join(__dirname,“/views”);

Now create a views folder in the root directory. Under that create a file called index.hbs (.hbs is the extension of handlebars) and insert the following HTML code:

index.hbs

<html>  
    <head> 
        <title>Dynamic Rendering</title> 
    </head>
    <body>  
      <h1>Dynamic Rendering</h1>   
      <p>{{author}}</p> <!--dynamic data recieved from server-->
    </body>
</html>

{{author}} — it is the syntax to insert dynamic data

Now to render the index.hbs file we’ll create an app.get function to handle the GET request on the route “/” and send the dynamic data author.

app.get("/", (req, res) => { 
    res.render("index", {    
        author: "Arash Arora", 
    });
});

res.render is the function to render the view. Here we have to pass two arguments. The first is the name of the file without the extension and the second is the object of local variables, for example, the author.

app.js file

const express = require("express");
const hbs = require("hbs");
const path = require("path");
const app = express();
app.set("view engine", "hbs");
app.set("views", path.join(__dirname, "/views"));
app.get("/", (req, res) => {  
    res.render("index", {    
        author: "Arash Arora", 
    });
});
app.listen(3000, (req, res) => { 
    console.log("Server listening on 3000");
});

Folder structure

And here's the output:

How to Create Advanced Templates with Handlebars

So, this is where we’ll learn about reusable components. Previously, we had to construct identical components for each and every page when it came to headers and footers.

But because there are so many repetitive tasks, advanced templating is the saviour. This concept states that we will just make one component that will be used everywhere we need it.

Handlebars introduced the concept of Partials

Partials are the regular handlebar files that other templates can call. Partials are a widely used templating concept that is not specific to Handlebars.

To construct templates that are likely to be reused, you can isolate them into their files (a Partial), and then use them in various templates. You can consider partials to be a simple technique for modularizing your templates.

Follow these steps to create partials:

• Initiate npm → npm init -y

• Install the required packages, Express, and hbs → npm i express hbs

• Create your folder templates

• Create two additional folders within the folder templates: partials and views

• Now create a file app.js

The folder structure should be similar

Let’s create two partial files: header.hbs and footer.hbs. And we'll also add two views, index.hbs and about.hbs.

index.hbs

<html lang="en">  
    <head>   
        <title>Advanced Templating</title>  
    </head>  
    <body>    
        {{>header}} <!--include the header component-->
        <p>I'm a savior</p>    
        {{>footer}} <!-- include the footer component -->
    </body>
</html>

about.hbs

<html lang="en">  
    <head>    
        <title>Advanced Templating -- About</title> 
    </head>
    <body>   
        {{>header}}   
        <p>Handlebars</p>    
        {{>footer}} 
    </body>
</html>

header.hbs

<header>  
    <h1>Advanced Templating</h1> 
    <h3>{{title}}</h3><!--dynamic data received from server-->
    <a href="/">Home</a> 
    <a href="/about">About</a>
</header>

footer.hbs

<footer>  
    <p>Created by {{name}}</p> <!--name -> dynamic data -->
</footer>

app.js

const express = require("express");
const hbs = require("hbs");
const path = require("path");
const app = express();
app.set("view engine", "hbs");
app.set("views", path.join(__dirname, "/templates/views"));
hbs.registerPartials(path.join(__dirname, "/templates/partials"));
app.get("/", (req, res) => {  
    res.render("index", {    
        title: "Home",    
        name: "Arash Arora",  
    });
});
app.get("/about", (req, res) => {  
    res.render("about", {    
        title: "About",    
        name: "Arash Arora",  
    });
});
app.listen(3000, () => {  
    console.log("Listening on port 3000");
});

Everything is the same as I explained in the section on rendering dynamic files in Express – except here we have to register the partials to use partials.

How to register partials

hbs.registerPartials(path_to_partials)

As we’ve created the partials directory in the templates folder, here is the path of partials:

hbs.registerPartials(path.join(__dirname, "/templates/partials"));

Wrapping Up

In this article, we've covered Node.js from theory to practice. Although Node.js is a vast topic that you can't learn entirely from a single shorter article, I've done my best to cover some of the essential features to help you get started with the journey.

In a nutshell, we've discussed what Node.js is, which is a non-blocking, event-driven JavaScript runtime that is asynchronous and uses a single thread to perform operations. We've also discussed the most used minimal and flexible Node.js web application framework, Express.

Then we talked about Node.js's NPM, NPX, and Static and Dynamic data rendering.

All in all, Node.js is a fantastic technology to know, and the possibilities are endless because of its vast community.

Next.js is a robust JavaScript framework that has gained a lot of popularity in recent years due to its focus on server-rendered React applications and its strong emphasis on performance. If you're a developer looking to build fast, scalable, and easy-to-maintain web applications, Next.js is definitely worth taking a look at.

In this article, we'll give you a comprehensive introduction to Next.js, including what it is, how it differs from other JavaScript frameworks, and some of its key features. By the end of this article, you'll have a good understanding of what Next.js is and how it can be used to build high-quality web applications.

Setting up a Next.js project

Once you've decided that you want to use Next.js for your project, the first thing you'll need to do is set up a new Next.js project. Here's how you can do that:

1. Installing Next.js and creating a new project The first step is to install Next.js itself. You can do this by running the following command in your terminal:

npm install --save next react react-dom

This will install Next.js, as well as the React and ReactDOM libraries which are required for Next.js to work.

Next, you can create a new Next.js project by running the following command:

npx create-next-app my-app

This will create a new directory called "my-app" containing a basic Next.js project. You can replace "my-app" with the name you want to give your project.

1. The directory structure of a Next.js project Once you've created your Next.js project, you'll see that it has the following basic directory structure:

my-app/
├── pages/
├── public/
├── package.json
├── .gitignore
└── README.md

• The "pages" directory is where you'll put the React components that make up your application. Each file in the "pages" directory represents a page in your application, and the file's name corresponds to that page's route.

• The "public" directory is where you can put any static assets that you want to be available to your application, such as images or fonts.

• The "package.json" file contains metadata about your project, including dependencies and scripts.

• The ".gitignore" file lists files you don't want to include in your Git repository.

• The "README.md" file is a markdown file that you can use to provide information about your project.

1. Customizing the Next.js configuration Next.js has a number of configuration options that you can set to customize the behaviour of your application. You can find these options in the "next.config.js" file at the root of your project. Some of the options that you might want to configure include:

• "target": This option specifies the environment that your application will be running in. Possible values include "server" (for server-rendered applications), "serverless" (for applications that use serverless functions), and "experimental-serverless-trace" (for applications that use serverless functions with performance tracing).

• "webpack": This option allows you to customize the Webpack configuration that Next.js uses to build your application.

• "serverRuntimeConfig": This option allows you to specify configuration options that are only available on the server side of your application.

By default, Next.js comes with a set of reasonable defaults for these options, but you can override them as needed to suit your specific needs.

In this section, we've covered the basics of setting up a Next.js project. In the next section, we'll look at how to create pages and routes in Next.js.

Building a Next.js application

Now that you've set up your Next.js project, it's time to start building your application. In this section, we'll cover some of the key concepts that you'll need to know to build a Next.js app, including creating pages and routes, fetching data, and adding styles and assets.

1. Creating pages and routes in Next.js

   In Next.js, each page in your application corresponds to a file in the "pages" directory. The name of the file determines the route of the page. For example, if you create a file called "about.js" in the "pages" directory, it will be available at the "http://localhost:3000/about" route.

Here's a simple example of a page in Next.js:

export default function About() {
  return <div>About page</div>
}

You can also create dynamic routes by using named parameters in the file name. For example, if you create a file called "post[id].js", it will be available at the "http://localhost:3000/post/:id" route, and you can access the "id" parameter in the page component like this:

export default function Post({ id }) {
  return <div>Post {id}</div>
}

1. Fetching data with Next.js

   Next.js has a built-in mechanism for fetching data called "getStaticProps" and "getServerSideProps". These functions allow you to fetch data at build time (for static sites) or on each request (for server-rendered sites).

Here's an example of how you can use "getStaticProps" to fetch data for a page:

export async function getStaticProps() {
  // Fetch data from an external API
  const res = await fetch('https://api.example.com/posts')
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

export default function Posts({ data }) {
  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

1. Adding styles and assets to a Next.js project

   Next.js uses Webpack to build and bundle your application, and you can use Webpack's built-in support for loading assets to include styles and other assets in your application.

To include a CSS file in your application, you can use the "import" statement in your JavaScript code:

import './style.css'

You can also include images and other assets by using the "import" statement or the "public" directory. For example, you can include an image like this:

import logo from './logo.png'

export default function Home() {
  return <img src={logo} alt="Logo" />
}

That's it for this section! In the next section, we'll look at how to deploy your Next.js application.

Deploying a Next.js application

Once you've built your Next.js application, the next step is to deploy it so that others can access it. In this section, we'll cover some of the options for deploying a Next.js app, as well as some best practices for making sure your deployment goes smoothly.

1. Options for deploying a Next.js app

   There are a number of options for deploying a Next.js app, including:

• Deploying to a traditional server: You can deploy your Next.js app to a traditional server just like any other Node.js application. This requires setting up a server with Node.js and a web server such as NGINX and then deploying your application to it.

• Deploying to a cloud platform: You can also deploy your Next.js app to a cloud platform such as Heroku, AWS, or GCP. This is usually the easiest option, as the cloud provider will handle setting up the server and installing the necessary dependencies for you.

• Deploying as a static site: If your Next.js app is primarily a static site (i.e., it doesn't have any server-side logic), you can use Next.js's built-in static site generation feature to generate a set of static HTML, CSS, and JavaScript files that you can then deploy to a CDN or hosting provider.

1. Deploying to a serverless environment with Next.js

   Next.js also includes support for deploying your application to a serverless environment, such as AWS Lambda or Google Cloud Functions. This is a good option if you want to build a highly scalable application that can handle a large number of requests without incurring high costs.

To deploy your Next.js app to a serverless environment, you'll need to use the "serverless" target in your "next.config.js" file:

module.exports = {
  target: 'serverless'
}

You'll also need to configure your cloud provider to run your application in a serverless environment. Check the documentation for your cloud provider for more information on how to do this.

1. Best practices for deploying a Next.js app Here are a few best practices to keep in mind when deploying a Next.js app:

• Test your application thoroughly before deploying: Make sure to test your application thoroughly on your local machine before deploying it to production. This will help you catch any issues early and prevent them from affecting your users.

• Use a continuous integration/continuous deployment (CI/CD) pipeline: A CI/CD pipeline can help automate the process of building, testing, and deploying your application, which can save you a lot of time and effort.

• Use a staging environment: It's a good idea to set up a staging environment where you can test new features and changes before deploying them to production. This will allow you to catch any issues before they affect your users.

• Monitor your application: Once your application is deployed, make sure to set up monitoring to keep track of its performance and uptime. This will help you catch any issues early and keep your application running smoothly.

That's it for this section! In the next section, we'll look at some advanced Next.js features that you can use to build even more powerful applications.

Advanced Next.js features

In this section, we'll look at some advanced Next.js features that you can use to build even more powerful applications. These features include static site generation, serverless functions, and using Next.js with a headless CMS.

1. Static site generation with Next.js

   Next.js includes a built-in static site generation feature that allows you to generate a set of static HTML, CSS, and JavaScript files from your application. This is a good option if you want to build a highly performant, statically-generated site that can be deployed to a CDN or hosting provider.

To use static site generation in Next.js, you'll need to use the "export" command to generate the static files for your application. For example, you can run the following command to generate the static files for your application:

next export

This will create an "out" directory containing the static files for your application. You can then deploy these files to a CDN or hosting provider to serve your site.

1. Serverless functions with Next.js

   As we saw in the previous section, Next.js also includes support for deploying your application to a serverless environment using serverless functions. Serverless functions are a good option if you want to build a highly scalable application that can handle a large number of requests without incurring high costs.

To use serverless functions in Next.js, you'll need to use the "serverless" target in your "next.config.js" file and write your functions as described in the previous section.

1. Using Next.js with a headless CMS

   A headless CMS is a content management system that exposes its content through an API, allowing you to build custom front-ends for your content. This is a good option if you want to use

2. Some of the best Content Management System (CMS) that integrates perfectly with Next.js.

   • Sanity.io

   • Strapi

   • Prismic.io

   • Ghost

   • Enonic

---

## Conclusion

In this article, we've introduced Next.js, a powerful JavaScript framework for building server-rendered and statically-generated applications. We've covered some of the key features of Next.js, including its ability to create pages and routes, fetch data, and add styles and assets to your application. We've also looked at options for deploying your Next.js app, including deploying to a serverless environment and using advanced features such as static site generation and serverless functions.

To recap, some of the benefits of using Next.js include:

* **Simplified server-side rendering:** Next.js makes it easy to build server-rendered applications, with automatic code splitting and optimized performance.

* **Static site generation:** Next.js allows you to generate a set of static HTML, CSS, and JavaScript files from your application, making it easy to build highly performant, statically-generated sites.

* **Serverless functions:** Next.js includes support for deploying your application to a serverless environment using serverless functions, allowing you to build highly scalable applications.


Looking to the future, there are a number of exciting developments in the Next.js framework. For example, the Next.js team is working on adding support for incremental static regeneration, which will allow you to update the static files for your site without rebuilding the entire site. They're also working on improving the developer experience, with features such as improved TypeScript support and better-debugging tools.

If you're interested in learning more about Next.js, there are a number of resources available online. The Next.js documentation is a great place to start, and there are also a number of tutorials and courses available online that can help you get up to speed with the framework. Additionally, the Next.js community is active on social media and online forums, so don't hesitate to reach out if you have any questions or need help with your Next.js project.

That's it for this article! We hope you've learned something new about Next.js and are inspired to start building your own applications with the framework.