How to Use a Third-Party CDN to Reduce Next.js Hosting Costs on Vercel

The Next.js framework is the top choice for building high-performance React applications. Vercel, the parent company of Next.js, offers an excellent deployment experience, making it the recommended platform for deploying Next.js.

However, this convenience may come with a significant hidden cost.

Vercel Fast Data Transfer and Its Bandwidth Costs

When you deploy a Next.js project using Vercel, all data transferred through its edge network—whether it's pages, API routes, or static assets—is counted towards "Fast Data Transfer." This is essentially Vercel's Content Delivery Network (CDN) service.

Vercel's free Hobby plan includes 100GB of Fast Data Transfer per month, which might be sufficient for personal projects or small applications. However, for projects with slightly higher traffic or in cases of sudden traffic surges, you will face an additional charge of approximately $0.15 per GB once you exceed the free quota.

Compared to other major cloud service providers, this price is considerably higher:

• Amazon CloudFront, with a bandwidth price of $0.085/GB, is about half the price of Vercel.
• Even AWS S3, which doesn't include a CDN (and thus typically has more expensive data transfer), is priced at only $0.09/GB, still cheaper than Vercel.
• Cloudflare offers free CDN bandwidth.

This can inadvertently place significant pressure on your operational costs.

How to Bypass Vercel Fast Data Transfer

Fortunately, the flexibility of the Next.js framework allows us to bypass Vercel's Fast Data Transfer and handle the traffic for static assets through a more affordable third-party CDN service.

The core of this solution lies in modifying the Next.js configuration file, next.config.js, and adjusting the project's build and deployment process.

Step 1: Configure assetPrefix

assetPrefix is a key parameter in next.config.js that allows you to specify a URL prefix for all of your Next.js application's static assets (such as JavaScript, CSS, images, etc.). By setting it to your CDN address, Next.js will automatically point the references to static assets to your CDN when generating HTML pages.

Here is a configuration example, assuming you have uploaded your static assets to another CDN and are accessing them via the custom domain https://cdn.yourdomain.com:

const nextConfig = {
  // Only enable assetPrefix in the production environment
  assetPrefix: process.env.NODE_ENV === 'production' ? 'https://cdn.yourdomain.com' : undefined,
};

export default nextConfig;

Key Points:

• The value of assetPrefix should be the access URL of your CDN service.
• It is recommended to enable this configuration only in the production environment (process.env.NODE_ENV === 'production') to avoid affecting local development.

Step 2: Handle Image Optimization

By default, the Next.js <Image> component optimizes images in real-time through Vercel's servers. This means that even if you set an assetPrefix, image requests will still go through Vercel's service and incur bandwidth costs.

To ensure that images are also served entirely through your own CDN, you need to disable Next.js's built-in image optimization feature in next.config.js:

const nextConfig = {
  // Only enable assetPrefix in the production environment
  assetPrefix: process.env.NODE_ENV === 'production' ? 'https://cdn.yourdomain.com' : undefined,
  images: {
    unoptimized: true,
  },
};

export default nextConfig;

After setting images.unoptimized = true, the src of the <Image> component will directly use the path defined in your assetPrefix, ensuring that image traffic is handled entirely by your third-party CDN.

Step 3: Build and Upload

After completing the configuration, your deployment process will require some adjustments:

1. Build the project normally: Run npm run build. After the build is complete, all static assets that need to be uploaded to the CDN will be generated in the .next/static directory.
2. Upload to the CDN: You need to upload all the files from the .next/static directory to your third-party CDN service. It is crucial to ensure that the file paths after uploading correspond to the path set in assetPrefix. For example, the local file .next/static/css/main.css should be accessible at https://cdn.yourdomain.com/_next/static/css/main.css on the CDN. This means you need to upload the static directory as the _next/static directory in your CDN bucket.
3. Deploy the application: Finally, deploy the rest of the build output, excluding .next/static, to a platform like Vercel.

By following these steps, you have successfully transferred the static asset traffic of your Next.js project to a more cost-effective CDN, effectively avoiding potentially high bandwidth bills from Vercel.

Is There a Simpler Solution?

If you find the manual process of configuring and managing a CDN too cumbersome but still want a more cost-effective deployment solution than Vercel, then Leapcell is an option worth considering.

Leapcell also offers one-click deployment for Next.js projects and includes a built-in global CDN acceleration feature, requiring no manual configuration on your part.

Unlike Vercel, Leapcell's CDN acceleration service is completely free, with no worries about excess bandwidth fees.

We are committed to being a more developer-friendly and conscientious alternative to Vercel.

Visit Leapcell now to experience it for yourself.