{"id":27125071,"url":"https://github.com/0501guptanitin/nextjs-webpack-obfuscator","last_synced_at":"2026-04-11T02:02:19.932Z","repository":{"id":286610371,"uuid":"961946940","full_name":"0501guptanitin/nextjs-webpack-obfuscator","owner":"0501guptanitin","description":"Next.js code obfuscation setup using webpack-obfuscator – secure and protect your production builds.","archived":false,"fork":false,"pushed_at":"2025-04-07T12:21:51.000Z","size":3,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-07T13:28:47.642Z","etag":null,"topics":["client-side-security","code-obfuscation","frontend-security","javascript","literal","nextjs","nextjs-configuration","nodejs","obfuscate","obfuscation","obfuscator","security","typescript","webpack","webpack-obfuscator"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/0501guptanitin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-04-07T12:19:00.000Z","updated_at":"2025-04-07T12:44:21.000Z","dependencies_parsed_at":"2025-04-07T13:38:58.284Z","dependency_job_id":null,"html_url":"https://github.com/0501guptanitin/nextjs-webpack-obfuscator","commit_stats":null,"previous_names":["0501guptanitin/nextjs-webpack-obfuscator"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0501guptanitin%2Fnextjs-webpack-obfuscator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0501guptanitin%2Fnextjs-webpack-obfuscator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0501guptanitin%2Fnextjs-webpack-obfuscator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0501guptanitin%2Fnextjs-webpack-obfuscator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0501guptanitin","download_url":"https://codeload.github.com/0501guptanitin/nextjs-webpack-obfuscator/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247669121,"owners_count":20976329,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["client-side-security","code-obfuscation","frontend-security","javascript","literal","nextjs","nextjs-configuration","nodejs","obfuscate","obfuscation","obfuscator","security","typescript","webpack","webpack-obfuscator"],"created_at":"2025-04-07T14:29:08.136Z","updated_at":"2026-04-11T02:02:19.831Z","avatar_url":"https://github.com/0501guptanitin.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🔐 Next.js Code Obfuscation using `webpack-obfuscator`\n\nObfuscating your JavaScript code adds an extra layer of protection by making the output bundle harder to understand and reverse-engineer. This guide explains how to use `webpack-obfuscator` in a Next.js project to secure your client-side code in production.\n\n---\n\n## 📦 Prerequisites\n\nBefore getting started, ensure the following are already set up:\n\n- [Node.js](https://nodejs.org/en/) (v14 or newer)\n- A Next.js project (TypeScript or JavaScript)\n- TypeScript configuration (optional but recommended)\n\n---\n\n## 🚀 Installation \u0026 Configuration\n\nTo begin, install `webpack-obfuscator` as a **dev dependency** by running:\n\n```bash\nnpm install --save-dev webpack-obfuscator\n# or\nyarn add --dev webpack-obfuscator\n```\n\nThen, in your Next.js project root, locate or create a `next.config.ts` (or `next.config.js` for JavaScript) and add the following configuration:\n\n```ts\n// next.config.ts\n\nconst nextConfig: NextConfig = {\n  webpack: (config, { dev, isServer }) =\u003e {\n    if (!dev \u0026\u0026 !isServer) {\n      config.plugins?.push(\n        new WebpackObfuscator(\n          {\n            compact: true,\n            controlFlowFlattening: true,\n            controlFlowFlatteningThreshold: 0.75,\n            deadCodeInjection: true,\n            deadCodeInjectionThreshold: 0.4,\n            debugProtection: true,\n            debugProtectionInterval: 2000,\n            disableConsoleOutput: true,\n            identifierNamesGenerator: \"hexadecimal\",\n            log: false,\n            numbersToExpressions: true,\n            ...//You can add more according to your needs\n          },\n          [\n            \"node_modules/**\",\n            \".next/**\",\n            \"public/**\"\n          ]\n        )\n      );\n    }\n    return config;\n  },\n};\n\n```\n\n\u003e 💡 **Note**: If you're using JavaScript, remove type annotations and replace `import` with `require()` syntax accordingly.\n\n---\n\n## 🏗️ Usage\n\nOnce installed and configured, you can obfuscate your code by simply running a production build:\n\n```bash\nnpm run build\n# or\nyarn build\n```\n\nThis will apply obfuscation to your client-side JavaScript output, which can be found in the `.next/static/chunks` directory. You'll notice the code is minified, encoded, and no longer human-readable.\n\n---\n\n## ⚠️ Important Notes\n\n- Obfuscation **only runs in production** (`next build`) and applies only to **client-side code**.\n- It does **not** protect server-side logic or Next.js API routes.\n- This may **increase your build time and bundle size**.\n- Obfuscation is **not a security guarantee** — do not store secrets or sensitive data in frontend code.\n- Compatible with both **JavaScript and TypeScript** projects.\n\n---\n\n## ✅ Summary\n\nYou’ve now successfully set up `webpack-obfuscator` to enhance the security of your frontend code in a Next.js app. While not foolproof, it adds meaningful complexity to deter casual reverse-engineering attempts.\n\nHappy coding! 🔐\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0501guptanitin%2Fnextjs-webpack-obfuscator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0501guptanitin%2Fnextjs-webpack-obfuscator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0501guptanitin%2Fnextjs-webpack-obfuscator/lists"}