BYTEHIDE SHIELD FOR NEXT.JS
Next.js Obfuscator
Protect your Next.js application against reverse engineering, copying, and tampering. ByteHide Shield integrates directly into your Next.js build.
Get started
Next.js
npm install --save-dev @bytehide/next-shield
// next.config.js
const { createShield } = require('@bytehide/next-shield');
module.exports = createShield({ projectToken: 'YOUR_TOKEN' })(yourConfig);Wrap your next.config with createShield and add your project token. Shield protects the generated chunks on every build.
Full setup guide in the docsFree to use with a ByteHide account
The first time Shield runs, it asks for a project token that connects it to your account. The package is free.
Get your free tokenHow it works
How to obfuscate a Next.js application
Three steps to wire Shield into your Next.js build.
Step 01
Install the Next.js plugin
Add @bytehide/next-shield as a dev dependency.
Step 02
Wrap your next.config
Wrap your Next.js config with createShield and add your project token.
Step 03
Build as usual
Run next build. Shield protects the generated chunks automatically.
Why obfuscate
Why obfuscate Next.js code
Next.js ships JavaScript to the browser for every page that runs client-side. That code is readable to anyone who opens developer tools.
- Your client components ship readableThe interactive parts of your Next.js app, the client components, are delivered as JavaScript chunks. Their logic is visible without obfuscation.
- Server and client code need different handlingNext.js mixes server and client code. The client chunks are what reaches the browser, and what needs obfuscation.
- Your build output is your product on displayThe .next chunks contain your frontend logic. Readable, they can be studied and copied.
Example
See Next.js obfuscation in action
Obfuscation is easier to understand when you see it. Here is a Next.js client component before and after Shield protects the compiled bundle.
'use client';
import { useState } from 'react';
export function PricingCard({ plan, price }: { plan: string; price: number }) {
const [selected, setSelected] = useState(false);
function handleSelect() {
setSelected(true);
fetch('/api/select-plan', {
method: 'POST',
body: JSON.stringify({ plan, price }),
});
}
return (
<div className={selected ? 'card selected' : 'card'}>
<h2>{plan}</h2>
<p>${price}/mo</p>
<button onClick={handleSelect}>Choose plan</button>
</div>
);
}var _0xd4=['7f3b','a1c9','e5d2'];(function(_0x3a,_0x1f){var _0xe=function(_0xb){while(--_0xb){_0x3a['push'](_0x3a['shift']());}};_0xe(++_0x1f);}(_0xd4,0x2c));
var _0x2b=function(_0xc,_0x8){_0xc=_0xc-0x0;return _0xd4[_0xc];};
function _0x5f(_0x9a,_0x4e){var _s=0x0;while(0x1)switch(_s){case 0x0:_0x6c(0x1)[_0x2b('0x0')](true);
_s=0x1;break;case 0x1:_0x7d(_0x2b('0x1'),{method:_0x2b('0x2'),body:_0x3e({[_0x9a]:_0x4e})});
return;}}Same behavior, unreadable result. The compiled bundle reveals nothing about your component logic.
What it covers
What ByteHide Shield protects in your Next.js build
Shield applies its protection to the JavaScript chunks Next.js generates for the browser. Here is what that covers.
- Your client component logicThe functions, hooks, and event handlers from your client components become unreadable in the shipped chunks. The behavior is identical, the logic is not legible.
- Your strings and configsAPI endpoints, keys, messages, and configuration values in the client code are encrypted, so they cannot be read by scanning the chunks.
- Your control flowThe structure of your logic is reshaped so the program flow cannot be followed, even after the code is beautified.
- Every chunk, every buildProtection runs as part of your Next.js build, so every release ships obfuscated automatically. There is no manual step to forget.
Your client-side experience is on display. Shield obfuscates what ships.
Build
Next.js obfuscation: what to protect and what to exclude
Next.js generates different kinds of files. Knowing which to obfuscate and which to leave alone is what keeps protection clean.
- Shield protects the .next chunksNext.js generates JavaScript chunks in .next/static/chunks. Those are what ship to the browser, and what Shield protects.
- Exclude the special filesNext.js has special files like _document and _app, and API routes. Shield's exclude option keeps these out of obfuscation so the app keeps working.
- Server-side code stays on the serverServer components and API routes run on your server, not the browser. The priority for obfuscation is the client-side chunks.
Protect what the browser sees. Leave the server alone.
Free tool vs Shield
Free obfuscator vs ByteHide Shield
For a quick test of a single JavaScript file, the free online obfuscator is enough. For a real Next.js app, ByteHide Shield protects the whole build.
ByteHide Shield
Production-grade protection
The free online tool obfuscates single JavaScript files. ByteHide Shield protects a full Next.js application, built into your pipeline.
Open the free JavaScript obfuscatorFrequently asked questions
What is a Next.js obfuscator?
How do I add Shield to Next.js?
Does it work with the App Router and Pages Router?
What files should I exclude?
Is it free?
Will obfuscation affect Next.js performance?
What is the best Next.js obfuscator?
Protect your Next.js application with
ByteHide Shield
Obfuscation is one layer. ByteHide Shield adds code virtualization, runtime self-protection, and advanced configuration, built into your Next.js pipeline.
