Securing Your Next.js with Arcjet on Fly.io with Lightning-Fast Deployment

Summary

In this tutorial, we'll walk through deploying a Next.js application to Fly.io using the Fly.io CLI and securing it with Arcjet Shield Protection. This setup ensures your application is both performant and secure, and the deployment process is incredibly fast.

Why Arcjet

Arcjet is a powerful tool designed to provide comprehensive security features for web applications. Its primary function is to offer robust protection against common web threats, such as DDoS attacks, bot activity, and abusive behavior. Arcjet achieves this through various security measures, including rate limiting, IP blacklisting, and advanced bot detection. By integrating Arcjet into your application, you can ensure that your app remains secure, performant, and resilient against malicious activities. They do have a rich docs page with a variety of security goods for your app, where you can find them here.

By using Arcjet in your project you gain:

Enhanced Security: Arcjet offers state-of-the-art security features to protect your Next.js application from common threats, ensuring that your app remains secure.

Scalability: With Arcjet, you can easily scale your security measures as your application grows, ensuring consistent protection regardless of traffic volume.

Ease of Integration: Arcjet provides straightforward integration with Next.js applications, allowing developers to quickly implement advanced security features without extensive configuration. It can also be used with all the modern authentication SDKs out there such us Clerk.dev.

Why fly.io

Fly.io is a platform that enables developers to deploy and run their applications close to their users. It leverages a global network of servers to provide low-latency, high-performance hosting solutions. It simplifies the deployment process by offering a powerful CLI and automated workflows, making it easy to deploy applications with minimal hassle. Additionally, Fly.io supports various programming languages and frameworks, including Next.js, making it a versatile choice for modern web development.

By using Fly.io in your project you gain:

Ease of Deployment: The provided CLI and automated deployment workflows streamline the deployment process, enabling rapid and efficient launches.

Global Reach: Fly.io's global network allows you to deploy your application close to your users, reducing latency and improving performance.

Scalability and Performance: Fly.io's infrastructure is designed to handle high traffic volumes, ensuring that your application remains performant and responsive under load.

Integration with Modern Tools: Fly.io supports seamless integration with modern development tools and frameworks, making it an ideal choice for deploying Next.js applications.

Setup

Step 1 Install a Next.js app

npx create-next-app@latest my-next-app
cd my-next-app

Step 2 Install Arcjet SDK

npm install @arcjet/next

Signup to Arcjet https://app.arcjet.com/auth/signin and retrieve the Arcjet API key and store it in .env file on the root folder.

ARCJET_KEY=ajkey_***********

Step 3 Create a middleware

src/services/protectionGuard.ts

import arcjet from "@arcjet/next";

const aj = arcjet({
    key: process.env.ARCJET_KEY,
    rules: [], // many rules can be added afterward in each route or middleware depending on the business case. 
});

export * from "@arcjet/next";
export default aj;

src/middleware.ts

import { createMiddleware, shield } from "./services/protectionGuard";
import protectionGuard from "./services/protectionGuard";

export const config = {
    // matcher tells Next.js which routes to run the middleware on.
    // This runs the middleware on all routes except for static assets.
    matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],
};

// Pass any existing middleware with the optional existingMiddleware prop
export default createMiddleware(
    protectionGuard.withRule(
        shield({
            mode: "LIVE",
        }),
    ),
);

In the above scenario, we are using shield protection. You can find more here. But in a few words, Arcjet Shield analyzes every request to your application to detect suspicious activity. Once a certain suspicion threshold is reached, subsequent requests from that client are blocked for a while.

Step 4 Setup Fly.io & Deploy

You can follow the documentation here

For MacOS is the steps are super simple

brew install flyctl

and then you simply use the below command in the root folder

fly launch

and boom 🎉 🎉 🎉 your app is getting deployed in less than 2 minutes 🚀

Monitoring

Arcjet provides you a rich dashboard with security-oriented logs/analytics you need for your deployed app.

We can see here some of the suspicious requests that have been blocked by shield.

Disclosure

Arcjet contacted me to test their product and share my experience with the developer community. While they sponsored this article, they did not influence the content or opinions expressed in this write-up.

This article aims to provide an honest and unbiased guide on integrating Arcjet's SDK with a Next.js application and deploying it using Fly.io. This ensures you get an authentic look at the process and can make an informed decision about using these tools in your projects.

Transparency is key in the developer community, and I believe in sharing my experiences honestly. Arcjet offers innovative security solutions that I found valuable, and I hope this guide helps you understand how to leverage their services effectively.

Conclusion

Incorporating Arcjet and Fly.io into your Next.js application development process offers significant benefits in terms of security, performance, and deployment efficiency. Arcjet SDK gives a great experience and it ensures that your application is protected against common threats, while Fly.io provides a robust and scalable hosting solution that enhances performance and reduces latency. Together, these tools help you build and deploy modern Next.js applications that are secure, performant, and user-friendly.

Github repo