Integrating Jscrambler with Next.js

Last updated: 14 May 2024

Framework versions tested: 11.0.0 ● 14.2.3

Introduction

Next.js is an open-source React-based framework built on top of Node.js that is aimed at developing web apps.

For the purposes of this tutorial, we will be using a fork of the official Next.js learn-starter template.

Integrating Jscrambler with Next.js

If you haven't tried Jscrambler out before reading this tutorial, please consider reading the Getting Started Guide, which will walk you through the steps on how to protect your application. This will make this section easier to grasp. It will also teach you how to configure Jscrambler and use a custom configuration.

To complete the integration with Jscrambler, you need a JSON configuration file with your API credentials, application ID, and protection configuration. You may create your transformations recipe using the Jscrambler Web application and download a JSON configuration file or use the following example for a quick test. This file should be named jscrambler.json and placed on the project's root folder. If you choose to try the following example, just make sure to fill in the missing information: accessKey, secretKey, and applicationId.

{
 "keys": {
   "accessKey": <ACCESS_KEY_HERE>,
   "secretKey": <SECRET_KEY_HERE>
 },
 "applicationId": <APP_ID_HERE>,
 "filesSrc": [
   "./.next/**/*.html",
   "./.next/**/*.js"
 ],
 "filesDest": "./",
"params": [
    {
      "name": "objectPropertiesSparsing"
    },
    {
      "name": "variableMasking"
    },
    {
      "name": "whitespaceRemoval"
    },
    {
      "name": "identifiersRenaming",
      "options": {
        "mode": "SAFEST"
      }
    },
    {
      "name": "globalVariableIndirection"
    },
    {
      "name": "dotToBracketNotation"
    },
    {
      "name": "stringConcealing"
    },
    {
      "name": "functionReordering"
    },
    {
      "options": {
        "freq": 1,
        "features": [
          "opaqueFunctions"
        ]
      },
      "name": "functionOutlining"
    },
    {
      "name": "propertyKeysObfuscation",
      "options": {
        "encoding": [
          "hexadecimal"
        ]
      }
    },
    {
      "name": "regexObfuscation"
    },
    {
      "name": "booleanToAnything"
    }
  ],
  "areSubscribersOrdered": false,
  "useRecommendedOrder": true,
  "jscramblerVersion": "stable",
  "tolerateMinification": true,
  "profilingDataMode": "off",
  "useAppClassification": true,
  "browsers": {}
}

Integrating Jscrambler in the Build Process

You can integrate Jscrambler into the Next.js build process with the CLI.

Install the Jscrambler API Client:

npm i jscrambler --save-dev

Create a CLI hook in the scripts section of package.json. The section should look like this:

  "scripts": {
    "dev": "next dev",
    "build": "next build && jscrambler",
    "start": "next start"
  },

The "build": "next build && jscrambler" hook will trigger the jscrambler command after the build process is finished.

Build the application:

npm run build

There you go. Jscrambler is now integrated into your build process and the protected production files will override the original ones on the .next/ folder.

Known Problems

There are no known problems integrating Jscrambler with Next.js.