Next.js Integration

ByteHide Shield provides a dedicated Next.js plugin that allows you to seamlessly protect your JavaScript code during the build process. This plugin integrates directly with your Next.js configuration to obfuscate your application code and protect your intellectual property.

Installation

Install the ByteHide Shield Next.js plugin from npm:

npm install --save-dev @bytehide/next-shield

Or with yarn:

yarn add --dev @bytehide/next-shield

Basic Setup

Create or modify your next.config.js file to use the Shield plugin:

// next.config.js
const { createShield } = require('@bytehide/next-shield');

const nextConfig = {
  reactStrictMode: true,
  // Your other Next.js configuration options
};

module.exports = createShield({
  projectToken: 'your-project-token', // Required: Get this from your ByteHide account
}, nextConfig);

With this minimal configuration, Shield will apply default protections to your Next.js application.

Configuration Options

The createShield function accepts the following options:

Advanced Configuration

For more advanced scenarios, you can provide additional Shield protection options:

// next.config.js
const { createShield } = require('@bytehide/next-shield');

const nextConfig = {
  // Your Next.js configuration
};

module.exports = createShield({
  projectToken: 'your-project-token',
  replace: true,
  exclude: ['_document.js', '_app.js', 'api/*.js'],
  controlFlowFlattening: true,
  debugProtection: true,
  devtoolsBlocking: process.env.NODE_ENV === 'production',
  config: {
    // Additional Shield configuration options
    stringArray: true,
    stringArrayEncoding: ['base64'],
    stringArrayThreshold: 0.8,
    selfDefending: true,
    identifierNamesGenerator: 'hexadecimal'
  }
}, nextConfig);

Excluding Files

You can exclude specific files from being obfuscated using the exclude option. This is useful for files that might cause issues when obfuscated:

// next.config.js
const { createShield } = require('@bytehide/next-shield');

module.exports = createShield({
  projectToken: 'your-project-token',
  exclude: [
    '_document.js',       // Next.js special file
    '_app.js',            // Next.js special file
    'api/*.js',           // All API route handlers
    'pages/public/*.js',  // Public pages that don't need protection
  ]
}, nextConfig);

Environment-specific Configuration

You can apply different protection settings based on the environment:

// next.config.js
const { createShield } = require('@bytehide/next-shield');

const nextConfig = {
  // Your Next.js configuration
};

const isDev = process.env.NODE_ENV === 'development';

module.exports = createShield({
  projectToken: process.env.BYTEHIDE_PROJECT_TOKEN,
  // Only apply obfuscation in production
  enabled: !isDev,
  // Apply more aggressive protections in production
  debugProtection: !isDev,
  devtoolsBlocking: !isDev,
  config: {
    // In development, generate source maps
    sourceMap: isDev,
    // In production, use stronger obfuscation
    stringArrayEncoding: isDev ? [] : ['base64'],
    selfDefending: !isDev,
  }
}, nextConfig);

How It Works

The Shield plugin for Next.js works in the following way:

1. During the Next.js build process, the plugin identifies JavaScript files in the build directory (.next/ by default)
2. Files specified in the exclude option are skipped
3. Each eligible file is obfuscated using ByteHide Shield's protection engine
4. If replace is true, the original files are replaced with the obfuscated versions
5. If replace is false, obfuscated files are stored with the specified extension (.obf by default)

Performance Considerations

Obfuscating your Next.js application can impact both build time and runtime performance:

• Build Time: The build process will take longer as each file needs to be processed.
• Bundle Size: Obfuscated code may increase your bundle size slightly.
• Runtime: Heavy obfuscation might impact initial load time and runtime performance.

To mitigate these issues:

• Use the exclude option to avoid obfuscating files that don't need protection
• Apply heavy obfuscation only in production builds
• Consider using lighter protection settings for performance-critical parts of your application

Complete Example

Here's a complete example for a production Next.js application with Shield:

// next.config.js
const { createShield } = require('@bytehide/next-shield');

const isProd = process.env.NODE_ENV === 'production';

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    domains: ['example.com'],
  },
};

module.exports = createShield({
  projectToken: process.env.BYTEHIDE_PROJECT_TOKEN,
  enabled: isProd, // Only enable in production
  replace: true,
  exclude: ['_document.js', '_app.js', 'api/public/*.js'],
  controlFlowFlattening: true,
  debugProtection: true,
  devtoolsBlocking: true,
  config: {
    stringArray: true,
    stringArrayEncoding: ['base64'],
    stringArrayThreshold: 0.8,
    selfDefending: true,
    renameProperties: false,
    identifierNamesGenerator: 'hexadecimal',
    transformObjectKeys: true,
    reservedNames: [
      '^React$', '^useState$', '^useEffect$',
      '^Component$', '^getStaticProps$', '^getServerSideProps$'
    ],
  }
}, nextConfig);

Next Steps

• Get your project token
• Learn about protection options
• Configure exclusions and reserved items