How to Serve .br (Brotli) Files from NGINX 🚀

Modern web applications must be fast, and compression plays a major role in performance. Brotli (.br) offers better compression ratios than Gzip, especially for JavaScript, CSS, and HTML files.

In this guide, you’ll learn how to configure NGINX to serve pre-compressed .br files efficiently.

Why Use Brotli?

• 📉 Smaller file sizes than Gzip
• ⚡ Faster page load times
• 🌍 Supported by all modern browsers
• 💰 Reduced bandwidth costs

Prerequisites

• NGINX installed
• Pre-compressed .br files (generated by a build tool like Webpack, Gatsby, Vite, etc.)
• Access to NGINX config (nginx.conf or site config)

Step 1: Verify .br Files Exist

Your build output should look like this:

/var/www/html/
 ├── index.html
 ├── index.html.br
 ├── app.js
 ├── app.js.br
 ├── style.css
 ├── style.css.br

⚠️ NGINX will not generate .br files automatically unless Brotli module is enabled. This guide assumes pre-compressed files.

Step 2: Enable Brotli Support in NGINX

Option A: Check if Brotli Module Is Already Installed

nginx -V 2>&1 | grep brotli

If you see:

--add-module=ngx_brotli

you’re good 👍

Option B: Install Brotli Module (Ubuntu)

sudo apt install nginx-extras

Then verify again:

nginx -V | grep brotli

Step 3: Enable Brotli in NGINX Config

Edit your main config:

sudo nano /etc/nginx/nginx.conf

Add inside the http {} block:

brotli              on;
brotli_static       on;
brotli_comp_level   6;
brotli_types
    text/plain
    text/css
    text/javascript
    application/javascript
    application/json
    application/xml
    application/rss+xml
    image/svg+xml
    font/ttf
    font/otf
    font/woff
    font/woff2;

What This Does

• brotli on; → Enables Brotli
• brotli_static on; → Serves .br files directly
• brotli_comp_level 6; → Balanced compression
• brotli_types → File types eligible for Brotli

Step 4: NGINX Server Block Configuration

Inside your site config:

server {
    listen 80;
    server_name example.com;

    root /var/www/html;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

No special .br rewrite is required when brotli_static on; is enabled.

Step 5: Reload NGINX

sudo nginx -t
sudo systemctl reload nginx

Step 6: Verify Brotli Is Working

Using curl

curl -H "Accept-Encoding: br" -I https://example.com/app.js

Expected output:

Content-Encoding: br

Using Browser DevTools

1. Open Chrome DevTools → Network
2. Click any JS/CSS file
3. Check Response Headers

You should see:

content-encoding: br

Final Thoughts

Serving .br files in NGINX is one of the simplest performance wins you can implement. With minimal configuration, you get faster load times and better user experience.

If you’re running Gatsby, React, Angular, or Next.js, Brotli should be part of your production setup.